Gambar yang baru dimuat ketika ia nyaris masuk layar menghemat bagi pengunjung segala yang ada di bawah lipatan. Kalau perambannya tak tahu ia bakal sebesar apa, halamannya akan melompat begitu gambar itu tiba — dan pembacanya kehilangan tempatnya, atau mengetuk tautan yang sudah bergeser.

Selalu berikan lebar dan tingginya

<img src="/img/rack.webp" width="1600" height="900" alt="A server rack" loading="lazy" decoding="async">

Keduanya bukan ukuran tampilnya. Keduanya adalah nisbah sisinya, dan dari sanalah perambannya memesan ruang yang persis benar selagi berkasnya masih diunduh. Dengan width:100%;height:auto di CSS, gambarnya tetap menskala seperti biasa.

Jangan sekali-kali memuat bagian atas halaman secara malas

loading="lazy" pada gambar utama menunda benda terbesar di layar, padahal itulah satu-satunya ukuran yang menilai seberapa cepat halaman itu terasa. Aturannya sederhana: segala yang di atas lipatan dimuat dengan bersemangat, segala yang di bawahnya dimuat dengan malas.
<!-- hero: eager, and asked for early -->
<img src="/img/hero.webp" width="1600" height="900" alt="" fetchpriority="high">

Hal yang sama berlaku bagi sematan

Sebuah iframe juga menerima lebar, tinggi, dan loading="lazy". Sematan video yang dibiarkan bersemangat sering kali adalah benda terberat di sebuah halaman, dan biasanya ia berada di bawah lipatan.

Dan bagi apa pun yang dimunculkan oleh skrip

Efek muncul-saat-digulir yang dimulai dari kelegapan 0 akan menampilkan kartu kosong kepada siapa pun yang skripnya tak berjalan. Buatlah keadaan tersembunyi itu harus diminta — dipasang oleh skripnya begitu ia hidup — supaya isinya terlihat secara bawaan.

Periksalah

Muat halamannya dengan jaringan yang dicekik, lalu perhatikan apakah ada yang bergerak setelah gambar-gambarnya tiba. Cumulative Layout Shift dalam satu jalanan Lighthouse memberi angka untuk hal yang sama — lihat Mengukur Core Web Vitals dengan jujur.