- Konu sahibi
- #1
pagespeed'de lcp kırmızıysa suçlu çoğu zaman sayfanın en üstündeki büyük görsel oluyor. görsel optimizasyonunda dikkat ettiğim noktalar:
1) format: webp neredeyse her tarayıcıda destekleniyor, avif daha küçük ama kodlaması yavaş. picture etiketiyle avif > webp > jpg sırası verilebilir.
2) boyut: 400 px'lik alanda 2000 px görsel yüklemeyin. srcset + sizes ile cihaza uygun boyut sunun.
3) width ve height: img etiketine genişlik/yükseklik yazmak sayfa yüklenirken kaymayı (cls) önlüyor.
4) lazy-load: ekranın altında kalan görsellerde loading="lazy" iyi. ama ilk ekranda görünen ana görsele (hero/banner) asla lazy vermeyin, lcp'yi geciktirir. wordpress'te bazı eklentiler bunu otomatik yapıyor, kontrol edin.
5) öncelik: lcp görseline fetchpriority="high" eklemek tarayıcının onu önce indirmesini sağlıyor. css arka planı olarak verilen hero görselleri geç keşfediliyor, mümkünse img olarak verin ya da preload edin.
6) sıkıştırma: kalite 75-82 arası çoğu fotoğrafta gözle fark edilmiyor, ama otomatik araçlardan sonra bir kez göz kontrolü yapın.
sizin sitelerde lcp'yi en çok ne düzeltti?
1) format: webp neredeyse her tarayıcıda destekleniyor, avif daha küçük ama kodlaması yavaş. picture etiketiyle avif > webp > jpg sırası verilebilir.
2) boyut: 400 px'lik alanda 2000 px görsel yüklemeyin. srcset + sizes ile cihaza uygun boyut sunun.
3) width ve height: img etiketine genişlik/yükseklik yazmak sayfa yüklenirken kaymayı (cls) önlüyor.
4) lazy-load: ekranın altında kalan görsellerde loading="lazy" iyi. ama ilk ekranda görünen ana görsele (hero/banner) asla lazy vermeyin, lcp'yi geciktirir. wordpress'te bazı eklentiler bunu otomatik yapıyor, kontrol edin.
5) öncelik: lcp görseline fetchpriority="high" eklemek tarayıcının onu önce indirmesini sağlıyor. css arka planı olarak verilen hero görselleri geç keşfediliyor, mümkünse img olarak verin ya da preload edin.
6) sıkıştırma: kalite 75-82 arası çoğu fotoğrafta gözle fark edilmiyor, ama otomatik araçlardan sonra bir kez göz kontrolü yapın.
sizin sitelerde lcp'yi en çok ne düzeltti?
