Largest Contentful Paint (LCP) Nedir? Nasıl Optimize Edilir?

Largest Contentful Paint (LCP); bir Core Web Vitals metriğidir. Web sitelerinde kullanıcı deneyimlerinin kalitesini optimize etmek ve onun uzun vadede başarılı olmasını sağlayan en önemli unsurdur. Web sayfasının görünür olan en büyük büyük içeriğinin yüklendiği en büyük hızı, LCP’yi ilgilendirir.

LCP tam olarak; kullanıcıların sayfayı yüklemeye başlamasıyla birlikte en büyük metin ya da resim bloğunun görünüm alanı içinde oluşturulmasıyla ilgili geçen süreyi ifade ediyor. Bir web sitesinde yer alan ana içeriğin yüklenme hızının değerlendirilmesini LCP yapıyor.

Web sitelerinde son eklenen içerik en büyük olarak kabul edilir. Largest Contentful Paint; web sayfasının yükleme süresi yanında kullanıcılar için öğelerin tümünün tarayıcı üzerinde gösterildiği süreyi de kapsıyor.

Largest Contentful Paint (LCP) Neden Önemlidir?

Largest Contentful Paint, SEO açısından çok önemlidir. Google, Core Web Vitals’in en önemli parçası olarak LCP metriğini kabul eder. Bundan dolayı Google algoritmalarının devamlı değerlendirdiği parametre olarak Largest Contentful Paint kabul edilir.

Web sitelerinin sıralamasının yükseltilmesi noktasında LCP’e ihtiyaç vardır. Özellikle Google son birkaç sene içerisinde kullanıcı deneyimlerinin geliştirilmesiyle ilgili değerlendirme parametrelerinin tanımlanması için çalışmalar yaptı. Bu da direkt Core Web Vitals metriklerini etkilemeye başladı.

LCP, web sitesinin yüklenmesiyle ilgilidir. Bundan dolayı bir sitenin Google tarafından nasıl analiz edildiği çok önemlidir. Ayrıca sitenin Google sıralamasını da etkileyen bir kavramdır. Largest Contentful Paint, web sitelerinde kullanıcıları daha uzun zaman tutmayı amaçlar. LCP, puanlama sistemiyle ele alınır. Saniye cinsinden ölçülen LCP değerleri şöyle ele alınır;

• 4 saniyeden fazla: Kötü
• 2,5 saniyeden az (mobil): İyi
• 1,2 saniyeden az (masaüstü): İyi
• 2,5-4 saniye: Geliştirilmeli

LCP’nin zayıf olmasının sebepleriyse şu şekildedir;

• İstemci tarafının oluşturulması,
• Yavaş sunucu yanıt süreleri,
• Yavaş kaynak yükleme süreleri,
• CSS ve JavaScript gibi oluşturmayı engelleyen kavramlar.

Largest Contentful Paint (LCP) Nasıl Ölçülür?

LCP’nin ölçülebilmesi için birden çok araç bulunmaktadır. Araçlardan bazıları “lab tools” diğeriyse “field tools” kategorisinde yer alıyor.

1. Lab Tools

• WebPageTest
• Lighthouse
• Chrome DevTools

Lab Tools kategorisi içerisinde yer alan araçlar; farklı algoritmalardan yararlanılarak sahte taramaya yönelik sanal puan vermektedir. Bir web sitesi sahibi LCP değerini ölçmek için ücretsiz olarak yukarıdaki araçlardan yararlanabilir.

2. Field Tools

• Chrome User Experience Report
• PageSpeed Insights
• Search Console

Fields Toold, web sitelerini gerçek anlamda ölçümler.

3. Search Console (Core Web Vitals Report)

Search Console; Google’a ait üç temel metriğini ölçüyor. Search Console; CLS, LCP ve FID ölçümleriyle yapılır. Web sitelerine ait URL adresine giriş yapılır. Daha sonra ortaya çıkan analizlerin ardından web sitesinin seviyesi belirlenmiş olur.

4. PageSpeed Insights

LCP puanının ölçülmesi için web sitesinin URL adresine girilir. Ardından web site, PageSpeed Insights tarafından analiz edilir. Site ve sitenin içerisindeki içerikler analiz edilip sonrasında sonuçlar sekmesi üzerinden LCP puanı görüntülenebilir. Bu araç web sitesini analiz ettikten sonra LCP puanının iyileştirilmesi için kullanıcıya farklı farklı önerilerde bulunur.

5. Lighthouse

Tüm web sitelerinde çok rahat Lighthouse kullanılabilir. Lighthose; açık ve otomatik kaynak araç olarak biliniyor. SEO, site performansı ve erişilebilirlik gibi birçok konuyla alakalı denetim yürütme seçenekleri oluşturuyor.

Largest Contentful Paint (LCP) Nasıl Optimize Edilir?

LCP’nin optimize edilmesi aşağıdaki adımlara dikkat etmek gerekiyor:

1. Sunucular Optimize Edilmeli

Web sitesinde kullanılan sunucunun yanıt süresi yavaşsa içerikler tarayıcıya uzun sürede iletilir. Aynı zamanda kullanıcı ekranında sergilenmesi de çok uzun sürer. Sunucuların yavaş olmasından kaynaklı olarak web sitesi içerikleri zor yüklenir. Sunucular şöyle optimize edilebilir;

• Daha çok CPU, bellek gibi kavramlara ulaşabilmek için sunucu donanımı yükseltilmelidir.
• Web sitelerinin daha çok hızlandırılması içinde sunucuların uygulamaları optimize olmalıdır.
• Sunucuların veri tabanlarının sorgulama şekilleri de optimize edilmelidir. Farklı veri tabanlarına da geçiş yapılabilir.

2. Önbellek Alma İyileştirilmeli

Tarayıcı; resimleri, JavaScript, CSS vb. statik varlıkları depolamalıdır. Tarayıcı, statik varlıkları yerel önbellek üzerinden alarak sayfa hızı yükseltilir.

3. İçerik Dağıtım Ağı (CDN) Kullanılmalı

Web sitelerinde içeriklerin dağıtımı için CDN kullanılmalıdır. CDN; JavaScript, CSS, resimler vb. statik dosyaları öncelikle alır. Daha sonra dosyaları, kullanıcıların fiziksel konumuna yakın sunucularla dağıtır. CDN sayesinde merkezi sunucunun yükü azaltılmış olur.

4. Multimedya Optimize Edilmeli

LCP’nin optimize edilmesi için videolarla resimler ele alınmalıdır. Web sitesinin hızlıca yüklenebilmesi için görsel öğeler hızlıca kaydedilir. Ağır ögeler en küçük düzeyde sıkıştırılmalıdır.

Srcset, video gömme ve tembel yükleme özellikleri kullanılmalıdır. Görsel ögeler; Kraken, Tiny PNG gibi araçlarla optimize edilmelidir.

6. Sunucu-İstemci Tarafının İşlemesi

Web siteleri üzerinde LCP’nin iyileştirilmesi için sunucu oluşturma deneyimleri aktif hale getirilebilir. Böyle durumlarda sayfada yer alan ana içerik sunucu üzerinde işlenmeye başlar.

7. Kod Küçültülmeli

LCP değerinin iyileştirilmesi için kod küçültülmelidir. Kodun küçültülmesi için tarayıcı tarafından kullanılmayan CSS’ler kaldırılmalıdır. Ayrıca başka stil sayfasına da taşınabilir. HTML kodlarından dağınık, karmaşık olanlar kaldırılması da gerekiyor. JavaScript dosyalarında küçültme ve sıkıştırılma işlemi yapılabilir.