Ancak neredeyse ekrana geldiğinde yüklenen bir resim, ziyaretçiye kıvrımın altındaki her şeyi kazandırır. Tarayıcı onun ne kadar büyük olacağını bilmiyorduysa, resim geldiğinde sayfa zıplar — ve okur ya yerini kaybeder ya da kaymış bir bağlantıya dokunur.

Genişliği ve yüksekliği her zaman verin

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

Bunlar görüntüleme ölçüsü değildir. En-boy oranıdır; tarayıcı da dosya hâlâ inerken onlardan tam doğru yeri ayırır. CSS'te width:100%;height:auto ile resim yine olağan biçimde ölçeklenir.

Sayfanın üst kısmını asla tembel yüklemeyin

Üst görselin üzerindeki loading="lazy", ekrandaki en büyük şeyi geciktirir; oysa sayfanın ne kadar hızlı hissettirdiğini ölçen tek ölçüt odur. Kural yalındır: kıvrımın üstündeki her şey hemen yüklenir, altındaki her şey tembeldir.
<!-- hero: eager, and asked for early -->
<img src="/img/hero.webp" width="1600" height="900" alt="" fetchpriority="high">

Aynısı gömülü içerikler için de geçerlidir

Bir iframe de genişlik, yükseklik ve loading="lazy" alır. Hemen yüklenmeye bırakılmış bir video gömmesi çoğu zaman bir sayfadaki tek başına en ağır şeydir, ve genellikle kıvrımın altındadır.

Bir de bir betiğin ortaya çıkardığı her şey için

Sıfır saydamlıkla başlayan, kaydırdıkça beliren bir etki, betiği çalışmamış olan herkese bomboş bir kart gösterir. Gizli durumu isteğe bağlı kılın — betik canlandığında onu kendisi uygulasın — ki içerik varsayılan olarak görünür olsun.

Denetleyin

Sayfayı ağı kısılmış halde açın ve resimler geldikten sonra bir şeyin kımıldayıp kımıldamadığını izleyin. Bir Lighthouse koşusundaki Cumulative Layout Shift aynı şeye bir sayı verir — bkz. Temel Web Verilerini dürüstçe ölçmek.