Bu Yazıdan Öne Çıkanlar
En Büyük Görünür Parça (LCP) metrik puanınızı aşağı çeken büyük görselleri optimize etme rehberi.
Görsel Optimizasyonunda LCP Odağı
Birçok sitede LCP elemanı genellikle ana görseldir (hero image). Bu görselin geç yüklenmesi, sitenizin Google gözünde yavaş olması demektir. LCP puanınızı iyileştirmek, hem kullanıcı deneyimini hem arama sıralamanızı doğrudan etkiler.
LCP İyileştirme Stratejileri
- Preload: Ana LCP görselini
<link rel="preload">ile tarayıcıya erkenden bildirin. - Modern Formatlar: JPG yerine WebP veya AVIF kullanarak kaliteyi bozmadan %50-70 tasarruf sağlayın.
- Responsive Images:
srcsetvesizeskullanımıyla mobil kullanıcılara devasa masaüstü görselleri göndermeyi durdurun. - CDN Kullanımı: Görselleri edge sunuculardan sunarak fiziksel uzaklık kaynaklı gecikmeyi azaltın.
Fetch Priority Özelliği
HTML5 ile gelen fetchpriority="high" özniteliğini LCP görsellerinize ekleyerek tarayıcının bu kaynağa öncelik vermesini sağlayabilirsiniz. Bu özellik, Chrome 101+ sürümlerinde desteklenmektedir.
Lazy Loading Dikkatı
LCP görseline asla loading="lazy" eklemeyin! Bu, görselin yüklenmesini geciktirerek LCP puanınızı kötüleştirir. Lazy loading yalnızca ekranın altındaki (below-the-fold) görseller için kullanılmalıdır.
