Lazy loading (dimuat lambat) yang biasanya diterapkan pada image (gambar) dengan tujuan mempercepat loading above-the-fold (ATF), ternyata memiliki efek samping.
Efek samping seperti apa yang dimaksud?
Jawabannya adalah loading elemen Largest Contentful Paint (LCP) yang juga ikut terhambat atau tertunda.
Seperti apa penjabarannya? Yuk, baca terus tulisan ini sampai akhir!
Daftar Isi
Pernyataan Martin Splitt
Dalam episode terbaru podcast Search Off the Record Google, Martin Splitt dan John Mueller membahas mengenai kapan lazy loading dapat memberikan dampak positif dan kapan ia berpotensi menjadi penghambat loading halaman.
Martin Splitt bukan hanya sekedar berteori, tetapi ia juga menggunakan contoh nyata di lapangan.
Ia mencontohkan website developers.google.com untuk mengilustrasikan pola secara umum yang menjadikan setiap lazy loading image secara default dapat menunda Largest Contentful Paint jika memuat visual above-the-fold.
Martin Splitt mengatakan:
Content management system (Sistem manajemen konten) yang kami gunakan untuk developers.google.com … secara default mengatur semua image ke lazy loading, yang mana itu tidak bagus.
Splitt menggunakan contoh tersebut untuk menjelaskan mengapa penerapan lazy loading pada hero image berisiko.
Hal ini seperti Anda memberi tahu browser (peramban) untuk menunggu elemen yang akan terlihat pertama kali oleh user, seperti menahan atau menyuruh LCP untuk mundur dan menyebabkan layout shift (pergeseran tata letak) apabila dimensinya belum atau tidak ditetapkan.
Martin Splitt melanjutkan:
Jika Anda menggunakan lazy loading pada image yang terlihat seketika (saat halaman web dibuka), kemungkinan besar hal itu akan berdampak pada Largest Contentful Paint Anda. Bisa dikatakan hampir pasti (terjadi)
LCP mengukur momen elemen teks atau image terbesar pada saat initial viewport (tampilan awal halaman web) ditampilkan.
Biasanya, browser preload scanner menemukan hero image lebih awal dan mengambilnya dengan skala prioritas tinggi agar dapat menampilkannya dengan cepat.
Ketika teman-teman menambahkan loading=”lazy” ke hero image, itu artinya Anda telah mengubah urutan kerja browser menjadi:
- Image diperlakukan sebagai prioritas yang lebih rendah, sehingga sumber daya lain akan dimulai terlebih dahulu.
- Browser menunggu hingga tata letak dan aktivitas lainnya selesai sebelum me-request hero image.
- Setelah itu hero image akan bersaing untuk mendapatkan bandwidth setelah script (skrip), style (gaya), dan aset lainnya masuk ke antrean.
Penundaan ini dapat menggeser waktu tampilan LCP di urutan selanjutnya, yang artinya dapat meningkatkan waktu LCP website Anda.
Pada kasus jaringan internet yang lambat atau device (perangkat) yang terbatas, efeknya akan semakin terlihat jelas.
Jika atribut width dan height pada image tidak diset, image yang tertunda juga dapat merubah tata letak halaman web, yang tentunya akan membuat user merasakan User Experience (UX) yang tidak bagus.
Kendala SEO dengan Beberapa Library
Browser modern saat ini mendukung atribut loading bawaan untuk tag image dan iframe, yang mana fitur ini meniadakan penggunaan JavaScript dalam jumlah besar pada skenario standar.
WordPress sendiri mengadopsi lazy loading bawaan, yang membuatnya tersebar otomatis ke tag image dan iframe.
Martin Splitt mengatakan:
Browser memiliki atribut bawaan untuk image dan iframe, yaitu loading atribut … yang mana membuat browser menangani lazy loading untuk Anda.
Gunakan Google Search Console (GSC) untuk Mengaudit Halaman
Teman-teman bisa menggunakan fitur URL Inspection di Google Search Console untuk meninjau HTML yang ditampilkan dan memastikan bahwa above-the-fold image dan modul yang di-lazy loading telah disesuaikan dengan atribut standar.
Usahakan juga untuk tidak mengandalkan hasil screenshot (tangkapan layar) saja.
Martin Splitt menyarankan:
Jika HTML yang ditampilkan terlihat berisi semua URL gambar dalam atribut sumber dari tag gambar … maka itu bagus.
Dampak Terhadap Ranking
Martin Splitt menganggap dampak terhadap ranking sebagai hal yang sederhana.
Core Web Vitals memang berkontribusi terhadap ranking website di SERP (Search Engine Results Page), tetapi ia menyebutnya sebagai “faktor yang kecil dalam kebanyakan kasus.”
Perhatikan Hal ini untuk Optimasi Selanjutnya
Lakukanlah hal berikut agar lazy loading image tidak mengganggu performa LCP Anda:
- Pastikan hero image dan above-the-fold image lainnya tetap menarik dengan mengatur width dan height.
- Gunakan loading=”lazy” bawaan untuk image below-the-fold dan iframe.
- Jika Anda menggunakan library tertentu sebagai pratinjau, untuk menampilkan video, atau bagian dinamis lainnya, pastikan final markup-nya menampilkan URL asli dalam atribut standar, dan konfirmasikan dalam HTML yang dirender (Gunakan GSC).
Kesimpulan
Lazy loading dapat berguna jika diterapkan secara selektif. Anggap saja sebagai opsi untuk menunda konten yang tidak terlalu penting.
Verifikasi implementasi Anda dengan HTML yang telah dirender, dan amati tren LCP website teman-teman seiring berjalannya waktu.
Demikianlah tulisan mengenai pernyataan perwakilan Google mengenai lazy loading image yang dapat menghambat Largest Contentful Paint ini, jika teman-teman memiliki pertanyaan silakan tuliskan di kolom komentar di bawah atau bisa gabung ke grup Telegram DailySEO ID di sini.
Teman-teman juga bisa ajukan topik selanjutnya untuk kami bahas! Jika ingin belajar SEO dari ahlinya, yuk belajar di course-nya DailySEO ID!
References:
