Largest Contentful Paint (LCP) Nedir?
“Web Sitem Yeterince Performanslı mı?” sorusuna cevap aradığımız serinin ikinci yazısında LCP hakkında bilgiler vermeye çalışacağım. Serinin ilk yazısı olan “Cumulative Layout Shift (CLS) Nedir?” yazıma da buradan ulaşabilirsiniz.
CLS gibi son iki yılda sıkça karşımıza çıkan ve henüz çok ön planda tutulmasa da web sitemizin performans analizlerini yaparken oldukça önemsememiz gereken metriklerden bir diğeri de Largest Contentful Paint (LCP) yani web sitemiz yüklenmeye başladığı andan itibaren sayfamızda bulunan en büyük öğenin yüklenmesine kadar geçen süredir. LCP, Web Vital kriterlerine göre performans metriğinin %25'ini temsil etmektedir. Bu sebeple, önemli bir metrik olarak konumlandırılmalıdır.
LCP konusu geçtiğinde FCP (First Contentful Paint) üzerine bir cümle kurmadan geçmemiz doğru olmaz. Bu iki metrik çokça karıştırılmaktadır. FCP, sayfaya yüklenen ilk görünür öğenin yüklenme süresidir. Bu sebeple, LCP’den bağımsız değerlendirilmelidir.
Image etiketi, svg etiketi içerisindeki görseller, video etiketi içerisindeki öğeler, url() kullanımı ile sayfamıza eklediğimiz arka plan görselleri ve blok seviyesindeki html elementleri LCP ölçümlerine dahil edilmektedir.
Blok seviyesindeki HTML elementleri, sayfada her zaman yeni bir satırda başlarlar ve bulundukları satırın tüm genişliğini kaplarlar. Bu sebeple, LCP ölçüm kapsamına dahil olmaktadır. Blok seviyesindeki HTML elementleri ile ilgili daha fazla bilgiye buradan ulaşabilirsiniz.
Görsel Büyüklüğü Nasıl Tanımlanmaktadır?
LCP hesaplanırken bir görsel için hangi boyutun ele alınacağı da önemli bir faktördür. En temel anlamıyla, LCP son kullanıcının ekranında gördüğü yani görselin tamamen oluşmuş halinde kapladığı alandır. Bu kavram, bir metinden bahsederken Görsel 1.3'teki örnekte de görülebileceği gibi, metnin tamamını içerisine alabilen en küçük kutucuk olarak tanımlanmaktadır. Görseldeki yeşil kutucuk (sağdaki boşlukları çıkarttığımızda) LCP hesaplamasında kullanılması gereken esas alandır.
Görsellere css yoluyla eklediğimiz ek boşluklar LCP ölçümüne dahil edilmemektedir.
Yukarıdaki görselde LCP’nin kullanıcı deneyimine etkisini net bir şekilde görmekteyiz. Sitede öne çıkarılmak istenen HERO IMAGE alanı kırmızı sitede 0.7sn’de karşımıza çıkarken, yeşil sitede çok daha hızlı yüklenmektedir. Bu örnekte HERO IMAGE alanının en büyük öğe olduğunu varsayarsak LCP puanı 0.7sn olacaktır.
Web sayfaları bildiğiniz gibi temel bir akış üzerine yüklenmektedir. Tüm öğeler aynı anda yüklenmediği için de sayfadaki en büyük öğeye dinamik olarak karar verilir. Bu işlem için, PerformanceObserver API’si kullanılır.
Her yüklenen öğe için bir performans girdisi oluşturulur ve bu performans girdisi ile öğenin boyutları ölçümlenerek yüklenen en büyük öğe olup olmadığına karar verilir. X öğesi en büyük öğe iken, ondan daha sonra yüklenen ve daha büyük olan Y öğesi artık en büyük öğe olarak kabul edilmektedir. Bu akış, sayfaya kullanıcının sayfayla olan ilk etkileşimine kadar devam eder. Kullanıcı, sürükleme ve tıklama gibi aksiyonlarla öğelerin boyutlarını değiştirebilecek eylemler gerçekleştirebilir. Bu arada, herhangi bir ölçümde X öğesi en büyük öğe iken, sayfadan kaldırıldığında ondan daha büyük yeni bir öğe yüklenmezse, en büyük öğe olarak kalacaktır.
LCP metrik aralığımızı aşağıdaki görsel ile tekrar hatırlayalım:
LCP Skoru Nasıl İyileştirilebilir?
Görsel boyutları, LCP skoru başta olmak üzere bir çok performans metriği için önem taşımaktadır. Web sitemizde, görsel boyutlarını son kullanıcının gerçekte görüntülemesi gerektiği boyutlarda tercih etmeliyiz. Örneğin; 300x400 boyutlarında kullanacağımız bir görsel 900x1200 formatında boyutunda olmamalıdır.
Nesnelerin yüklenmesi boyutları ile ilişkili olsa da onları sunduğumuz CDN (Content Delivery Network) de önem taşımaktadır. Bu sebeple, LCP skorlarını incelerken TTFB ve diğer network metriklerinin de incelenmesi gerekmektedir. Sunuculardan ilgili dosyaların sayfaya yüklenmesindeki hızlar optimum sürelerde olmalıdır. Bu sürelerin tanımları ve optimumları için buradan yararlanabilirsiniz.
CLS yazımda da belirttiğim gibi, web sitemiz için aşağıdakileri aksiyonları her zaman önemsemeliyiz:
- Kullanılmayan ve gereğinden büyük görsellerden kaçınmalıyız.
- Bir görselin web sitesine gerçekten ihtiyacımız olduğunda yüklenmesini sağlamalıyız.
- Javascript, css, font ve benzeri dosyaların gerçekten minimalist bir yaklaşımda olduğundan emin olmalıyız.
- Düzenli olarak web sitelerimizin performanslarını yardımcı araçlarla takip etmeli ve raporlamalıyız.
Vakit ayırdığınız için teşekkür ederim,
Kaynaklar:
