Lazy loading ve LCP görseli: hangi görselin öncelikli yüklenmesi gerektiğini seçmek

Giriş

Lazy loading (ertelenmiş yükleme) aşağıdaki görselleri şebeke ve CPU tasarrufu için erteler; ancak LCP (Largest Contentful Paint) adayı gecikirse Core Web Vitals ve kullanıcı algısı kötüleşir. Çözüm, lazy’yi kapatmak değil; LCP öğesini doğru tespit edip önceliklendirmek, diğerlerini lazy bırakmaktır.

Bu serinin önceki yazıları: Görsel site haritası · WebP/AVIF · E-posta hero.

LCP adayı hangisi?

Çoğu ürün ve içerik sayfasında hero veya ana ürün görseli LCP’dir; bazen büyük metin bloğu veya video posteri kazanır. Varsaymayın—ölçün. web.dev: Optimize LCP ölçüm ve iyileştirme adımlarını verir.

Pratik kurallar:

• Muhtemel LCP <img> üzerinde loading="lazy" kullanmayın (veya destekleniyorsa fetchpriority ile ölçüm sonrası ayarlayın).
• Preload yalnızca profil gerçekten gösteriyorsa; aşırı preload rekabeti yaratabilir.

loading davranışı

MDN loading özelliği görünüm alanı ile etkileşimi açıklar.

CDN ile birlikte

Güncelleme sonrası eski görsel CDN önbelleği nedeniyle LCP’yi yanıltıcı şekilde etkileyebilir; dosya adı sürümlemesini toplu iş akışı ile standartlaştırın.

İngilizce paralel

Lazy loading and LCP aynı konuyu İngilizce anlatır.

Sonuç

LCP görselini netleştirin; daha hızlı site görsel ipuçları ile genel optimizasyonu destekleyin.