Dalam episode terbaru podcast Search Off the Record milik Google, Martin Splitt dan John Mueller membahas kapan lazy loading membantu dan kapan dapat memperlambat halaman.
Splitt menggunakan contoh dunia nyata di developers.google.com untuk menggambarkan pola umum: menjadikan setiap gambar malas secara default dapat menunda Largest Contentful Paint (LCP) jika menyertakan visual di atas lipatan.
Splitt mengatakan:
“Sistem manajemen konten yang kami gunakan untuk developers.google.com … secara default memuat semua gambar dengan mode lazy loading, yang mana kurang baik.”
Splitt menggunakan contoh tersebut untuk menjelaskan mengapa pemuatan lambat gambar hero berisiko: Anda memberi tahu browser untuk menunggu elemen yang paling terlihat, yang dapat mendorong kembali LCP dan menyebabkan pergeseran tata letak jika dimensi tidak ditetapkan.
Splitt mengatakan:
“Jika Anda menggunakan lazy loading pada gambar yang langsung terlihat, kemungkinan besar hal itu akan berdampak pada contentful paint terbesar Anda. Hampir pasti.”
Bagaimana Lazy Loading Menunda LCP
LCP mengukur momen saat teks atau gambar terbesar dalam viewport awal dilukis.
Biasanya, pemindai pramuat browser menemukan gambar hero lebih awal dan mengambilnya dengan prioritas tinggi sehingga dapat melukis dengan cepat.
Saat Anda menambahkan loading="lazy"hero yang sama, Anda mengubah penjadwalan browser:
- Gambar diperlakukan sebagai prioritas lebih rendah, jadi sumber daya lain dimulai terlebih dahulu.
- Peramban menunggu hingga tata letak dan pekerjaan lainnya selesai sebelum meminta gambar hero.
- Pahlawan kemudian bersaing untuk mendapatkan bandwidth setelah skrip, gaya, dan aset lainnya sudah masuk antrean.
Penundaan itu menggeser waktu pengecatan elemen terbesar nantinya, yang akan meningkatkan LCP Anda.
Pada jaringan yang lambat atau perangkat dengan CPU terbatas, efeknya lebih terasa. Jika lebar dan tinggi tidak ada, gambar yang terlambat juga dapat memengaruhi tata letak dan terasa “mengganggu”.
Risiko SEO dengan Beberapa Perpustakaan
Peramban kini mendukung atribut bawaan loadinguntuk gambar dan iframe, yang menghilangkan kebutuhan JavaScript yang berat dalam skenario standar. WordPress mengadopsi lazy loading bawaan, yang membantunya menyebar.
Splitt mengatakan:
“Peramban memiliki atribut bawaan untuk gambar dan iframe, yaitu atribut pemuatan … yang membuat peramban menangani pemuatan lambat untuk Anda.”
Pustaka pemuatan lambat yang lama atau kustom dapat menyembunyikan URL gambar dalam atribut nonstandar. Jika URL asli tidak pernah muncul srcatau tidak ada srcsetdalam HTML yang dirender Google, gambar mungkin tidak terdeteksi untuk pengindeksan.
Splitt mengatakan:
“Kami telah melihat banyak pustaka pemuatan lambat … yang menggunakan semacam atribut sumber data, alih-alih atribut sumbernya… Jika tidak ada dalam atribut sumber, kami tidak akan mengambilnya jika ada dalam atribut khusus.”
Cara Memeriksa Halaman Anda
Gunakan Inspeksi URL Search Console untuk meninjau HTML yang ditampilkan dan pastikan gambar di atas lipatan dan modul yang dimuat lambat telah disesuaikan dengan atribut standar. Hindari mengandalkan tangkapan layar.
Splitt menyarankan:
“Jika HTML yang ditampilkan terlihat berisi semua URL gambar dalam atribut sumber dari tag gambar … maka Anda akan baik-baik saja.”
Dampak Peringkat
Splitt membingkai efek pemeringkatan sebagai yang sederhana.Core Web Vitals berkontribusi terhadap pemeringkatan, tetapi ia menyebutnya “faktor yang sangat kecil dalam kebanyakan kasus.”
Apa yang Harus Anda Lakukan Selanjutnya
- Jaga agar gambar utama dan gambar lain yang berada di atas lipatan tampak menarik dengan mengatur lebar dan tinggi.
- Gunakan native
loading="lazy"untuk gambar di bawah lipatan dan iframe. - Jika Anda mengandalkan pustaka untuk pratinjau, video, atau bagian dinamis, pastikan markup akhir memperlihatkan URL asli dalam atribut standar, dan konfirmasikan dalam HTML yang ditampilkan.
Melihat ke Depan
Pemuatan malas bermanfaat jika diterapkan secara selektif. Anggap saja sebagai opsi untuk konten yang tidak penting.
Verifikasi implementasi Anda dengan HTML yang ditampilkan, dan lihat bagaimana tren LCP Anda seiring berjalannya waktu.
