Cara Efektif Mempercepat Loading Blogger

Tips Cara Mempercepat Loading Blogspot - Trik Mempercepat loading template blogger dengan script lazy load, dns prefetch, dan https expires header.
Langsung ke konten utama [Tunjukkan semua]
    Cara Efektif Mempercepat Loading Blogger - Situs yang lamban dapat membuat pengunjung Anda frustrasi, dan akan mengurangi konversi klik ke website Anda. Kecepatan waktu loading halaman blog juga menjadi salah satu faktor SEO untuk menentukan ranking, itulah mengapa penting bagi kita untuk mengurangi loading blog kita.

    Banyak sekali trik ataupun cara yang bisa Kita lakukan untuk meningkatkan kecepatan website dan blog. Melalui postingan ini, saya akan membahas apa saja yang menyebabkan loading blog menjadi lambat disertai dengan tips untuk mempercepat loading blogspot. Pertama, saya akan membahas apa saja yang menyebabkan menjadi berat.

    Penyebab Loading Blog Lambat

    Berikut ini beberapa macam penyebab yang paling sering membuat loading blog menjadi berat:

    Koneksi

    Koneksi internet adalah hal utama yang menyebabkan loading blog menjadi lama, jika koneksi visitor sedang tidak stabil maka kecepatan load blogpun menjadi tidak stabil.

    Browser dan Perangkat

    Jika aplikasi browser membuka banyak tab dan terlalu banyak menyimpan cache serta cookie maka kecepatan load blog tersebut menjadi berat. Device minim ram dan terlalu banyak aplikasi yang berjalan di latar belakang pun dapat mempengaruhi waktu loading sebuah website.

    Template (JavaScript dan CSS)

    Penggunaan javascript dan css eksternal merupakan hal yang wajar digunakan oleh para designer template. Namun jika jumlahnya berlebihan akan sangat berpengaruh terhadap kecepatan blog itu sendiri.

    Konten

    Yang saya maksud konten disini adalah penggunaan widget blog, gambar, dan video.

    Cara Efektif Mempercepat Loading Blog

    Tips yang saya berikan ini bisa membuat loading blog menjadi super cepat.

    1. Gunakan Template Fast Loading

    Pintar pintarlah ketika memilih template untuk blog. Biasanya template blog fast loading akan mengorbankan desain, dan sebaliknya template yang bagus pasti akan mengorbankan kecepatan blog.

    Jadi, pilihlah template yang loadingnya cepat tetapi tidak mengorbankan desain. Baca: Template Blogger Keren Fast Loading

    2. Widget

    Jangan menggunakan widget yang berlebihan, seperti; jumlah tayangan halaman dan fanpage facebook. Memasang widget Kategori dan Popular Post menurut saya sudah lebih dari cukup.

    3. Gambar

    Usahakan jangan terlalu banyak memasukan gambar pada postingan,  gambar pada blog pasti menggunakan url bp.blogspot.com Ini berarti gambar pada blog tidak dihosting oleh blogger.com sehingga akan menambah request user ke server untuk menampilkan gambar.

    Pastikan juga gambar sudah dikompres sebelum di masukan kedalam postingan, situs yang biasa saya gunakan untuk mengkompres gambar adalah https://compressjpeg.com

    4. Pasang Additional Script

    Cara yang sering diterapkan untuk membuat loading blog menjadi cepat adalah dengan memasang script tambahan ke dalam template.

    Cara Memasang Script DNS Prefetch Untuk Mempercepat Loading Blog

    1. Buka Blogger masuk menu Template > Edit HTML
    2. Cari kode </head> , letakan kode ini diatas kode tersebut

    <link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
    <link href='//28.2bp.blogspot.com' rel='dns-prefetch'/>
    <link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
    <link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
    <link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
    <link href='//www.blogger.com' rel='dns-prefetch'/>
    <link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
    <link href='//fonts.googleapis.com' rel='dns-prefetch'/>
    <link href='//use.fontawesome.com' rel='dns-prefetch'/>
    <link href='//ajax.googleapis.com' rel='dns-prefetch'/>
    <link href='//resources.blogblog.com' rel='dns-prefetch'/>
    <link href='//www.facebook.com' rel='dns-prefetch'/>
    <link href='//plus.google.com' rel='dns-prefetch'/>
    <link href='//twitter.com' rel='dns-prefetch'/>
    <link href='//www.youtube.com' rel='dns-prefetch'/>
    <link href='//feedburner.google.com' rel='dns-prefetch'/>
    <link href='//www.pinterest.com' rel='dns-prefetch'/>
    <link href='//www.linkedin.com' rel='dns-prefetch'/>
    <link href='//feeds.feedburner.com' rel='dns-prefetch'/>
    <link href='//github.com' rel='dns-prefetch'/>
    <link href='//player.vimeo.com' rel='dns-prefetch'/>
    <link href='//platform.twitter.com' rel='dns-prefetch'/>
    <link href='//apis.google.com' rel='dns-prefetch'/>
    <link href='//connect.facebook.net' rel='dns-prefetch'/>
    <link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
    <link href='//www.google-analytics.com' rel='dns-prefetch'/>
    <link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
    <link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
    <link href='//www.gstatic.com' rel='preconnect'/>
    <link href='//www.googletagservices.com' rel='dns-prefetch'/>
    <link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
    <link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
    <link href='//syndication.twitter.com' rel='dns-prefetch'/>
    

    3. Simpan Template

    Cara Efektif Mempercepat Loading Blog dengan Script Lazy Load

    1. Buka Blogger masuk menu Template > Edit HTML
    2. Cari kode </body> , letakan kode ini diatas kode tersebut

    <script type='text/javascript'>
    //<![CDATA[
    // Lazy Load
    (function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
    //]]>
    </script>

    3. Simpan Template.

    Membuat Blog Menjadi Fast Loading dengan Script HTTP Expires Header

    Cara Memasang script ini sama seperti Cara yang pertama berikut kodenya.

    <include expiration='7d' path='*.css'/>
    <include expiration='7d' path='*.js'/>
    <include expiration='3d' path='*.gif'/>
    <include expiration='3d' path='*.jpeg'/>
    <include expiration='3d' path='*.jpg'/>
    <include expiration='3d' path='*.png'/>
    <meta http-equiv="expires" content="sat, 02 jun 2020 00:00:00 GMT"/>

    Fungsi utama dari Expires header: menyimpan kode berupa CSS, Gambar, JavaScript  ke dalam browser (cache). Jadi, ketika web diakses Kembali melalui device yang sama, waktu loadingnya akan menjadi lebih cepat.

    Sekian artikel tentang Cara Efektif Mempercepat Loading Blog semoga bermanfaat. Terimakasih sudah berkunjung! Happy Blogging!
    (https://masihterjaga.blogspot.com)

    Postingan lainnya

    Posting Komentar