Bir ziyaretçi sayfayı açtığında tarayıcı önce boş alan, sonra başlık ve görsel gösterebilir. Sayfanın en önemli içeriğinin ne kadar sürede görünür hâle geldiğini anlamaya yardımcı ölçümlerden biri Largest Contentful Paint, yani LCP'dir. Ancak bir araçta görülen tek bir puana bakıp rastgele kod küçültmek, gecikmenin gerçek sebebini bulmaya yetmez.

LCP neyi ölçer?

LCP, ilk görünür alanda yer alan en büyük uygun içerik öğesinin görüntülenme zamanını ölçer. Bu öğe bir ana görsel ya da büyük bir metin bloğu olabilir; her sayfada mutlaka aynı tür değildir. Google'ın Core Web Vitals rehberinde iyi bir kullanıcı deneyimi için LCP'nin sayfa yüklemelerinin en az yüzde 75'inde 2,5 saniye veya altında olması hedeflenir. Bu bir garanti edilmiş sıralama sonucu değildir ve gerçek kullanıcı ölçümleri cihaz ve bağlantılara göre değişir.

Önce incelenen sayfa türünü ayırın. Blog yazısında başlık, ürün sayfasında ürün görseli, ana sayfada büyük bir tanıtım görseli LCP adayı olabilir. Test aracında öğenin hangisi olduğunu görmeden “tüm resimleri küçültelim” demek asıl sorunu kaçırabilir.

Zamanı parçalara ayırın

LCP'yi iyileştirirken sunucuya ilk isteğin yanıtlanması, LCP kaynağının keşfedilmesi, kaynağın indirilmesi ve indirildikten sonra ekrana çizilmesi ayrı incelenebilir. Sunucu ilk HTML'i geç gönderiyorsa yalnızca görseli sıkıştırmak sınırlı katkı sağlar. HTML hızlı geliyor ama görsel JavaScript çalışana kadar keşfedilemiyorsa sorun indirme başlamadan önceki beklemedir.

Ağ panelinde ana belgeyi, kritik görsel isteğinin başlama anını ve görsel bittikten sonraki gecikmeyi karşılaştırın. Sayfa görünür olmak için büyük bir JavaScript paketinin tamamlanmasını veya gecikmeli bir animasyonu bekliyorsa görsel indirilmiş olsa bile LCP süresi uzayabilir. Ölçüm sonucunu sayfanın gerçek davranışıyla birlikte yorumlayın.

Kritik görseli önceliklendirin

İlk ekranda görünmesi beklenen ana görseli gereksiz yere loading="lazy" ile geciktirmeyin. Görselin HTML içindeki normal bir img öğesinden erken keşfedilebilmesi yararlı olabilir. Tarayıcıya önemini bildirmek için uygun durumlarda fetchpriority="high" değerlendirilebilir:

HTML
<img src="/images/urun-800.webp"
     width="800" height="600"
     alt="Masa üzerindeki siyah masa lambası"
     fetchpriority="high">

Bu bir öncelik ipucudur; tüm görsellere high vermek hangisinin önemli olduğu bilgisini ortadan kaldırır. Görselin gerçek görünümüne uygun boyutta ve kalitede sunulduğunu, mobilin gereğinden büyük dosya indirmediğini de kontrol edin. Preload yalnızca geç keşfedilen gerçekten kritik kaynağa uygulanmalı ve fazladan indirmeye yol açmadığı test edilmelidir.

Sunucu ve ekran çizimi

İlk HTML'in gecikmesinde yavaş veritabanı sorgusu, harici API'ye sayfa açılırken bağımlılık veya önbellek eksikliği etkili olabilir. Bunları ölçerek araştırın; her yanıtı herkese açık önbelleğe almak kullanıcıya özel veri sızıntısına yol açabilir. CSS ve JavaScript tarafında da gereksiz büyük kaynakları azaltmak ve önemli içeriği uzun giriş animasyonunun arkasında saklamamak önemlidir.

Laboratuvar testini birkaç kez tekrarlayın ve mümkünse gerçek kullanıcı verisiyle karşılaştırın. Laboratuvar belirli cihaz/ağ koşullarını simüle eder; sahadaki ziyaretçilerin tamamını temsil etmez. Değişiklikten önce ve sonra aynı sayfa türünü ve benzer koşulları karşılaştırın. Ayrıntılı yaklaşım için web.dev LCP optimizasyon rehberi yararlı bir başlangıçtır.