Ana görsel geç geliyorsa:LCP’yi anlamak

Sayfanın menüsü açılmış, arka planı görünmüş ama asıl proje görseli hâlâ gelmemiş olabilir. Ziyaretçi için yüklemenin bitmesi, tarayıcının teknik olarak hazır olmasından farklıdır. LCP, görünür alandaki en büyük uygun içerik öğesinin ne zaman çizildiğine bakarak bu farkı ölçmeye çalışır.

Benim için yüklenme hissi, sayfanın teknik olarak açılmasından farklı. Başlık var ama asıl kapak gelmiyorsa ziyaretçi hâlâ bekliyor olabilir. Bu nedenle ilk büyük görseli yalnızca dekorasyon gibi görmüyorum. Onun bulunması ve gösterilmesi, sayfanın ilk izleniminin önemli bir kısmını oluşturuyor.

Temel fikir

LCP yalnızca fotoğraf değildir; büyük bir metin bloğu da aday olabilir. web.dev iyi deneyim için 2,5 saniye veya altını, mobil ve masaüstünde ziyaretlerin yüzde 75’lik dilimi üzerinden değerlendirmeyi önerir. Bu eşik her dosyanın aynı sürede inmesi gerektiği anlamına gelmez.

Bir örnek üzerinden

Bir portföyde önce hangi öğenin LCP olduğunu belirle. Kapak görseliyse dosyanın bulunması, indirilmesi ve ekrana çizilmesi ayrı sorunlar olabilir. Örneğin görseli JavaScript çalıştıktan sonra eklemek, dosya küçük olsa bile başlangıcı geciktirebilir. Önce bu beklemeyi incele; her şeye preload ekleme.

Nereden başlamalı?

Aynı sayfayı soğuk önbellekle birkaç kez dene. Tek bir iyi sonucu değil, tutarlı değişimi ara. Görseli küçültürken ürün detaylarının kaybolmadığını da kontrol et. Hedef puanı yükseltmek kadar, ziyaretçinin ana içeriğe gerçekten ulaşmasını sağlamaktır.

Benim yaklaşımım

Bir kapak geç geliyorsa hemen kaliteyi düşürmeden önce isteğin ne zaman başladığına bakardım. Görseli sonradan ekleyen kod mu bekletiyor, dosya mı ağır, sunucu mu geç yanıtlıyor? Sorunu aşamalara ayırmak benim için daha faydalı. Bütün sayfaya rastgele ön yükleme eklemek, doğru önceliği bulmakla aynı şey değil.