LCP görseli tembel yükleniyor ya da öncelikli değil
lcp_image_not_prioritisedKısa cevap
Bu sayfada LCP yavaş ve Largest Contentful Paint öğesi tarayıcının geç yüklediği bir görsel: loading="lazy" taşıyor, fetchpriority="high" ipucu yok ya da ilk HTML'de bulunamıyor (JavaScript ile ekleniyor ya da CSS arka planı olarak veriliyor). O görselden tembel yüklemeyi kaldırın, fetchpriority="high" ekleyin ve <img> etiketinin (ya da bir <link rel="preload" as="image"> etiketinin) sunucunun gönderdiği HTML'de olduğundan emin olun.
Neden önemli
LCP üç Core Web Vitals ölçütünden biridir. İlk ekrandaki en büyük görsel tembel yüklenince tarayıcı onu istemek için yerleşimi bekler; geç keşfedilince diğer bütün istekler önce gider. İkisi de mobilde yüzlerce milisaniye ekler. Bunlar tasarımı değil öznitelikleri değiştirdiği için en ucuz LCP düzeltmeleri arasındadır.
Glimana bunu nasıl tespit eder
Glimana son 14 günün Lighthouse (PageSpeed) mobil testlerini kullanır; testler haftada bir ana sayfada ve en çok tıklanan on sayfada koşar. Kural yalnız LCP'nin yavaş olduğu sayfalara bakar: sayfanın CrUX saha p75 değeri 2,5 sn'nin üstündeyse (sayfanın saha verisi yoksa bütün sitenin) ya da hiç saha verisi yoksa laboratuvar LCP'si 4 sn'nin üstündeyse. Bu sayfalarda Lighthouse'un bildirdiği LCP öğesini okur. Öğenin HTML'inde varsa loading="lazy" bildirilir; eksik öncelik ipucu ve "ilk HTML'de bulunamıyor" yalnız Lighthouse'un kendi LCP keşif kontrolü ölçtüyse bildirilir. Kanıt öğeyi, bulunan sorunları ve LCP değerini kaynağıyla (saha ya da laboratuvar) gösterir.
Nasıl düzeltilir
- Glimana'da etkilenen sayfaları bulun. Sorunlar › LCP görseli tembel yükleniyor ya da öncelikli değil bölümünü açın. Etkilenen her sayfa bir satırdır; Glimana'nın o sayfa için kaydettiği kanıtı (ölçülen değer, soruna yol açan öğe ya da hedef adres) görmek için satırı açın. Aynı liste Görevler altındaki görev kartında da yer alır; sayfanın Sayfalar altındaki kendi ayrıntı görünümü ise tüm sinyallerini gösterir.
-
Düzeltmeyi platformunuzda uygulayın.
Kanıtta adı geçen kısımları yalnız LCP görseline uygulayın (genellikle ana görsel ya da ilk ürün görseli):
<img src="/hero.webp" width="1200" height="630" alt="…" fetchpriority="high">- Tembel yükleme:
loading="lazy"'yi kaldırın (ya daloading="eager"yapın). Sayfanın aşağısındaki görsellerde tembel yüklemeyi koruyun. - Öncelik ipucu yok:
fetchpriority="high"ekleyin. Sayfa başına en çok bir iki görselde kullanın. - İlk HTML'de yok:
<img>etiketini sunucuda üretin. Görselin CSS arka planı kalması ya da betikle eklenmesi gerekiyorsa<head>içine<link rel="preload" as="image" href="…" fetchpriority="high">ekleyin.
WordPress 6.3'ten beri çekirdek, olası LCP öğesi olarak saptadığı görsele
fetchpriority="high"ekler ve içerikteki ilk görselleri tembel yüklemez. Kanıt hâlâlazygösteriyorsa bir performans ya da tembel yükleme eklentisi (örneğin bir önbellek eklentisinin medya ayarlarında) onu geri ekliyordur: o eklentide ana görseli ya da ilk görseli tembel yüklemeden hariç tutun. Temada ya da sayfa oluşturucuda arka plan olarak verilmiş ana görsel için onu bir görsel bloğuna çevirin ya da temanın<head>bölümüne preload ekleyin.İlk görseli üreten bölümde onu
image_tagile basın ve sayfadaki ilk bölüm içinloading: 'eager'vefetchpriority: 'high'verin (Dawn gibi temalar bunasection.indexile karar verir). Bir uygulamanın her görseli tembel yüklemediğinden emin olun. İlk slaytı JavaScript ile eklenen slayt gösterilerinden kaçının.İlk ekrandaki görseli onu üreten bileşende işaretleyin:
loading="lazy"yok,fetchpriority="high"ekli,widthveheightbelirtilmiş. Görsel bileşeni olan çatılarda onun öncelik seçeneğini kullanın (örneğin Next.js<Image>içindepriority). Öğeyi sunucuda üretin ki ilk HTML yanıtında olsun. - Tembel yükleme:
-
Yayımlayın ve önbellekleri temizleyin. Kaydedip yayımlayın, ardından tarayıcının yeni sürümü göreceğinden emin olun: WordPress — önbellek eklentinizde sayfa önbelleğini temizleyin ve CDN'i boşaltın; Shopify — tema ve içerik değişiklikleri kaydedildiği anda yayına girer, ancak mağazanın önünde bir CDN varsa onu boşaltın; özel kod — dağıtımı yapın ve uç (edge) önbelleği boşaltın. Canlı HTML'in değiştiğini gizli bir pencerede ya da
curl -s https://your-domain/page | grep -i '<title\|canonical\|robots'ile kontrol edin; Glimana, web tarayıcınızın önbelleğindekini değil, sunucunun gönderdiğini okur. - Glimana'da doğrulayın. Görevi Görevler altında açıp Yaptım düğmesine tıklayın. Kural sayfanın en son Lighthouse testini okur; testler haftada bir (cumartesi) koştuğu için sonuç bir hafta kadar sürebilir. LCP görseli artık tembel yüklenmediğinde, öncelik ipucu taşıdığında ve ilk HTML'de bulunabildiğinde görev kapanır. Kontrol yine başarısız olursa görev bir notla Yeni durumuna döner. Hız sayfasındaki saha LCP'si sonraki 28 günde yetişir.
Tek bir URL'yi şimdi test edin
Ücretsiz hız aracı tek bir URL için mobilde PageSpeed çalıştırır: puanlar, Core Web Vitals ve en pahalı 10 denetim. Hesap gerekmez.
Düzeltme nasıl doğrulanır
Bir sonraki haftalık Lighthouse testi LCP öğesini yeniden okur; bildirilen sorunlardan hiçbiri kalmadığında görev kapanır. Saha LCP'si (CrUX) 28 gün içinde kademeli olarak iyileşir.
SSS
Her görsele fetchpriority="high" eklemeli miyim?
Hayır. Öncelik görelidir: her şey yüksekse hiçbir şey yüksek değildir. LCP görselinde ve en çok bir başka kritik görselde kullanın.
Lighthouse LCP artık iyi diyor. Görev neden hâlâ açık?
Kuralın değişikliği görmesi için bir sonraki Lighthouse testi gerekir ve kural yalnız LCP yavaşken tetiklenir. Saha LCP'si hâlâ 2,5 sn'nin üstündeyse başka sebepler vardır; bkz. Alan verisinde LCP kötü.