Blog

Cara memasang lazyload gambar, iklan diblogger terbaru

by

helmy

Cara memasang lazyload gambar diblogger

Memasang script lazyload gambar di blogger dapat meningkatkan skor kecepatan blog di layanan uji GTMetrik dan GooglePageSpeed Insight secara signifikan.
Cara memasang lazyload gambar
Jadi, ketika blog pertamakali dibuka maka pemuatan gambar-gambar berat akan di tunda sementara sampai mendapatkan aksi scroll. Anda bisa menggunakan format gambar yang ringan seperti svg atau webp sebagai format gambar yang direkomendasikan oleh google
Kecepatan blog merupakan salah satu faktor penentu keberhasilan SEO. Google meluncurkan sebuah layanan bernama PageSpeed Insight yang bertujuan untuk memberi tau skor kecepatan blog saat dimuat pada versi dekstop dan seluler
Selain itu, layanan pagespeed insight juga menunjukkan error dan saran untuk mengoptimalkan kecepatan blog salah satunya dengan memasang script lazyload.. yaa google sendiri yang menyarankan untuk memasang script ini
Sekitar satu tahun lalu google juga sempat mengumumkan MobilePageFirstSpeed yang artinya google memberi dorongan peringkat pada halaman-halaman yang dapat dimuat dengan cepat meskipun kita tau beberapa web media besar seperti tribun, detik, liputan6 memiliki skor kecepatan yang rendah tetapi kita tidak boleh membandingkan blog kita dengan situs mereka
Mereka membayar untuk mendapatkan lalu lintas dan bekerja sebagai sebuah tim yang profesional sementara blog anda dikelola secara pribadi, maka tidak ada salahnya memiliki sedikit nilai tambah dari sisi kecepatan blog

Ada pula trend AMP (Accelerate Mobile Pages) yang dulu dianggap sebagai opsional sekarang hampir di adopsi oleh sebagian besar website di internet. Intinya web AMP mengandalkan kecepatan dan laman sederhana di versi mobile. Bisa anda bayangkan mana yang lebih cepat antara mengambil data dari server pusat atau google cached? sudah pasti google cached kan..
Sayangnya, menerapkan AMP ke blogger lebih susah ketimbang menerapkan AMP ke wordpress yang tinggal set up doang, tetapi anda tidak perlu khawatir karena AMP hanyalah 1 dari ratusan faktor SEO yang mempengaruhi peringkat halaman di Serp
Jika blog anda sudah menerbitkan 1000-2000 artikel pasti capek dong kalau harus menyesuaikan format postingan seperti standard AMP, sebagai gantinya anda bisa mengoptimalkan kecepatan blog dengan memasang script lazyload

Tutorial memasang script lazyload gambar diblogspot

Memasang lazyload gambar diblogger sebenarnya mudah, tinggal ikuti saja panduan yang saya berikan :
1. Buka halaman dashboard blogger > tema > edit HTML
2. Silahkan copy-paste script lazyload dibawah ini dan tempatkan diatas kode </body>
<script>//<![CDATA[
let lazyImages = [].slice.call(document.querySelectorAll(‘img.lazy’)); let active = false; const lazyLoad = function() {if (active === false) {active = true; setTimeout(function() {lazyImages.forEach(function(lazyImage) {if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== ‘none’) {lazyImage.src = lazyImage.dataset.src; lazyImage.classList.remove(‘lazy’); lazyImages = lazyImages.filter(function(image) {return image !== lazyImage; }); if (lazyImages.length === 0) {document.removeEventListener(‘scroll’, lazyLoad); window.removeEventListener(‘resize’, lazyLoad); window.removeEventListener(‘orientationchange’, lazyLoad); } } }); active = false; }, 200); } }; document.addEventListener(‘DOMContentLoaded’, function() {document.addEventListener(‘scroll’, lazyLoad); window.addEventListener(‘resize’, lazyLoad); window.addEventListener(‘orientationchange’, lazyLoad); }); let lazyBGImages = [].slice.call(document.querySelectorAll(‘div.lazy’)); let BGactive = false; const lazyLoadBG = function() {if (BGactive === false) {BGactive = true; setTimeout(function() {lazyBGImages.forEach(function(lazyImage) {if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== ‘none’) {lazyImage.style = lazyImage.dataset.style; lazyImage.classList.remove(‘lazy’); lazyBGImages = lazyBGImages.filter(function(BGimage) {return BGimage !== lazyImage; }); if (lazyBGImages.length === 0) {document.removeEventListener(‘scroll’, lazyLoadBG); window.removeEventListener(‘resize’, lazyLoadBG); window.removeEventListener(‘orientationchange’, lazyLoadBG); } } }); BGactive = false; }, 200); } }; document.addEventListener(‘DOMContentLoaded’, function() {document.addEventListener(‘scroll’, lazyLoadBG); window.addEventListener(‘resize’, lazyLoadBG); window.addEventListener(‘orientationchange’, lazyLoadBG); }); let lazyBGImagesTagA = [].slice.call(document.querySelectorAll(‘a.lazy’)); let BGactiveTagA = false; const lazyLoadBGTagA = function() {if (BGactiveTagA === false) {BGactiveTagA = true; setTimeout(function() {lazyBGImagesTagA.forEach(function(lazyImageTagA) {if ((lazyImageTagA.getBoundingClientRect().top <= window.innerHeight && lazyImageTagA.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImageTagA).display !== ‘none’) {lazyImageTagA.style = lazyImageTagA.dataset.style; lazyImageTagA.classList.remove(‘lazy’); lazyBGImagesTagA = lazyBGImagesTagA.filter(function(BGimage) {return BGimage !== lazyImageTagA; }); if (lazyBGImagesTagA.length === 0) {document.removeEventListener(‘scroll’, lazyLoadBGTagA); window.removeEventListener(‘resize’, lazyLoadBGTagA); window.removeEventListener(‘orientationchange’, lazyLoadBGTagA); } } }); BGactiveTagA = false; }, 200); } }; document.addEventListener(‘DOMContentLoaded’, function() {document.addEventListener(‘scroll’, lazyLoadBGTagA); window.addEventListener(‘resize’, lazyLoadBGTagA); window.addEventListener(‘orientationchange’, lazyLoadBGTagA); /* window.onload = function(){setTimeout(lazyLoadBGTagA, 1000); setTimeout(lazyLoad, 1000); setTimeout(lazyLoadBG, 1000); }; */ });
//]]></script>
Javascript diatas memiliki fungsi untuk menunda pemuatan gambar di blog, tetapi hal itu masih belum selesai
3. Cari semua kode dengan awalan <img di template blog (gunakan kombinasi ctrl+F) , dan jumlahnya cukup banyak, terdiri dari kode tumbnail postingan , img related post , img author dan sebagainya
4. Setiap kali ketemu kode <img silahkan edit menjadi seperti ini
– Tambahkan class dengan isi value lazy misal class=’lazy’ setelah itu ganti kode expr:src dengan expr:data-src
– Tambahkan kode src dan value nya isi dengan kode gambar svg yang sudah diconvert menjadi base64 supaya gambar tersebut menjadi url (gambar svg bisa berupa loading atau yang lain)
Contohnya seperti ini:

<img alt=’data:post.title’ class=’lazy’ expr:data-src=’data:postFirstImage’ src=’data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOmF1dG87YmFja2dyb3VuZDojZmZmO2Rpc3BsYXk6YmxvY2s7IiB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+DQo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MCw1MCkiPg0KPGcgdHJhbnNmb3JtPSJyb3RhdGUoMCkiPg0KPGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjYiIGZpbGw9IiMyMDU4ZjgiIGZpbGwtb3BhY2l0eT0iMSIgdHJhbnNmb3JtPSJzY2FsZSgxLjA4MDAzIDEuMDgwMDMpIj4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgYmVnaW49Ii0wLjg3NXMiIHZhbHVlcz0iMS41IDEuNTsxIDEiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMTswIiBiZWdpbj0iLTAuODc1cyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+DQo8L2c+DQo8L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzEuMjEzMjAzNDM1NTk2NDMsNzEuMjEzMjAzNDM1NTk2NDMpIj4NCjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+DQo8Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iNiIgZmlsbD0iIzIwNThmOCIgZmlsbC1vcGFjaXR5PSIwLjg3NSIgdHJhbnNmb3JtPSJzY2FsZSgxLjE0MjUzIDEuMTQyNTMpIj4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgYmVnaW49Ii0wLjc1cyIgdmFsdWVzPSIxLjUgMS41OzEgMSIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iZmlsbC1vcGFjaXR5IiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIxOzAiIGJlZ2luPSItMC43NXMiPjwvYW5pbWF0ZT4NCjwvY2lyY2xlPg0KPC9nPg0KPC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwLDgwKSI+DQo8ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCkiPg0KPGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjYiIGZpbGw9IiMyMDU4ZjgiIGZpbGwtb3BhY2l0eT0iMC43NSIgdHJhbnNmb3JtPSJzY2FsZSgxLjIwNTAzIDEuMjA1MDMpIj4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgYmVnaW49Ii0wLjYyNXMiIHZhbHVlcz0iMS41IDEuNTsxIDEiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMTswIiBiZWdpbj0iLTAuNjI1cyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+DQo8L2c+DQo8L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjguNzg2Nzk2NTY0NDAzNTc3LDcxLjIxMzIwMzQzNTU5NjQzKSI+DQo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMzUpIj4NCjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI2IiBmaWxsPSIjMjA1OGY4IiBmaWxsLW9wYWNpdHk9IjAuNjI1IiB0cmFuc2Zvcm09InNjYWxlKDEuMjY3NTMgMS4yNjc1MykiPg0KICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBiZWdpbj0iLTAuNXMiIHZhbHVlcz0iMS41IDEuNTsxIDEiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMTswIiBiZWdpbj0iLTAuNXMiPjwvYW5pbWF0ZT4NCjwvY2lyY2xlPg0KPC9nPg0KPC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwLDUwLjAwMDAwMDAwMDAwMDAxKSI+DQo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODApIj4NCjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI2IiBmaWxsPSIjMjA1OGY4IiBmaWxsLW9wYWNpdHk9IjAuNSIgdHJhbnNmb3JtPSJzY2FsZSgxLjMzMDAzIDEuMzMwMDMpIj4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgYmVnaW49Ii0wLjM3NXMiIHZhbHVlcz0iMS41IDEuNTsxIDEiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMTswIiBiZWdpbj0iLTAuMzc1cyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+DQo8L2c+DQo8L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjguNzg2Nzk2NTY0NDAzNTcsMjguNzg2Nzk2NTY0NDAzNTc3KSI+DQo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMjUpIj4NCjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI2IiBmaWxsPSIjMjA1OGY4IiBmaWxsLW9wYWNpdHk9IjAuMzc1IiB0cmFuc2Zvcm09InNjYWxlKDEuMzkyNTMgMS4zOTI1MykiPg0KICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBiZWdpbj0iLTAuMjVzIiB2YWx1ZXM9IjEuNSAxLjU7MSAxIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPg0KICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjE7MCIgYmVnaW49Ii0wLjI1cyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+DQo8L2c+DQo8L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDkuOTk5OTk5OTk5OTk5OTksMjApIj4NCjxnIHRyYW5zZm9ybT0icm90YXRlKDI3MCkiPg0KPGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjYiIGZpbGw9IiMyMDU4ZjgiIGZpbGwtb3BhY2l0eT0iMC4yNSIgdHJhbnNmb3JtPSJzY2FsZSgxLjQ1NTAzIDEuNDU1MDMpIj4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgYmVnaW49Ii0wLjEyNXMiIHZhbHVlcz0iMS41IDEuNTsxIDEiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMTswIiBiZWdpbj0iLTAuMTI1cyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+DQo8L2c+DQo8L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzEuMjEzMjAzNDM1NTk2NDMsMjguNzg2Nzk2NTY0NDAzNTcpIj4NCjxnIHRyYW5zZm9ybT0icm90YXRlKDMxNSkiPg0KPGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjYiIGZpbGw9IiMyMDU4ZjgiIGZpbGwtb3BhY2l0eT0iMC4xMjUiIHRyYW5zZm9ybT0ic2NhbGUoMS4wMTc1MyAxLjAxNzUzKSI+DQogIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGJlZ2luPSIwcyIgdmFsdWVzPSIxLjUgMS41OzEgMSIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iZmlsbC1vcGFjaXR5IiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIxOzAiIGJlZ2luPSIwcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+DQo8L2c+DQo8L2c+DQo8L3N2Zz4=’/>

Edit semua script <img yang anda temukan didalam template secara manual agar lebih maksimal dan silahkan custom icon loading gambar sesuka hati anda
Sekarang waktunya pengecekan, buka blog dan jangan discroll.. anda akan melihat script lazyload bekerja.. cirinya konten gambar awalnya berupa image svg loading dan ketika halaman blog discroll maka konten gambar baru akan dimuat
Cek skor kecepatan blog anda di googlepagespeed insight , GTmetrix atau googlethink kemudian amati peningkatan skor kecepatan yang anda dapatkan
Tetapi jangan berharap terlalu tinggi untuk mendapatkan skor 100 karena untuk mendapatkan skor sempurna, ada banyak hal yang harus anda optimalkan seperti penggunaan javascript, CSS , defer parsing , cache , meningkatkan server dan sebagainya

Lazyload untuk meringankan kode google analytic

Google analytic adalah layanan untuk mentracking data visitor blog kita termasuk sumber trafik, lamanya visitor membuka halaman, jumlah visitor online dan sebagainya. Memasang lazyload untuk mengoptimalkan kode Javascript Google Analytic membuat script ini dijalankan setelah mendapat aktivitas scroll halaman
Menambahkan kode tracking google analytic kedalam template blog dapat mempengaruhi kecepatan halaman dan juga menurunkan skornya di layanan uji kecepatan. Oleh sebab itu, tak jarang para blogger memasang script lazyload untuk menunda perayapan analytic dan mempertahankan skor sempurna di layanan uji kecepatan

Tutorial memasang script lazyload untuk meringankan kode GoogleAnalytic

1. Pastikan anda sudah mendaftar di google analytic dan mendapatkan kode trackingnya
2. Buka dashboard blogger > navigasi ke menu tema > edit HTML
3. Letakkan kode dibawah ini tepat sebelum </body>
<script type=’text/javascript’>
//<![CDATA[
var lazyanalisis=!1;window.addEventListener(“scroll”,function(){(0!=document.documentElement.scrollTop&&!1===lazyanalisis||0!=document.body.scrollTop&&!1===lazyanalisis)&&(!function(){var e=document.createElement(“script”);e.type=”text/javascript”,e.async=!0,e.src=”//www.googletagmanager.com/gtag/js?id=id pelacakan analysis anda“;var a=document.getElementsByTagName(“script”)[0];a.parentNode.insertBefore(e,a)}(),lazyanalisis=!0)},!0);
//]]>
</script>
Silahkan ganti “id=id pelacakan analysis anda” dengan id anda masing-masing
Selanjutnya cari kode Google Analytic yang biasanya sudah dibuat oleh creator template dibagian header atau sudah anda pasang sebelumnya, kurang lebih kodenya terlihat seperti ini
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag(&#39;js&#39;, new Date());
  gtag(&#39;config&#39;, &#39;id pelacakan analysis Anda&#39;);
</script>
Seperti biasa kode id pelacakan analysis Anda disesuaikan saja, terakhir simpan template dan cek apakah script ini bekerja atau tidak
Caranya dengan membuka dashboard analytic pada tab baru amati berapa jumlah visitor online > kemudian buka tab baru dan kunjungi blog anda > lihat lagi berapa jumlah visitor online > pada halaman blog scroll kebawah > cek lagi lagi apakah visitor online bertambah 1? jika iya berarti script lazyload google analytic sudah berhasil diterapkan

Cara memasang lazyload iklan mgid diblog

Mgid adalah jaringan periklanan yang populer dikalangan blogger indonesia setelah adsense, tak heran kalau di forum-forum terdapat jasa approve iklan mgid
Memasang iklan mgid ke blog dapat menurunkan skor kecepatan karena ketika halaman dimuat maka web browser harus menunggu respon javascript eksternal dari server mgid
Ketika berbicara mengenai lazyload pasti anda sudah paham bahwa javascript mgid akan dimuat setelah halaman discroll jadi ketika dicek di layanan uji kecepatan, skor blog anda tidak berpengaruh karena layanan itu hanya menguji dengan membuka blog anda saja dan tidak melakukan scroll sehingga script lazyload tidak aktif
Secara logis, menunda pemuatan iklan mgid pada blog dengan lazyload akan mempengaruhi kecepatan blog oleh sebab itu tidak ada salahnya menerapkan lazyload pada iklan mgid agar performa blog anda tetap baik
Intinya ketika membuka blog iklan mgid tidak muncul, tetapi setelah melakukan aksi scroll maka iklan mgid baru akan dimuat oleh browser

Tutorial memasang lazyload untuk iklan mgid

1. Kode iklan mgid bisa anda pasang melalui menu tataletak, sementara kode lazyload seperti biasa kita pasang di menu tema > edit HTML
2. Ini adalah contoh kode iklan mgid
<!– Composite Start –>
<div id=”M593547ScriptRootCxxxxxx”>
</div>
<script src=”https://jsc.mgid.com/d/r/domainanda.com.xxxxxx.js” async></script>
<!– Composite End –>
Dan ini adalah contoh kode adstxt mgid
mgid.com, 524xxx, DIRECT, d4c29acad76ce94f
Fungsi adstxt mgid sama dengan adstxt adsense, intinya memverifikasi domain untuk permintaan iklan gitu doang..
3. Selanjutnya kita pasang script lazyload mgid di mode HTML template blog, letakkan tepat diatas kode
</body> atau kode yang sudah diparse seperti ini &lt;/body&gt; ataupun kode yang seperti ini &lt;!–</body>–&gt;&lt;/body&gt;
Cari saja salah satunya, kalau sudah ketemu langsung paste kode lazyload mgid berikut diatasnya
<script type=’text/javascript’>
//<![CDATA[
var lazymgid=!1;window.addEventListener(‘scroll’,function(){(0!=document.documentElement.scrollTop&&!1===lazymgid||0!=document.body.scrollTop&&!1===lazymgid)&&(!function(){var e=document.createElement(‘script’);e.type=’text/javascript’,e.async=!0,e.src=’https://jsc.mgid.com/d/r/droidide.com.xxxxxx.js‘;var a=document.getElementsByTagName(‘script’)[0];a.parentNode.insertBefore(e,a)}(),lazymgid=!0)},!0);
//]]>
</script>
Ganti kode https://jsc.mgid.com/d/r/droidide.com.xxxxxx.js dengan kode iklan anda sendiri karena setiap penayang pasti kodenya berbeda
4. Setelah itu kode iklan mgid yang anda dapatkan di situs mgid tinggal dipasang ke blog melalui menu tataletak > add gadget > HTML & javascript > paste kode iklan, terserah ingin memunculkan iklan di bagian mana
Itu untuk 1 iklan mgid, dimana ada 1 kode lazyload dan 1 kode iklan mgid, lalu bagaimana jika anda ingin memasang 2-3 iklan mgid yang masing-masing menerapkan lazyload?
Tinggal ditambahkan variabel angka dan mengganti link javascriptnya saja
Misal var lazymgid1, var lazymgid2 , var lazymgid3 , varlazymgid4 lalu pada setiap variable anda bedakan link eksternal javascript iklan mgidnya

Lazyload untuk 1 iklan mgid

<script type=’text/javascript’>
//<![CDATA[
var lazymgid1=!1;window.addEventListener(‘scroll’,function(){(0!=document.documentElement.scrollTop&&!1===lazymgid||0!=document.body.scrollTop&&!1===lazymgid)&&(!function(){var e=document.createElement(‘script’);e.type=’text/javascript’,e.async=!0,e.src=’https://jsc.mgid.com/d/r/domainanda.com.xxxxxx.js‘;var a=document.getElementsByTagName(‘script’)[0];a.parentNode.insertBefore(e,a)}(),lazymgid=!0)},!0);
//]]>
</script>

Lazyload untuk 2 iklan mgid

<script type=’text/javascript’>
//<![CDATA[
var lazymgid2=!1;window.addEventListener(‘scroll’,function(){(0!=document.documentElement.scrollTop&&!1===lazymgid2||0!=document.body.scrollTop&&!1===lazymgid2)&&(!function(){var e=document.createElement(‘script’);e.type=’text/javascript’,e.async=!0,e.src=’https://jsc.mgid.com/d/r/domainanda.com.xxxxxx.js‘;var a=document.getElementsByTagName(‘script’)[0];a.parentNode.insertBefore(e,a)}(),lazymgid2=!0)},!0);
//]]>
</script>
Cuma mengganti nama variable dan link javascriptnya sesuai slot iklan yang ingin ditampilkan. Cukup mudahkan?

Cara memasang lazyload iklan google adsense

Memasang iklan adsense kedalam blog pasti menurunkan skor kecepatan karena respons server yang mungkin lama, meskipun punya google tetap saja ada jeda untuk memenuhi permintaan saluran iklan yang relevan
Apakah memasang script lazyload pada iklan adsense aman? saya pastikan 100% aman karena blog www.helmykediri.com dan jutaan penghamba adsense diluar sana juga menggunakannya
Script lazyload hanya menunda permintaan iklan sampai ada aktifitas scroll halaman, bukan script yang memodifikasi tampilan iklan atau bertujuan meningkatkan jumlah tayangan maupun klik iklan
Selain bisa meringankan loading halaman blog, memasang lazyload juga bisa mengamankan iklan adsense dari trafik tidak valid, mengapa demikian? 
Anggap saja ada pihak usil yang membanjiri blog anda dengan visitor robot atau trafik exchange seperti hitleap, trafik spirit , diablo trafik , 10khits dan sebagainya
Karena layanan tersebut dilengkapi virtual web maka jika anda tidak memasang kode lazyload bisa dipastikan penayangan iklan adsense naik tajam dan berpotensi diblacklist oleh adsense dengan alasan trafik tidak valid, sementara jika anda memasang lazyload maka iklan tidak akan tampil karena biasanya orang menjalankan software bot visitor melalui komputer server jadi aktivitas yang dilakukan cuma membuka halaman tanpa melalui langkah scrolling

Tutorial memasang kode lazyload untuk iklan adsense

1. Seperti biasa kode lazyload kita tempatkan pada editor html template, buka menu template > edit html > cari kode </body> paste script berikut tepat diatasnya
<script type=’text/javascript’>
//<![CDATA[
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=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”;var a=document.getElementsByTagName(“script”)[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script>
Fungsi script diatas adalah menunda permintaan ke server sebelum mendapatkan aksi scroll, enaknya kalau kode adsense tidak perlu ditulis secara berulang seperti lazyload mgid karena setiap iklan menggunakan link javascript yang sama pagead2.googlesyndication.com/pagead/js/adsbygoogle.js jadi cukup dipasang 1x saja
Setelah itu pasang kode iklan adsense dimana saja mau di tataletak atau melalui halaman editor html (terserah)

Mengoptimalkan javascript pada iklan adsense (opsional 1)

Setiap membuat unit iklan baru di adsense kita pasti mendapat kode iklan yang lengkap dan menurut saya itu kurang efektive
Contoh kode iklan adsense lengkap :
<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– sidebar –>
<ins class=”adsbygoogle”
     style=”display:block”
     data-ad-client=”ca-pub-xxxxxxxxxxxxxxxx”
     data-ad-slot=”xxxxxxxxx”
     data-ad-format=”auto”
     data-full-width-responsive=”true”></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
Kode akses ke server javacript selalu ditulis secara berulang oleh sebab itu cukup kita minimalisir dengan cara membuat kode perulangan. Silahkan copy-paste kode dibawah ini letakkan diatas </body>
<script> //<![CDATA[
  for (var ads = document.querySelectorAll(‘ins.adsbygoogle’), i=0; i<ads.length; i++){
    if (ads[i]) {
      (adsbygoogle = window.adsbygoogle || []).push({});
    }
  }
//]]> </script>
Script diatas akan mengefektivekan penulisan javascript secara berulang jadi ketika menyematkan iklan anda bisa menghapus baris 
<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
dan
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Kode javascript nantinya akan di ambil dari penyimpanan kode lazyload yang sudah kita buat diatas
Jadi kalau anda memasang iklan adsense yang perlu dipaste hanyalah bagian <ins …</ins
<ins class=”adsbygoogle”
     style=”display:block”
     data-ad-client=”ca-pub-xxxxxxxxxxxxxxx”
     data-ad-slot=”xxxxxxxxxx”
     data-ad-format=”auto”
     data-full-width-responsive=”true”></ins>
Terserah mau diletakkan dimana kode iklan adsense apakah dihalaman tataletak > add widget > html atau melalui menu editor template > edit html

Memasang lazyload untuk iklan otomatis/autoads (opsional 2)

Anda memasang iklan autoads dan membiarkan adsense memunculkan iklan disembarang tempat? 
Enaknya menggunakan format iklan autoads adalah kita cuma perlu menyisipkan sepotong kode dan beberapa iklan otomatis muncul diberbagai tempat (posisi iklan dan jumlah iklan random)
Biasanya kode iklan autoads diletakkan pada header atau dibawah kode <head> atau terserah mau diletakkan di tataletak juga bisa
Ini adalah kode iklan untuk autoads adsense versi lazyload
<script data-ad-client=’ca-pub-xxxxxxxxxxxxxxxxxx’/>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: &quot;ca-pub-xxxxxxxxxxxxxxx&quot;,
    enable_page_level_ads: true
  });
</script>
Jangan lupa, pasang kode lazyload adsense dulu baru meletakkan kode iklan autoads
Cukup mudahkan?
Demikian artikel mengenai cara memasang script lazyload untuk iklan dan gambar diblogger dengan mudah dan cepat. Artikel ini sebenarnya untuk backup pribadi namun tidak ada salahnya diposting agar memudahkan saya mengatur blog-blog yang lain
….helmykediricom

Related Post

Cara agar artikel blog muncul di google news discover

Membuat artikel otomatis dengan Browser Microsoft Edge + Bing AI

Maksud membuat duplikat postingan untuk konten blog

Cara download data blog diblogger yang dihapus dengan mudah

Cara mencairkan saldo adsterra ke paypal

Cara Mendapatkan Ribuan Visitor Website Setiap Bulan

2024 helmykediri.com