Lazy Load Gambar Blogger Keren Terbaru

Lazy Load Gambar pada blogger dapat meningkatkan kecepatan blog dengan sangat signifikan, karena load gambar yang berat ditunda.

Load (pemuatan) gambar yang berat tersebut ditunda sampai ada aktifitas scroll halaman blog tersebut dan sementara load gambar yang berat ditunda akan diganti dengan gambar svg yang sangat ringan.

Jadi halaman blog tetap memiliki gambar, setelah discroll halaman blog tersebut maka gambar svg sementara akan berubah menjadi gambar asli pada postingan blog tersebut.

Sebagai contoh blog blogger.panduancode.com dan www.panduancode.com juga menggunakan lazy load gambar yang sama.

Maka dapat kita cek speed atau kecepatan kedua blog tersebut sangat cepat.

Kecepatan web sangat penting untuk bisa mendapatkan ranking pertama google selain dari kontennya.

Bahkan ada pribahasa baru didalam dunia blogging, berikut ini peribahasanya.

Adhy Suryadi - Admin Kompi Ajaib
Content is the king and web speed is queen

Sekarang kita bahas dulu pentingnya kecepatan blog yang dapat memengaruhi posisi serp Google agar kalian semua lebih paham secara detail.

Kecepatan Blog Memengaruhi Posisi Serp Google

Dari penelitian yang saya lakukan untuk mengetahui seberapa penting kecepatan blog terdapat posisi serp Google sekarang, saya menemukan beberapa alasan yang sangat logis.

Alasan Kecepatan Blog Penting

1. Google sendiri menciptakan google page insights tentunya memiliki tujuan yang berkaitan dengan algoritma penentu serp Google.

Coba kita pikirkan secara logis untuk apa Google membuat google page insights jika tidak ada kaitannya dengan algoritma yang menentukan posisi artikel kita digoogle.

2. Google melakukan update pada google search console mengenai kecepatan blog yaitu data web inti, seperti yang sudah kita ketahui google search console sangat penting untuk mengindex artikel dan menentukan posisi serp suatu blog.

Update google search console data web inti

Coba lihat pada gambar diatas, awalnya tidak ada kesalahan atau url buruk sama sekali, namun setelah google update data web inti muncul masalah tersebut.

Dan coba kita pikirkan secara logis kenapa update tentang kecepatan blog diberinama dengan data web inti.

Kita dapat memahami sesuatu yang sedang google coba sekarang pada kecepatan blog, yaitu google sekarang mementingkan kecepatan blog juga selain dari isi kontennya sendiri.

3. Banyak blog amp yang berada diposisi serp page one Google, seperti yang kita tahu amp adalah product Google, jadi tentunya blog amp diutamakan juga oleh Google.

Dan kelebihan blog amp adalah load halamannya yang super cepat, itulah yang membedakan blog amp dan blog non amp, walaupun sekarang amp masih dalam versi beta.

Namun jangan khawatir blog non amp juga dapat dioptimasi page speed-nya sampai secepat amp bahkan bisa lebih cepat.

Nah sekarang kalian sudah mengetahui beberapa alasan logis kenapa kecepatan blog penting untuk saat ini.

Oleh sebab itu mari kita lanjut ke pembahasan utama yaitu cara membuat lazy load gambar Blogger keren terbaru.

Cara Memasang Lazy Load Gambar Blogger

Cara memasang lazy load gambar Blogger sebenarnya sangat mudah untuk dilakukan, namun ada beberapa hal penting yang harus kalian perhatikan dengan baik.

Dan berikut inilah cara memasang lazy load gambar Blogger yang keren karena mempunyai efek loading gambar yang bisa kalian custom sendiri.

1. Buka Edit HTML Template.

2. Copy Javascript lazy load gambar dibawah ini dan paste tepat 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 tersebutlah yang berfungsi untuk menunda load fila gambar pada blog, namun belum selesai sampai disini saja, masih ada tahap selanjutnya.

3. Cari semua kode <img pada template, dan pada template pasti ada beberapa kode img yaitu kode thumnail postingan pada home page, kode img related post dan kode img author.

4. Setelah ketemu kode <img nya kemudian edit seperti dibawah ini.

Tambahkan class dengan value lazy (class='lazy') pada tag img tersebut.
Ganti kode expr:src menjadi expr:data-src.
Tambahkan kode src dan value nya isi dengan kode gambar svg yang sudah diconvert menjadi base64.

Sebagai contoh script img tersebut akan terlihat seperti kode dibawah 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='/>

Jadi intinya kalian cari kode img pada template kalian dan edit seperti diatas, yaitu tambahkan class='lazy', ganti expr:src menjadi expr:data-src, dan tambahkan kode src dengan value (nilai isi) gambar svg yang sudah diconvert menggunakan base64 agar gambar svg tersebut menjadi url.

Dan kode gambar svg diatas akan menampilkan gambar seperti dibawah ini.

Editlah semua script img yang ada pada template kalian agar mendapat hasil yang lebih maksimal, dan kalian juga bisa custom gambar efek loadingnya.

Sampai disini kalian sudah selesai memasang lazy load gambar Blogger keren terbaru dari blogger.panduancode.com.

Cobalah akses blog kalian maka script lazy load gambar akan langsung bekerja, cirinya adalah gambar thumnail postingan kalian yang muncul adalah gambar svg sementara dan ketika blog di scroll maka gambar thumnail asli postingan-nya akan muncul.

Oleh sebab itu silahkan coba cek kecepatan blog kalian di GTmetrix atau di Google Page Speed Insights, pasti ada peningkatan kecepatan blog.

Namun untuk membuat kecepatan blog mendapat score 100 tidak cukup dengan memasang script lazy load gambar saja, ada hal lain yang harus kalian optimalkan kembali yaitu Javascript eksternal, CSS eksternal, defer parsing javascript, dan meningkatkan response server blog kalian.

Nah semua itu akan blogger.panduancode.com bahas pada artikel selanjutnya, jadi jangan sampai ketinggalan ilmunya ya.

Dan jika kalian mempunyai pertanyaan tentang postingan ini jangan ragu untuk menghubungi Admin, agar pertanyaan kalian dapat dijawab langsung.