10 Cara Efektif Untuk Mempercepat Loading Blog Anda
Assalamualaikum Sahabat Blogger.
10 Cara Efektif Untuk Mempercepat Loading Blog Anda - Tidak heran jika kita itu benci menunggu. Kita hidup di dunia yang sibuk dan kita tidak punya waktu untuk disia-siakan. Karena sebagian besar dari kita menghabiskan waktu untuk online, maka dari itu kita perlu membuat loading blog kita menjadi lebih cepat. Ada beberapa hal yang bisa dilakukan seorang webmaster untuk mempercepat situsnya. Tetapi pada platform gratis seperti Blogger, anda tidak memiliki banyak kendali situs anda. Karena itu, hanya ada beberapa hal yang dapat anda lakukan untuk mempercepat loading blog anda. Saya akan membahas beberapa tips dalam artikel ini.

Sebelumnya anda harus memeriksa skor kecepatan loading blog anda terlebih dahulu sebelum dan sesudah menerapkan cara ini. Dengan demikian, anda dapat mengetahui apakah setiap cara yang saya berikan ini layak digunakan atau tidak. Berikut ini adalah 10 tips efektif untuk mempercepat loading blog anda.

Baca Juga : Cara Membuat Widget Recent Post Responsive Pada Blog

1. Kompres Kode Template

Kode yang tidak terkompresi mungkin baik untuk anda tetapi tidak untuk pengguna. Ini menyebabkan halaman memuat lebih lambat. Untuk masalah ini anda bisa menggunakan Kompresor HTML untuk mengompresi HTML, Javascript, CSS, dll. Setelah dikompresi, situs ini akan menunjukkan kepada anda berapa banyak ukuran yang telah anda simpan. Cukup tempelkan kode ke area teks , pilih kode blogger dan tekan kompres. Situs akan mendeteksi kode secara otomatis dan memberi tahu anda untuk melakukan perubahan jika diperlukan.
10 Cara Efektif Untuk Mempercepat Loading Blog Anda

Kode yang sudah di kompres biasanya berantakan. Maka dari itu, untuk memperindah kembali tampilan HTML, anda bisa mengunjungi Code Beautifier.

Sebelum menggunakan Code Beautifier :
10 Cara Efektif Untuk Mempercepat Loading Blog Anda

Sesudah menggunakan Code Beautifier :
10 Cara Efektif Untuk Mempercepat Loading Blog Anda

2. Kurangi Jumlah Widget

Beberapa widget membutuhkan banyak bandwidth untuk dimuat. Anda harus memastikan bahwa hanya widget yang paling penting saja yang digunakan. Saya sendiri hanya menggunakan Widget Populer Posts saja selebihnya widget AdSense.

3. Hapus Gambar Latar Belakang

Menggunakan gambar latar belakang mungkin terlihat bagus untuk tampilan blog. Akan tetapi, membutuhkan satu ton bandwidth untuk loadingnya. Coba ubah gambar latar belakang blog Anda menjadi warna solid seperti warna putih, hitam merah, dll.

Baca Juga : Cara Membuat Artikel SEO Friendly Yang Berkualitas dan Meningkatkan Organik Traffic

4. Hindari Penggunaan Javascript Yang Berlebihan

Javascript yang kurang diprioritaskan harus ditambahkan sebelum menutup body tag. Anda juga harus menggunakan CDN berkecepatan tinggi untuk mengimpor javascript. Menempatkan kode javascript sebelum menutup body tag memastikan bahwa kode itu dimuat terakhir. Oleh karena itu, pengguna dapat mulai membaca konten bahkan sebelum situs dimuat sepenuhnya.

5. Kurangi Penggunaan Iklan Yang Berlebihan

Terlalu banyak iklan juga dapat memperlambat blog anda, karena itu, kurangilah penggunaan iklan yang berlebihan. Anda juga dapat menggunakan Script Lazyload Adsense, untuk mempercepat pemuatan iklan yang akan tampil.

Masuk ke Dashboard blogger -> Pilih "Tema" -> Klik "Edit HTML" -> Kemudian tambahkan kode script dibawah ini sebelum kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
<script type='text/javascript'>
  //<![CDATA[
  // Lazy Load AdSense
  var lazyadsense=!1;
  window.addEventListener("scroll",function(){
    (0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){
      var e=document.createElement("script");
      e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
      var a=document.getElementsByTagName("script")[0];
      a.parentNode.insertBefore(e,a)}
                                                                                                              (),lazyadsense=!0)}
                          ,!0);
  //]]>
</script>
Jika masih pemuatan iklan Adsense masih terasa lama, anda bisa menghapus semua link JS Adsense yang biasanya terpasang pada kode iklan Adsense, contohnya seperti kode dibawah ini :
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>

6. Batasi Jumlah Posting di Beranda Blog

Kurangi jumlah postingan yang ditampilkan di beranda blog untuk mempercepat waktu loading. Untuk mengubah jumlah posting yang ditampilkan di beranda blogger. 
Cara untuk mengubah jumlah postingan di beranda blog, silakan anda masuk ke dashboard blogger -> pilih "Setelan" -> pilih "Postingan, Komentar, dan Berbagi".
10 Cara Efektif Untuk Mempercepat Loading Blog Anda

Selanjutnya rubah jumlah postingan yang akan ditampilakan di beranda blog anda. Disini saya hanya menampilkan 5 postingan saja agar loading blog tidak terlalu berat.
Catatan : Blogger memiliki batas ukuran 1 Mb untuk beranda. Jika beberapa gadget / posting gagal dimuat, kemungkinan anda melebihi batas ukuran yang sudah ditentukan blogger.
Baca Juga : Daftar Niche Blog Yang Selalu Ramai Pengunjung

Anda juga dapat menggunakan Script Lazyload, untuk meringankan loading saat memuat halaman blog anda. Masuk ke Dashboard blogger -> Pilih "Tema" -> Klik "Edit HTML" -> Kemudian tambahkan kode script dibawah ini sebelum kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
<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>

7. Kompres Ukuran Gambar

Gambar membutuhkan banyak bandwidth untuk dimuat. Karena itu, sangat penting untuk mengompres gambar anda sebelum mengunggahnya ke blog anda. Ada beberapa kompresor gambar online seperti Kompres Gambar Online , iLoveIMG atau TinyPNG.

8. Gunakan Script Kode HTTP Expires Header

Fungsi dari Kode HTTP Expires header adalah untuk menyimpan kode CSS, Gambar, JavaScript  ke dalam cache. Jadi, ketika blog akan diakses Kembali melalui device atau Komputer yang sama, waktu loadingnya akan menjadi lebih cepat. Karena sudah menyimpan kode yang disebutkan tadi.

Masuk ke Dashboard blogger -> Pilih "Tema" -> Klik "Edit HTML" -> Kemudian tambahkan kode script dibawah ini sebelum kode </head>
<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'/>

9. Gunakan CDN

Jika situs anda menggunakan banyak sumber daya eksternal seperti javascript, stylesheet, kode pra-prosesor, dll. Kemudian gunakan CDNs seperti cdnjs. CDN memastikan bahwa file berada di server yang cepat. Setiap file di-host di beberapa server untuk memberikan kecepatan maksimum. Anda dapat menggunakan maxcdn untuk menyimpan file anda.

Anda juga dapat memasukan Script DNS Prefetch Untuk Mempercepat Loading Blog anda.
Masuk ke Dashboard blogger -> Pilih "Tema" -> Klik "Edit HTML" -> Kemudian tambahkan kode script dibawah ini sebelum kode </head>
<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'/>

10. Gunakan Template Fast Loading

Jika blog anda masih lambat setelah mencoba semua cara ini, kemungkinan blog anda memiliki kode yang buruk. Dalam kasus seperti itu, beralihlah ke template fast loading seperti template VioMagz karya Mas Sugeng ini seperti yang saya gunakan untuk blog MasPutro.com. Untuk template silakan anda cari sesuai dengan keinginan anda dan pastikan template tersebut memiliki loading yang cepat.

Mungkin cukup sekian artikel tentang cara mempercepat loading blog. Apabila anda memiliki tips lain, anda bisa tuliskan dikolom komentar dibawah ini. Semoga artikel ini bermanfaat dan terimakasih sudah membaca artikel yang sederhana ini dari blog saya. Wassalamualaikum.
Penulis : MasPutro.com

2 Komentar

  1. Mantap bang artikelnya.
    Barangkali disini ada yang mau bikin widget recent post yang keren silahkan kunjungi saja https://www.lutfin.com/2019/05/membuat-widget-recent-post-responsive-pada-blog.html?m=1

    BalasHapus

Posting Komentar

Lebih baru Lebih lama