Cara Mempercepat Loading Blog Dengan Lazy Load Adsense + Image

Berbagai cara memang boleh dilakukan untuk dapat menciptakan loading blog menjadi sangat cepat, namun kau juga perlu untuk melihat cara yang cepat itu apakah sempurna untuk blog kamu? Tidak sedikit yang malah melaksanakan meningkatkan secara optimal pada kecepatan blog justru malah membua goresan pena postingan menjadi tak karuan serta sulit untuk dibaca. Untuk mempercepat loading blog, kau harus tau dulu apa yang menjadi duduk kasus mengapa loading blog menjadi lambat.

Nahh untuk yang belum tau cara untuk cek duduk kasus atau mengetahui kecepatan loading blog kau dapat menggunakan tools online, ibarat GtMetrix atau Google Insight.

Kedua tools online tersebut mempunyai kelebihan serta kekurangannya masing-masing serta dengan perbandingan yang berbeda pula.

Hasil Google Insight


Hasil GTMetrix

dari data diatas saya yakin kau dapat menyimpulkan bahwa loading dari blog mempunyai loading yang baik dengan di tunjukkan dalam persentase warna hijau dari kedua toold online tadi.

Baca juga : Rahasia Cara untuk Sukses Lewat Google Adsense, ada 15 lho!

Kali ini kita akan memperlihatkan cara untuk menciptakan loading blog kau dapat hijau ibarat diatas, alasannya yaitu banyak dari para blogger belum mengetahui cara cepat dan sempurna untuk mempercepat loading blog dapat mencapai angka 90-99/100. Silakan kau ikuti saja tutorial juga pemahaman dari blog ini.

1. Cara Mempercepat Loading Blog dengan Lazy Load
2. Lazyload Image
3. Lazyload Adsense

Cara Mempercepat Loading Blog dengan Lazy Load

Dalam menciptakan loading blog menjadi cepat kau dapat menggunakan 2 metode, metode ini memang sudah usang dibentuk bahkan sudah banyak yang menggunakan tapi biasanya mereka hanya menggunakan salah satu saja sehingga hasil yang diberikan kurang maksimal. Mempercepat blogger kau dapat menggunakan lazyload. Lazyload ada dua yai untuk Image (gambar) dan juga untuk Adsense.

Lazyload Image

Untuk yang pertama kau dapat memasang lazyload untuk Image dahulu alasannya yaitu ini yaitu lazy load untuk mempercepat loading dalam postingan artikel kamu.

1. Buka Blogger > Themes > Edit HTML > Tempel arahan dibawah ini sebelum </body>.

<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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiERlSg-46OSFkl5ZOud7X7OnWDTIzWd52da55suT32g9UgVWklH7bo35BDUFrQHtdbve6c5mlcdnMIwNEVatVVTDUmzJsfkN_ZD9WQVDbX67aKLhdgSbzSRxI-z20I4x2JRNtJT7axasSJ/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})}); //]]> </script>

2. Simpan template dan silakan cek di GTmetrix atau Google Insight

Baca juga : Cara untuk Membuat Iklan Diam/Parallax di Adsense pada Blog

Lazyload Adsense

Kemudian apabila kau sudah mempunyai akun Adsense, maka kau dapat memasang arahan lazyload adsense berikut ini. Agar iklan di jalankan atau loading sedikit agak melambat semoga artikel dahulu yang muncul.

1. Buka Blogger > Themes > Edit HTML > Cari arahan pagead2 atau <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>.
2. Kemudian jikalau ketemu eksklusif hapus semua arahan secara lengkap arahan adsense tersebut, referensi arahan lengkap adsense yang harus dihapus.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Iklan Responsive --> <ins class="adsbygoogle"      style="display:block"      data-ad-client="ca-pub-xxxxxxxxxxxxxx"      data-ad-slot="1234567890"      data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

3. Apabila sudah, Letakkan arahan berikut sebelum </body>

<script> //<![CDATA[ var lazyadsense = false; window.addEventListener("scroll", function(){ if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {  (function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();      lazyadsense = true;   } }, true) //]]> </script>

Bagaimana? Apakah kau masih merasa galau atau kesulitan dalam menggunakan arahan lazyload yang kami berikan. Kami rasa tidak kok, alasannya yaitu kami sudah mengoptimasi artikel semoga gampang untuk kau fahami. Sekarang kau lakukan cek loading, apakah sudah mempunyai persentase dengan indikasi warna hijau.
Sumber http://sidikul.blogspot.com/

Share this post