Lazy Load Gambar Blogger Tanpa JS

Gambar merupakan media yang penting untuk sebuah konten agar terlihat lebih menarik, selain itu konten dengan gambar juga memiliki performa lebih baik di mesin penelusuran.

Namun, menambahkan terlalu banyak gambar akan meningkatkan ukuran halaman yang mengakibatkan halaman lambat dimuat, hal tersebut malah dapat berdampak buruk pada hasil penelusuran.

Solusi terbaik untuk mengatasi hal tersebut yaitu dengan memanfaatkan Lazy Load untuk menunda gambar di luar layar. Apa itu lazy Load Gambar dan bagaimana cara menerapkannya?

Apa itu Lazy Load Gambar?

Lay Load gambar adalah teknik sederhana untuk menunda pemuatan gambar di luar layar, dengan begitu gambar-gambar yang tidak terletak di layar halaman hanya akan dimuat setelah area pandang gambar terlihat.

Misalnya ketika halaman memiliki 5 gambar, lalu pada saat pertama kali halaman dimuat bagian konten atas hanya menampilkan 1 gambar maka gambar yang akan dimuat terlebih dahulu hanya 1 itu saja. Sisanya akan dimuat setelah penggunakan melakukan scroll sepenuhnya.

Jadi browser tidak akan pernah memuat gambar di luar layar jika pengguna tidak menggulir halaman sampai ke lokasi dimana area gambar terlihat.

Dengan menerepkan teknik Lazy Load Gambar website mendapatkan performa yang lebih baik untuk meningkatkan kecepatan halaman dan menghemat bandwidth.

Cara Menerapkan Lazy Load Gambar

Pada artikel kali ini, saya akan membagikan 2 cara menerapkan Lazy Load Gambar di blogger. Satu tanpa skrip dan lainnya dengan skrip. Nah berikut ini caranya.

Menerapkan Lazy Load Gambar di Blogger - Tanpa JS

Saat ini blogger sudah menyediakan fitur untuk memuat gambar secara otomatis tanpa javascript apa pun. Untuk mengaktifkan fitur Lazy Load Blogger ini berikut langkahnya:

• Buka Dasboard Akun Blogger kalian
• Buka menu Setelan
• Cari tab menu Postingan dan aktifkan Gambar pemuatan lambat
• Selesai

Blogger akan menambahkan atribut loading='lazy' ke semua tag <img> secara otomatis di dalam postingan/halaman. Berikut tampilannya:

<img src='image.png' loading='lazy' alt='…' width='200' height='200'>

Untuk gambar lainnya diluar postingan/halaman, kalian perlu menambahkan atribut loading='lazy' secara manual atau menggunakan beberapa script pihak ketiga.

Cara Pasang Lazy Load Google Analytics di Blog - InpuTekno

Cara Memasang Lazy Load Google Analytics Untuk Mempercepat Loading Blog atau Website.

www.inputekno.com

Menerapkan Lazy Load Gambar di Blogger Dengan JS

Menggunakan Lazy Load Gambar dengan script memungkinkan untuk semua gambar pada situs tidak terbatas pada halaman tertentu, dengan begitu penerapkan Lazy Load akan lebih optimal.

Berikut langkahnya: Masuk ke menu Tema > Edit HTML

Salin dan Tempatkan javascript ini sebelum tag penutup head </head>.

<script type="text/javascript">/*<![CDATA[*/ /*@shinsenter/defer.js*/ !function(c,i,t){var f,o=/^data-(.+)/,u='IntersectionObserver',r=/p/.test(i.readyState),s=[],a=s.slice,d='lazied',n='load',e='pageshow',l='forEach',m='hasAttribute',h='shift';function p(e){i.head.appendChild(e)}function v(e,n){a.call(e.attributes)[l](n)}function y(e,n,t,o){return o=(o=n?i.getElementById(n):o)||i.createElement(e),n&&(o.id=n),t&&(o.onload=t),o}function b(e,n){return a.call((n||i).querySelectorAll(e))}function g(t,e){b('source',t)[l](g),v(t,function(e,n){(n=o.exec(e.name))&&(t[n[1]]=e.value)}),e&&(t.className+=' '+e),n in t&&t[n]()}function I(e){f(function(o){o=b(e||'[type=deferjs]'),function e(n,t){(n=o[h]())&&(n.parentNode.removeChild(n),(t=y(n.nodeName)).text=n.text,v(n,function(e){'type'!=e.name&&(t[e.name]=e.value)}),t.src&&!t[m]('async')?(t.onload=t.onerror=e,p(t)):(p(t),e()))}()})}(f=function(e,n){r?t(e,n):s.push(e,n)}).all=I,f.js=function(n,t,e,o){f(function(e){(e=y('SCRIPT',t,o)).src=n,p(e)},e)},f.css=function(n,t,e,o){f(function(e){(e=y('LINK',t,o)).rel='stylesheet',e.href=n,p(e)},e)},f.dom=function(e,n,t,o,i){function r(e){o&&!1===o(e)||g(e,t)}f(function(t){t=u in c&&new c[u](function(e){e[l](function(e,n){e.isIntersecting&&(n=e.target)&&(t.unobserve(n),r(n))})},i),b(e||'[data-src]')[l](function(e){e[m](d)||(e.setAttribute(d,''),t?t.observe(e):r(e))})},n)},f.reveal=g,c.Defer=f,c.addEventListener('on'+e in c?e:n,function(){for(I();s[0];t(s[h](),s[h]()))r=1})}(this,document,setTimeout),function(e,n){e.defer=n=e.Defer,e.deferscript=n.js,e.deferstyle=n.css,e.deferimg=e.deferiframe=n.dom}(this); /*]]>*/</script>
<!-- Add the Intersection Observer Polyfill for legacy browsers -->
    <script id='polyfill-js'>&#39;IntersectionObserver&#39;in window||document.write(&#39;&lt;script src=&quot;https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver&quot;&gt;&lt;\/script&gt;&#39;);</script>

Lalu Tempatkan javascript ini sebelum tag penutup body </body>.

<script>Defer.dom('.lazy', 100, 'loaded', null, {rootMargin:'1px'})</script>

Sekarang, untuk menggunakannya, ubah kode gambar thumbnail blog kalian. Contoh kode thumbnail mirip-mirip berikut, tergantung template yang digunakan.

<img class='imageClass' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:src='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 600, &quot;18:9&quot;) : data:post.featuredImage'/>

Lalu ubah menjadi seperti ini:

• Tambahkan class='lazy' pada tag image-nya
• Ubah expr:src jadi expr:data-src
• Tambahkan src dan value-nya diisi dengan:

  data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

• Hasilnya seperti ini:

<img class='imageClass lazy' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:data-src='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 600, &quot;18:9&quot;) : data:post.featuredImage' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>;

Lalu untuk gambar postingan/halaman kalian bisa menambahkan class='lazy' kedalam tag img, data-scr untuk tautan gambar seperti berikut:

<img class='lazy' alt='Lazy Load Blogger' data-src='https://blogger.googleusercontent.com/img/.../lazy.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' type='image/webp'/>

Dengan script ini kalian bisa menerapkan lazy load apapun seperti video, iframe dan sebagainya. Silakan lihat halaman github ini untuk panduan lebih lanjut untuk dipelajari.

Penutup

Nah itu tadi artikel tentang Lazy Load Gambar di Blogger. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan.