Tentukan apa yang dibutuhkan sekarang, bukan apa yang muncul awal di markup
Lazy loading menandai sumber daya sebagai non-kritis sampai diperlukan. Klasifikasikan menurut perjalanan aktual: kebutuhan tampilan pertama, media di bawah lipatan, embed opsional, dan kode untuk rute atau panel nanti. Posisi di CMS tidak cukup sebagai bukti; sebuah gambar bisa berada di luar layar di satu template dan menjadi pusat di template lain.
Tinjau cold load di ponsel kecil dan desktop tipikal. Juga uji tautan kampanye dan anchor di dalam halaman, yang dapat membawa pengunjung lebih jauh ke bawah halaman. Tinjauan itu memberi tahu apa yang harus siap tanpa permintaan yang dipicu gulir.
Tugas awal, navigasi yang terlihat, salinan kunci, dan visual bermakna pertama harus tersedia segera.
Galeri bawah-halaman, peta, embed sosial, pemutar di luar layar, dan kode untuk fitur yang tidak dipilih adalah kandidat umum.
Lindungi hero dan viewport awal
Jangan lazy-load konten yang kemungkinan terlihat saat halaman dibuka. Google memperingatkan hal ini, dan analisis terfokus web.dev menunjukkan bahwa lazy-loading gambar di viewport awal dapat menunda LCP. Elemen LCP bisa berupa hero, gambar produk, poster, atau teks; verifikasi pada setiap template penting alih-alih menebak.
Muat gambar LCP yang sudah dikonfirmasi secara eager. Jika pengujian menunjukkan gambar kritis yang dapat ditemukan kehilangan perhatian jaringan, uji hint fetch-priority yang tinggi untuknya. Itu hanya petunjuk, bukan perintah. Gambar latar CSS kritis mungkin perlu preload dini karena parser tidak dapat menemukannya secara langsung; ukur kasus itu.
Periksa default CMS dan plugin untuk featured image yang keliru ditandai lazy pada halaman listing.
Gunakan cold load mobile dan desktop, bukan hanya pratinjau desain di desktop.
Cadangkan ruang sebelum media tiba
Cumulative Layout Shift (CLS) adalah pergerakan tak terduga dari konten yang terlihat. Gambar yang ditunda tanpa tinggi yang diketahui dapat mendorong teks dan kontrol setelah pembaca mulai memindai atau menjangkau tombol. Itu adalah risiko interaksi, bukan sekadar masalah metrik.
Berikan atribut width dan height yang akurat untuk gambar dan video, atau cadangkan bentuknya dengan CSS aspect-ratio. Gunakan placeholder dengan jejak akhir komponen. Untuk frame pihak ketiga, cadangkan tingginya dan berikan status memuat atau tidak tersedia yang jelas.
Simpan dimensi media bersama aset jika memungkinkan; rasio generik tidak andal untuk bentuk gambar campuran.
Gulir, saring, buka panel, putar perangkat mobile, dan gunakan navigasi kembali untuk menemukan pergeseran selanjutnya.
Jaga konten dapat ditemukan dan interaksi dapat dipahami
Google Search Central mengatakan Google tidak berinteraksi dengan halaman dengan menggulir atau mengklik. Konten lazy-loaded penting harus dimuat saat terlihat, dan HTML yang dirender harus mengekspos konten atau URL media yang diharapkan. Periksa halaman representatif di Search Console setelah implementasi.
Daftar tak hingga (infinite list) yang dapat diindeks memerlukan rute berhalaman untuk setiap potongan yang tahan lama: URL unik yang persisten, konten stabil di URL itu, dan tautan melalui urutan. Ini juga menciptakan tempat yang dapat dibagikan untuk orang kembali.
Saat sebuah aksi menampilkan konten, pertahankan kontrol dapat dioperasikan dengan keyboard dan buat hasilnya dapat dipahami. Untuk pembaruan bermakna tanpa fokus seperti 'hasil dimuat', ekspos status secara programatik sehingga teknologi bantu dapat mengumumkannya tanpa memindahkan fokus.
Detail produk, isi artikel, informasi kelayakan, dan instruksi tugas tidak seharusnya baru ada setelah aksi pengunjung.
Jangan menunda kontrol checkout atau autentikasi yang diperlukan. Libatkan peninjau keamanan dan kepatuhan yang memenuhi syarat untuk perubahan pembayaran, identitas, dan skrip pihak ketiga.
Gunakan mekanisme yang paling tidak rapuh
Untuk gambar dan iframe luar layar biasa, lazy loading bawaan browser biasanya adalah titik awal paling sederhana. Browser memutuskan kapan permintaan dekat-viewport dimulai; jarak itu bukan jaminan. Peristiwa window load dapat terjadi sementara sumber daya lazy masih belum lengkap.
Gunakan Intersection Observer ketika sebuah komponen bernama membutuhkan aktivasi khusus, seperti mounting panel mahal beberapa saat sebelum muncul. Jaga observer sempit dan mulai kerja cukup awal untuk pengguliran cepat. Gunakan code splitting untuk rute non-inisial atau fitur opsional, bukan sebagai alasan menunda tugas saat ini.
Jangan mengganti sumber sederhana dengan atribut data, beberapa skrip, dan pustaka kecuali perilaku tambahan itu menyelesaikan kebutuhan yang telah diuji.
Embed opsional harus memiliki fallback atau status omission yang jelas, bukan spinner permanen.
Ukur, rilis, dan remediasi bersama
Bandingkan baseline dan kandidat pada URL, status cache, viewport, dan jalur pengguna yang sama. Gunakan pengujian mobile cold yang terkendali ditambah pemeriksaan perangkat nyata jika memungkinkan. Rekam LCP, urutan yang terlihat, layout shift, kesalahan media, HTML yang dirender, dan aksi penting. Data lapangan melengkapi pengujian lab.
Kirim perubahan yang dapat dibalik dan berskala template. Catat aset yang dipindahkan dari eager ke deferred, referensi deployment, tindakan cache, pemilik, dan langkah rollback pertama. Jika LCP menjadi lazy atau jalur konversi menjadi tidak lengkap, hapus aturan dari aset kritis itu dan verifikasi lagi. Periksa ulang setelah tema, CMS, layanan gambar, tag, atau perubahan embed.
Fokus pada pencegahan dan remediasi pengalaman yang rusak, bukan pada pelaporan status saat ini atau alerting.
Balikkan pengaturan template yang terpengaruh sebelum menyetel ulang setiap gambar di seluruh situs.