Cara menerapkan Lazy Loading di Blog

Lazy loading adalah teknik yang digunakan dalam pengembangan web untuk mempercepat waktu muat halaman dengan menunda pemuatan elemen yang tidak terlihat oleh pengguna secara langsung. JavaScript adalah salah satu bahasa pemrograman yang sering digunakan untuk mengimplementasikan teknik ini. Dalam artikel ini, kita akan membahas berbagai jenis lazy loading dalam JavaScript dan bagaimana menerapkannya pada proyek web kita.

1. Lazy Loading Gambar

Gambar adalah salah satu aset yang dapat mempengaruhi waktu muat halaman secara signifikan. Dengan menggunakan lazy loading gambar, kita dapat memuat gambar hanya ketika mereka muncul di dalam jendela pandangan pengguna. Ini mengurangi jumlah permintaan HTTP awal dan mengurangi waktu muat halaman secara keseluruhan.

2. Lazy Loading Konten

Selain gambar, kita juga dapat menerapkan lazy loading pada konten lainnya seperti video, iframe, atau elemen HTML lainnya. Misalnya, kita dapat memuat video hanya ketika pengguna menggulir ke area video di halaman. Ini mengurangi beban awal dan mempercepat waktu muat halaman.

3. Lazy Loading Menggunakan Libraries

Selain menerapkan lazy loading secara manual, kita juga dapat menggunakan berbagai pustaka JavaScript yang menyediakan fitur lazy loading yang sudah siap pakai. Beberapa pustaka populer termasuk "lazysizes", "Lozad.js", dan "vanilla-lazyload". Pustaka-pustaka ini menyederhanakan proses implementasi dan memberikan fitur tambahan seperti pengaturan prioritas, callback, dan pengaturan pemuatan sekuensial.

Pada posting ini, kita akan membagi penjelasannya menjadi 4 bagian, yaitu:

1. Kode by AI

2. Kode Native

3. Kode by Developer

4. Kode by Igniel

Khusus Blogspot direkomendasikan untuk memakai kode yang No-3 atau No-4.

Kode Lazy Loading by AI

Contoh implementasi menggunakan JavaScript:

Silakan klik link JS berikut ini untuk menyalin atau melihat kodenya. 

https://cdn.jsdelivr.net/gh/thejaey/files@0d19f4998586f0a6a256ac26e1e9f1d2ccf16c8a/lazy-load-image-by-ai.js

https://cdn.jsdelivr.net/gh/thejaey/files@0d19f4998586f0a6a256ac26e1e9f1d2ccf16c8a/lazy-load-video-by-ai.js

Contoh penggunaan pustaka "lazysizes" pada gambar:

<script src="https://cdn.jsdelivr.net/gh/thejaey/files@0d19f4998586f0a6a256ac26e1e9f1d2ccf16c8a/lazy-load-image-by-ai.js" async=""></script>

<img data-src="image.jpg" class="lazyload" alt="Gambar" />

Contoh penggunaan pustaka "lazysizes" pada video:

<script src="https://cdn.jsdelivr.net/gh/thejaey/files@0d19f4998586f0a6a256ac26e1e9f1d2ccf16c8a/lazy-load-video-by-ai.js" async=""></script>

<iframe data-src="https://youtube.com/blabla" class="lazyload" />

Kode Lazy Loading Native

Native Lazy Load adalah teknik yang dapat digunakan untuk menerapkan lazy load dengan mudah. Teknik ini hanya memerlukan penambahan markup atau kode html biasa, tanpa perlu javascript. Markup yang ditambahkan adalah atribut Loading pada elemen konten yang ingin diload secara lazy.

<img src="image.jpg" loading="lazy" alt="Gambar" />

<iframe src="content.html" loading="lazy"></iframe>

Atribut Loading dapat memiliki tiga nilai berbeda, yaitu:

• lazy: Nilai ini cocok untuk melakukan lazy load, karena browser akan menunda memuat konten sampai dibutuhkan.
• eager: Nilai ini berlawanan dengan lazy, karena browser akan memuat konten secepat mungkin tanpa menunggu.
• auto: Nilai ini memberikan kebebasan kepada browser untuk memilih apakah akan melakukan lazy load atau tidak, tergantung pada kondisi dan preferensi.

Kelebihan dari teknik Native Lazy Load adalah tidak adanya overhead, karena tidak perlu script tambahan. Selain itu, teknik ini juga bersih dan sederhana. Namun, kekurangannya adalah belum semua browser mendukung atribut Loading, sehingga perlu fallback atau solusi alternatif untuk browser lama.

Kode Lazy Loading by Developer

Struktur seharusnya:

<img class='lazy' src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">

Untuk penjelasan lebih detail, misalnya untuk penerapan pada background gambar, silakan baca di situs Developer:

https://web.dev/lazy-loading-images/

Atau khusus Blogger kode gambarnya seperti berikut:

<b:if cond='data:post.featuredImage'>

<img class='lazy' expr:alt='data:post.title' expr:src='data:post.featuredImage' expr:data-src='resizeImage(data:post.featuredImage, 256, &quot;3:2&quot;)' expr:data-srcset='resizeImage(data:post.featuredImage, 256, &quot;3:2&quot;)' expr:title='data:post.title'/>

</b:if>

Keterangan:

data:post.featuredImage adalah ukuran lebar dan tinggi asli gambar sesuai ukuran yang kita atur ketika menguploadnya di postingan.

resizeImage(data:post.featuredImage, 256, &quot;3:2&quot;) adalah ukuran gambar asli yang di-resize menjadi ukuran 256 dan rasio 3:2

Silakan tentukan size dan rasionya sesuai selera.

Untuk JavaScript ini taruh diatas <body> atau bisa juga di paling bawah dalam template alias diatas </body>.

<script src='https://cdn.jsdelivr.net/gh/thejaey/files@0d19f4998586f0a6a256ac26e1e9f1d2ccf16c8a/lazy-load-pict-by-dev.js' async='async'/>

Kode Lazy Loading by Igniel

Igniel adalah teman kita sesama Blogger, beliau seorang cewek dan hobby coding dan juga hobby memanjat tebing, wkwk.

Silakan edit kode gambar pada template menjadi seperti berikut.

<b:if cond='data:post.featuredImage'>

<img class='lazy' expr:alt='data:post.title' expr:src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' expr:data-src='resizeImage(data:post.featuredImage, 256, &quot;3:2&quot;)' expr:title='data:post.title'/>

</b:if>

Untuk JavaScript berikut silakan simpan di paling bawah dalam template alias diatas </body>.

<script src='https://cdn.jsdelivr.net/gh/thejaey/files@0d19f4998586f0a6a256ac26e1e9f1d2ccf16c8a/lazy-load-pict-by-igniel.js' async='async'/>

Atau silakan klik link JS ini https://cdn.jsdelivr.net/gh/thejaey/files@0d19f4998586f0a6a256ac26e1e9f1d2ccf16c8a/lazy-load-pict-by-igniel.js dan salin isinya lalu tempel ke paling bawah dalam template, diatas </body>.

Baca juga: Cara tambahkan CSS dan HTML di Template Blogger

Lazy Loading by Igniel ini akan tambah manis semanis orangnya jika di tambahi kode animasi css, silakan ambil di blog beliau saja di www.igniel.com

Kesimpulan: Lazy loading adalah teknik yang efektif untuk meningkatkan kinerja waktu muat halaman dengan menunda pemuatan elemen yang tidak terlihat alias dibelakang layar. Dengan ini, kita dapat menerapkan lazy loading gambar, konten, dan menggunakan pustaka-pustaka yang ada. Dengan memanfaatkan teknik ini, secara tidak langsung kita telah memperbaiki Cara memperbaiki masalah Blog di PageSpeed Insight dan dapat memberikan pengalaman pengguna yang lebih baik dan meningkatkan performa situs web kita secara keseluruhan.