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 (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.
Aşağıdaki maddeleri uyguladığınızda LCP skorunu iyileştirebilirsiniz.
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.
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.
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.
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.
Açılan ekranda sayfa için Largest Contentful Paint değerini ve diğer Core Web Vitals metrik değerlerini görebilirsiniz.