Largest Contentful Paint (LCP)

08/01/2023
Largest Contentful Paint

Web geliştiricileri için sayfaların hızlı bir şekilde yüklenip kullanıcılara ne kadar hızlı göründüğünü ölçümlemek her zaman önemli bir konu olmuştur.

Kullanıcılar açısından iyi bir deneyim için web sayfasının hızlı yüklenmesi ve kullanıcının sayfaya ulaşması önemlidir.

Largest Contentful Paint Nedir?

Largest Contentful Paint (LCP) sayfanın yüklenme esnasında görünen alandaki en büyük görsel veya metin alanının oluşma süresidir.

Sayfanın yüklenme süresine göre bir skor belirlenir. İyi bir kullanıcı deneyimi için LCP skoru 2.5 saniye veya daha altı olmalıdır.

İyi İyileştirme Gerekiyor Zayıf
Largest Contentful Paint (LCP) ≤2500ms 2500ms > iyileştirme gerekiyor < 4000ms >4000ms

Not: Google LCP performansını değerlendirirken sayfaya gelen tüm kullanıcıların %75’lik kısmına bakıyor. Örnek olarak sayfaya gelen kullanıcıların %75’i 2 saniyenin altında LCP skoru alıyorsa ve %25’lik kısım 2.5 saniyenin üzerinde bir LCP skoru alıyorsa, bu sayfanın skoru “iyi” olarak değerlendirilir.


Sayfada LCP İçin Dikkate Alınan Elementler

  • <img> Etiketleri
  • <svg> Etiketi İçerisindeki <image> Etiketleri
  • <video> Etiketi
  • CSS url() kullanılarak eklenen arka plan görselleri
  • Metin İçeren Block-level veya Inline-level Elementler

LCP Skorunu İyileştirmek İçin Yapılacaklar

Aşağıdaki maddeleri uyguladığınızda LCP skorunu iyileştirebilirsiniz.

Kullanılmayan Javascript ve CSS’leri Kaldırın

Sayfalarda kullanılmayan CSS ve JS kodları fazladan yük oluşturduğu için sayfa açılış performansını düşürüyor. Optimize edilmiş CSS ve JS kodları sayfa açılış performansına yardımcı olur.

Kullanılmayan JS ve CSS kodlarını görmek için Google Inspect aracının Coverage özelliğini kullanabilirsiniz.

Verimli Görseller Kullanın (Optimize Edilmiş Görseller)

Düşük dosya boyutuna sahip optimize edilmiş görseller daha az dosya boyutuna sahip oldukları için sayfa yükleme performansını artırırlar. Online bir görsel sıkıştırma aracını kullanarak görselleri sıkıştırabilirsiniz veya Adobe Photoshop ile görsel sıkıştırabilirsiniz.

Drupal, Joomla, Magento ve WordPress gibi CMS yapılarında görsel optimizasyonu. yapan eklentileri kulanabilirsiniz.

WebP veya AVIF Görsel Formatı Kullanın

JPEG veya PNG formatlarına göre daha fazla sıkıştırılmış olan WebP veya AVIF görsel formatlarını kullanmak LCP skoruna büyük etki gösterir.

WordPress altyapısında görselleri WebP formatına dönüştürmek için WebP Express eklentisi kullanılabilir.

Az sayıda tek tek görsel dönüştürülerecekse JPEG formatı için JPG to WebP ve PNG formatı için PNG to WebP online araçları kullanılabilir.

Sayfa Üzerinde LCP Skorunu Görüntüleme

Web sayfasının LCP skorunu sayfa üzerinde görüntülemek için Google Chrome’da Inspect aracını açın. Mac Os için (Command + Shift + P), Windows için (Ctrl + Shift + P) ile açılan pencerede “Show Core Web Vitals overlay” yazıp “Enter”a basın veya Inspect üzerindeki üç noktaya tıklayarak “Run command” üzerine tıklayın.

Chrome Inspect Run Command

Show Core Web Vitals Overlay

Açılan ekranda sayfa için Largest Contentful Paint değerini ve diğer Core Web Vitals metrik değerlerini görebilirsiniz.

Chrome Inspect LCP Overlay

] }