LCP dökümü ve LCP istek keşfi uyarıları nasıl giderilir?
Ana içeriğin görünme süresi nerede geçiyor? LCP dökümü bu süreyi dört aşamaya ayırıyor: sunucu yanıtı, kaynak keşfi, indirme ve çizim. Hangi aşamanın sorunlu olduğunu bulmak düzeltmeyi doğru yere yöneltiyor.
İki ayrı uyarı, aynı ölçü
PageSpeed raporunda birbirine yakın iki başlık görünüyor: "LCP dökümü" ve "LCP istek keşfi".
İkisi de aynı ölçüyle ilgili: sayfadaki en büyük içerik öğesinin ne kadar sürede göründüğü.
Bu öğe çoğu sitede ilk ekrandaki büyük görsel. Bazen büyük bir başlık metni de olabiliyor. Rapor hangi öğenin ölçüldüğünü açıkça gösteriyor ve ilk bakılacak yer orası.
Ölçünün tanımı ve eşikleri web.dev üzerinde yayımlanıyor; iyileştirme yolları ayrı bir belgede anlatılıyor.
Dört aşama
"LCP dökümü" uyarısının değeri şurada: toplam süreyi dört parçaya ayırıyor ve hangisinin uzun olduğunu gösteriyor.
1. Sunucu yanıtı. Sayfa isteği gönderildikten sonra ilk baytın gelmesine kadar geçen süre.
2. Kaynak keşfi. Tarayıcının ana görseli fark etmesine kadar geçen süre.
3. İndirme. Görselin inmesi.
4. Çizim. Görselin ekrana çizilmesi.
Bu ayrım kritik çünkü her aşamanın çözümü farklı. Sunucu yanıtı uzunken görsel optimize etmek toplam süreyi eşiğin altına indirmiyor.
Uzun olan aşama | Yapılacak iş |
|---|---|
Sunucu yanıtı | Barındırma, önbellek, sunucu tarafı optimizasyon |
Kaynak keşfi | Öncelikli yükleme, tembel yüklemeyi kaldırma |
İndirme | Görsel boyutu ve biçimi |
Çizim | Oluşturma engelleyen dosyaların azaltılması |
İpucu — Rapordaki döküm çubuğuna bakın: en uzun parça hangisiyse çalışma orada. Fırsatlar listesinin en üstündeki madde, o parçayla ilgili olmayabiliyor.
Kaynak keşfi — en sık sorun
"LCP istek keşfi" uyarısı özellikle bu ikinci aşamayla ilgili ve sahada en sık gördüğümüz sorun burada.
Tarayıcı, HTML'i okurken görselleri fark ediyor ve indirmeye başlıyor. Üç durumda bu keşif gecikiyor:
Görsele tembel yükleme uygulanmış. En yaygın sebep. Tembel yükleme keşfi bilerek geciktiriyor; ilk ekrandaki görsel için bu doğrudan zarar. Ayrıntısını tembel yükleme yazısında anlattık.
Görsel arka plan olarak yükleniyor. Stil dosyasından geliyorsa tarayıcı önce stil dosyasını indirmek zorunda. İki adımlı gecikme.
Görsel JavaScript ile ekleniyor. Tarayıcı HTML'i okuduğunda görsel henüz orada değil; betik çalışana kadar keşfedilmiyor.
Üçünün de çözümü aynı yöne bakıyor: görselin HTML'de, doğrudan ve erkenden bulunması.
Öncelikli yükleme
Keşif sorunu çözüldükten sonra bir adım daha var: tarayıcıya bu görselin önemli olduğunu söylemek.
Varsayılan davranışta tarayıcı bütün görselleri eşit önemde sayıyor ve sırayla indiriyor. Ana görsel sıranın sonundaysa geç geliyor.
Öncelik işareti eklendiğinde o görsel diğerlerinden önce iniyor. Tek satırlık bir değişiklik ve çoğu sitede ölçüyü belirgin şekilde iyileştiriyor.
Aynı işareti birden çok görsele vermek işe yaramıyor: her şey öncelikliyse hiçbir şey öncelikli değil. Yalnızca LCP öğesine verilmeli.
Dikkat — Öncelik işaretini vermeden önce rapordan LCP öğesinin hangisi olduğunu doğrulayın. Yanlış görsele öncelik vermek, doğru görselin daha da geç gelmesine yol açıyor.
Sunucu yanıtı uzunsa
Bu, diğer üç aşamayı anlamsız kılan durum.
Sunucu ilk yanıtı 1,5 saniyede veriyorsa, LCP en iyi ihtimalle 1,5 saniyeden başlıyor. Görseli ne kadar küçültürseniz küçültün bu süre değişmiyor.
Belirtisi: dökümde ilk parça diğer üçünün toplamından büyük.
Çözüm tarayıcı tarafında değil altyapıda: barındırma kalitesi, sunucu tarafı önbellekleme, veritabanı sorgularının optimizasyonu. Bu tarafı doküman isteğinde gecikme yazısında ayrıca ele aldık.
LCP öğesi metin olduğunda
Görselin olmadığı ya da küçük olduğu sayfalarda LCP öğesi büyük bir başlık metni olabiliyor.
Bu durumda sorun genellikle yazı tipinde: yazı tipi dosyası inene kadar metin hiç görünmüyorsa, ölçü o beklemeyi de sayıyor.
Çözüm, yazı tipi gelene kadar yedek bir yazı tipiyle metnin gösterilmesi. Ayrıntısını yazı tipi görüntüleme yazısında anlattık.
Örnek senaryo — Bir sitede LCP 4,1 saniye. Fırsatlar listesinin en üstünde "kullanılmayan JavaScript" yazıyor. Ekip günlerce betik temizliğiyle uğraşıyor, ölçü 3,9'a iniyor. Sonra dökümе bakılıyor: sürenin 2,6 saniyesi kaynak keşfinde geçiyor. Sebep tek — ana görsele tembel yükleme uygulanmış. Tek satır kaldırılıyor, LCP 1,7'ye iniyor.
Sıralı kontrol
LCP sorununu çözmenin sırası şu ve atlanmamalı:
- Rapordan LCP öğesini bulun. Hangi görsel ya da metin ölçülüyor?
- Dökümden en uzun aşamayı bulun. Çalışma orada.
- Sunucu yanıtı uzunsa önce onu düzeltin. Diğerleri onun üstüne biniyor.
- Keşif uzunsa tembel yüklemeyi kaldırın ve öncelik verin.
- İndirme uzunsa görseli küçültün ve modern biçime çevirin.
- Çizim uzunsa engelleyen dosyaları azaltın.
- Dört hafta bekleyip saha verisine bakın.
Görsel tarafındaki işleri resim yayınlama yazısında, engelleyen dosyaları oluşturma engelleme yazısında ele aldık.
Mobil ve masaüstünde farklı öğe
Sık atlanan bir ayrıntı: LCP öğesi mobil ve masaüstünde farklı olabiliyor.
Masaüstünde geniş bir kapak görseli ölçülürken, mobilde o görsel gizlenmiş ve ölçülen şey bir başlık metni olabiliyor.
Bu yüzden iki raporu ayrı okumak gerekiyor. Mobilde yapılan düzeltme masaüstünü etkilemeyebiliyor ve tersi.
Önemsenmesi gereken taraf mobil; gerekçesini mobil öncelikli indeksleme yazısında anlattık.
Ne zaman yeterli?
Hedef ölçüyü sıfırlamak değil, eşiğin altına indirmek.
Eşik geçildiğinde daha da iyileştirmenin sıralama tarafında ek bir karşılığı olmuyor. Kullanıcı deneyimi açısından değeri var ama emek başına getirisi hızla düşüyor.
Bu yüzden LCP çalışmasında durma noktası, saha verisinde ölçünün yeşile dönmesi. Sonrasında emek başka bir yere kaymalı.
Ölçünün gerçek kullanıcıdaki karşılığı
Laboratuvar ölçümü tek bir simülasyon; saha verisi ise 28 günlük gerçek kullanıcı ortalaması.
İkisi arasında büyük fark olabiliyor. Laboratuvarda 2,1 saniye çıkan bir sayfa, saha verisinde 4,3 saniye görünebiliyor.
Sebebi kullanıcı çeşitliliği: yavaş cihazlar, zayıf bağlantılar, uzak konumlar. Simülasyon bir ortalama varsayıyor, gerçek kullanıcılar dağılıyor.
Karar her zaman saha verisine göre verilmeli. Laboratuvar ölçümü yalnızca sebebi bulmak için.
Sayfa tipine göre değişiyor
LCP tek bir sayı değil; her sayfa tipinde farklı olabiliyor.
Ana sayfa büyük bir kapak görseliyle geliyor, blog yazısı metinle başlıyor, ürün sayfası galeriyle. Üçünün LCP öğesi ve sorunu farklı.
Bu yüzden ölçüm tek sayfada değil, sayfa tiplerinde yapılmalı: ana sayfa, bir kategori, bir ürün, bir blog yazısı.
Search Console'un raporu bunu sayfa grupları hâlinde gösteriyor ve hangi şablonun sorunlu olduğunu doğrudan söylüyor.
Sonuç — LCP tek bir sayı ama dört ayrı sebepten uzayabiliyor. Dökümü okumadan yapılan düzeltme, çoğu zaman yanlış aşamaya harcanan emek oluyor.
Ölçüm ve düzeltmenin tamamını teknik SEO kapsamında yürütüyoruz; sitenizin bugünkü durumu SEO denetimi ve analiz çalışmasında çıkarılıyor. Yeni bir sitede bu yapı baştan doğru kuruluyor — web sitesi geliştirme.
Rapordaki diğer uyarılar için PageSpeed uyarıları yazısına bakabilirsiniz.
