PageSpeed ve LCP İçin Görsel Optimizasyonu
Google PageSpeed Insights ve Core Web Vitals raporlarında LCP (Largest Contentful Paint), sayfadaki en büyük görsel veya metin bloğunun render edilme süresini ölçer. LCP genelde bir görsel olduğu için görsel optimizasyonu doğrudan bu metriği iyileştirir. 2.5 saniyeden kısa LCP "iyi" kabul edilir.
LCP görselini optimize etmek için: Öncelikle format olarak WebP kullanın; JPEG veya PNG'ye göre %25–35 daha küçük boyut sağlar. Kalite %80 civarı çoğu durumda yeterlidir. Boyut olarak gereksiz büyük görselleri küçültün; max 1600px genelde yeterlidir. Hero veya banner görseli genelde LCP elementidir; bu görselin hızlı yüklenmesi kritiktir.
Lazy loading dikkati: LCP görseli ilk ekranda (above-the-fold) ise loading="lazy" uygulamayın. Lazy loading sadece ilk ekranın altındaki görsellere verilmelidir. Hero görsele lazy eklemek LCP'yi kötüleştirir çünkü tarayıcı yüklemesini geciktirir.
Preload hero görsel: LCP elementinizin bir görsel olduğunu biliyorsanız, <link rel="preload" as="image" href="hero.webp"> ile öncelik verebilirsiniz. Bu sayede tarayıcı görseli HTML parse edilmeden indirmeye başlar. Sadece gerçekten LCP olan görsele uygulayın; gereksiz preload diğer kaynakları geciktirir.
Sonuç olarak: WebP %80, max 1600px ile sıkıştırma, lazy loading'i doğru kullanma ve gerekirse hero preload ile LCP skorunuzu belirgin şekilde iyileştirebilirsiniz. Tarayıcı tabanlı sıkıştırma aracı ile görsellerinizi bu ayarlara uygun şekilde hazırlayıp sunucuya yükleyebilirsiniz.
LCP için WebP %80, max 1600px ile optimize edin. PageSpeed skorunu iyileştirin.
LCP Preset ile Sıkıştır →