LCP (Largest Contentful Paint) Nedir?

Bugün LCP (Largest Contentful Paint) Nedir? sorusuyla 2021’de sıralama faktörü haline gelen bir metriğe yakından göz atmayı amaçlıyoruz.

Bilindiği üzere Google, kullanıcı deneyimini ölçmek ve daha anlaşılır kılmak için Web Vitals denen standartlaştırılmış metrikler kullanmaktadır. Eskiden web sitelerini değerlendirmemiz için bir yol gösterici olan bu metriklerin bazıları geçtiğimiz yaz itibariyle Google sıralamalarını doğrudan etkilemeye başlamıştır. Bu nedenle kısa sürede fark edilebilir kullanıcı deneyimi iyileştirmeleri sağlamak ve zaman içinde SERP sıralamalarınızı tatmin edici bir seviyeye çıkarmak istiyorsanız bu metrikleri optimize etmeniz önerilir.

Largest Contentful Paint Nedir?

LCP, bir sayfanın ana içeriğinin indirilmesinin ve etkileşime hazır hale gelmesinin ne kadar sürdüğünün göstren Core Web Vitals metriğidir. LCP ile ölçülen, kullanıcının görünüm alanı içindeki en büyük görsel veya içerik bloğudur. Ekranın dışında kalanlar ölçüme dahil değildir ancak ekranın dışında kalan ama görünüm alanında başlayan öğeler, hesaplamada kullanılır. En Büyük İçerikli Boya anlamına gelen LCP hesaplanırken başlık, div, form öğeleri kullanılabilir.

Bir sayfanın genel hızı iyi olsa da LCP değeri düşükse, kullanıcıların en büyük ve muhtemelen en önemli içeriğin yüklenmesini beklemesi uzun sürecektir. Bunun için görsel optimizasyon tekniklerini kullanmak, JavaScript ve CSS’yi küçülterek kod şişmesini azaltmak, içerik dağıtım ağı (CDN) ve sunucu tarafı önbelleğe alma gibi uygulamalarla sunucu yanıt sürelerini iyileştirmek gibi yöntemler önerilir.

LCP Nasıl Ölçülür?

4 saniyeden uzun süren yükleme süresi ziyaretçileri kaçırır.

LCP değeriniz öğrenmek için iki tür puanlama aracı söz konusudur: Sitenizi ziyaret eden gerçek kullanıcılardan toplanan verilere dayanan PageSpeed Insights ya da Search Console (Core Web Vitals Raporu), Chrome User Experience Report gibi alan araçları ve bazı algoritmalar kullanarak önceden tanımlanmış cihaz ve ağ ayarlarıyla kontrollü bir ortamda toplanan verileri sunmaya çalışan WebPage Test, ChromeDev Tools, Lighthouse gibi laboratuar araçları.

Ancak bazen lab verileri ile alan verileri arasında belirgin farklar görülebilir. Bunun nedeni alan verilerinin çeşitli ağ ve cihaz koşullarına ek olarak sayısız kullanıcı davranışı, tarayıcı optimizasyonu gibi kullanıcı deneyimini etkileyen faktörler içermesidir. Alan araçlarını kullanarak elde ettiğiniz veriler, gerçek web ziyaretçilerinin gerçek yaşam deneyimlerinin bir sonucudur. Bu kullanıcıların hepsinin farklı internet bağlantı hızları, donanımları, bellekleri, GPU’ları, CPU’ları, gecikmeleri, konumları vardır ve bunların tümü, puanlardaki eşitsizliklere katkıda bulunmada rol oynar.

Buna karşılık, laboratuvar verileri ilgili değişkenlerin sayısını kasıtlı olarak sınırlar. Dolayısıyla laboratuar koşulları ile gerçek dünyadaki çoğu kullanıcının koşulları arasında kopukluk görülebilir. Örneğin kişileştirmeler nedeniyle kullanıcının sistemine yüklenen yazı tipi, sayfadaki metnin boyutunu ya da hangi öğenin LCP öğesi olduğunu etkileyebilir. Ayrıca iyi optimize edilmiş önbellek yapılandırmalarına sahip sitelerde, gerçek dünyadaki LCP değerleri laboratuvar verilerinin gösterdiğinden çok daha iyi olabilir.

İyi bir kullanıcı deneyimi sağlamak için web sitenizde 2,5 saniye veya daha kısa bir LCP değerine sahip olmaya çalışmalısınız. Sayfa yüklemelerinizin çoğu bu eşiğin altında gerçekleşmelidir.

Distribution of LCP scores in the field

Yandaki örneği şu şekilde yorumlayabiliriz: Ziyaretçilerin %88’i 2,5 saniye veya daha kısa sürede, %8’i 2,5 ila 4 saniye arasında ve
%4’ü 4 saniyeden uzun bir sürede en büyük içerikli ögeyi görmüştür.

Kullanıcı deneyimini, dönüşüm oranlarını iyileştirmek ve hemen çıkma oranlarını azaltmak için Google, web sitenizde geçirilen zamanın en az %75’inde 2.5 saniyelik LCP değeri hedeflemenizi önermektedir.

LCP’nin Diğer Web Vitals Metriklerinden Farkı

Web Vitals metrikleri, Core Web Vitals ve non-Core Web Vitals olmak üzere ikiye ayrılır:

Core Web Vitals (CWV)

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)

Non-Core Web Vitals

  • Total Blocking Time (TBT)
  • First Contentful Paint (FCP)
  • Speed Index (SI)
  • Time to Interactive (TTI)

Google, Haziran 2021’den bu yana CWV’yi sıralama faktörü olarak kullanmaktadır. Google’ın amacı yükleme hızı ve etkileşimi vurgulayarak kullanıcı deneyimini ön plana çıkarmaktır.

LCP, bir web sayfasının ne kadar hızlı kullanılabileceğini doğru bir şekilde ölçtüğü için Core Web Vitals setindeki 3 temel metriğe dahil edilmiştir.

LCP, en büyük içerik bloğunun veya içerik öğesinin görünüm alanında görünür hale gelmesi için geçen süreyi ölçer. TBT ve FID, web sayfalarının tepkiselliğini değerlendirirken kullanılır. Yükleme sırasında mizanpajın ne kadar değiştiğini analiz ederek bir sayfanın görsel kararlılığını ölçen metrik ise CLS’dir. TTFB ve First Contentful Paint gibi diğer metrikler de sayfa deneyimini ölçmeye yardımcı olur ancak sayfanın kullanıcı için ne zaman “anlamlı” hale geldiğini göstermezler. Sayfadaki en büyük öğe tamamen görünür hale gelmedikçe, sayfa kullanıcı için çok fazla anlam sağlamayabilir.

İlk bayta kadar geçen süre (TTFB), bir web sunucusunun yanıt verme hızının ölçer. TTFB’yi azaltmak, sayfa yükleme sürelerini optimize etmeye ve FCP, LCP gibi diğer sayfa hızı metriklerini iyileştirmeye yardımcı olur.

First Paint ve First Contentful Paint Arasındaki Fark Nedir?
FCP’yi yorumlarken LCP ve FP ile birlikte analiz etmeniz önerilir.

İlk Boyama anlamına gelen First Paint (FP), ilk pikselin ekranda görüntülendiği, içerikli olsun ya da olmasın, tarayıcının ilk bilgi baytlarını oluşturduğu zamandır. İlk İçerikli Boyama anlamına gelen FCP ise bir arka plan resmi ya da bir metin parçası gibi kullanıcının içerik olarak tüketebileceği öğelerin görüntülendiği ana odaklanır.

FCP; sayfada ilk öğenin göründüğü ana kadar geçen süreyi ölçer ve yükleme deneyimi açısından kritik bir değerdir. FCP; LCP ile ilgili sorunları teşhis etmede kullanılır. FCP ( First Contentful Paint ) şu anda Core Web Vitals metriklerine dahil olmasa da algılanan yükleme süresi için önemli bir göstergedir ve ileride Core Web Vitals setine dahil edeceğini öngörülmektedir.

LCP, Performans puanının %25’ini oluşturur ve bu da onu optimize edilmesi gereken en önemli metriklerden biri yapar.

LCP, FID ve CLS için sıfıra yakın değerlere ulaşılmalıdır. Aksi sayfa deneyiminin kötü olması anlamına gelir, bu da yüksek hemen çıkma oranlarına , düşük dönüşüm oranlarına ve daha düşük SERP sıralamasına yol açar.

Özetle, web vitals metrikleri bir bütün olarak, sayfada gezinmeyi keyifli hale getiren detaylara ışık tutar. En önemli içeriği yüklemesi uzun süren, ilk etkileşimlerinize hemen yanıt vermeyen ve mizanpajda kaymaları olan bir sayfa kullanıcılara hitap etmez. Tüm bu metriklerin tam olarak ne amaçla kullanıldığını ve nasıl iyileştirileceğini öğrenmek için aşağıdaki yazılarımıza göz atabilirsiniz:

LCP Skoru Nasıl İyileştirilebilir?

Bir web sayfasındaki en büyük metin bloğunun ya da görselin hızlı bir şekilde indirilmesini engelleyen şeyleri ortadan kaldırmak LCP değerini optimize etmek için yeterlidir. Çünkü LCP iyileştirme için önerilen tüm tekniklerin altında yatan ilke, kullanıcının cihazına indirilen verileri azaltmak, içeriği göndermek ve yürütmek için gereken süreyi azaltmaktır. Bunun için genellikle önbelleğe alma, görüntüleri optimize etme, oluşturmayı engelleyen CSS ve JavaScript’i düzeltme ve belirli ögeleri önceden yükleme gibi öneriler sunulur.

Görseller

Web yayıncıları çoğu zaman görüntüleri orijinal boyutlarında yükler ve ardından daha küçük boyutta görüntülemek üzere görüntüyü yeniden boyutlandırmak için HTML veya CSS kullanır. Google, görsel boyutunu hesaplamak amacıyla, gerçek ve görünür boyuttaki görseller arasında hangisi daha küçükse onu kullanır. Orijinal boyut, Google’ın görüntünün “gerçek” boyutu olarak adlandırdığı şeydir. Ancak görüntünün gerçek boyutunun görünür boyutla eşleşmesini sağlamak önemlidir. Böylece resim daha hızlı indirilecek ve En Büyük İçerikli Boya değeriniz yükselecektir.

Tarayıcının, görsel açıdan LCP’yi etkileyen önemli bir kaynağı yüklemeye öncelik vermeyebileceği bazı durumlar söz konusudur. Örneğin, ekranın üst kısmındaki bir banner, bir CSS dosyası içinde arka plan resmi olarak belirtilebilir. Tarayıcı, CSS dosyası indirilene kadar ve DOM ağacıyla birlikte ayrıştırılana kadar bu görüntüyü asla bilemeyeceğinden, onu yüklemeye öncelik vermez. Bunun için, HTML belgenizin head bölümüne rel= “preload” etiketi ekleyerek bu tür kaynakları önceden yükleyebilirsiniz.

Sunucu Yanıt Sürelerini İyileştirmek

Sunucunuzun bir isteğe yanıt vermesi uzun sürüyorsa, sayfayı ekranda oluşturma süresi de artacaktır. Bu, LCP dahil tüm sayfa hızı metriklerini olumsuz etkiler. Sunucu yanıt sürelerini iyileştirmek için aşağıdaki noktalara dikkat etmeniz önerilir:

  • Sunucuda çok sayıda hesaplama, DB sorgusu ve sayfa oluşturma işlemleri gerçekleşir. Sunucularınıza gelen istekleri analiz etmeniz bu nedenle önemlidir. Sunucunuzun isteklere yanıt vermesi için geçen süreyi azaltmak için DB yanıtlarının önbelleğe alınması, sayfaların önceden oluşturulması gibi önerileri uygulayabilirsiniz. Bu öneriler yanıt süresini iyileştirmezse, gelen isteklerin sayısını işlemek için sunucu kapasitenizi artırmanız gerekebilir.
  • İçerik dağıtım ağı (CDN) kullanabilirsiniz.
  • Ekranın üst kısmındaki JS, CSS ya da resimler gibi kritik içeriği sunmak için üçüncü taraf domainler söz konusuysa, tarayıcıya mümkün olan en kısa sürede söz konusu alan adıyla bağlantının yapılması gerektiğini belirtmeniz önerilir. Bu, rel=”preconnect” etiketi kullanılarak yapılır. Ana web sitenizin alt alan adları da üçüncü taraf domain olarak kabul edilir.
  • Service Worker tarayıcınızın bir web sayfasından ayrı olarak arka planda çalıştırdığı, web sayfası veya kullanıcı etkileşimi gerektirmeyen özelliklere kapı açan bir komut dosyasıdır. Service Worker kullanmak kullanıcının cihazındaki statik varlıkları ve HTML yanıtlarını önbelleğe almamıza ve bunları ağa gitmeden sunmamıza olanak tanır. Service Worker önbelleği, HTTP veya tarayıcı önbelleği ile aynı amaca hizmet eder ve ayrıntılı kontrol sunar. Kullanıcı çevrimdışı olsa bile çalışabilir. Önbellekten önceden önbelleğe alınmış içeriği kullanıcılara düşük ağ hızlarında sunmak ve böylece LCP süresini azaltmak için kullanabilirsiniz.
  • Metin dosyalarını sıkıştırmak sayfa yüklendiğinde indirilecek veri miktarını önemli ölçüde azaltır, dolayısıyla LCP’yi düşürür.
  • Oluşturmayı engelleyen kaynakları kaldırmak bir diğer öneridir. Tarayıcı, HTML sayfasını sunucunuzdan aldığında, DOM ağacını ayrıştırır. DOM’da herhangi bir harici stil sayfası veya JS dosyası varsa, kalan DOM ağacının ayrıştırılmasına geçmeden önce tarayıcının bunlar için duraklaması gerekir. Bu JS ve CSS dosyalarına oluşturma engelleme kaynakları denir ve LCP süresini geciktirir.

JS ve CSS Dosyaları İçin Engelleme Süresini Azaltmak

  • Gereksiz paketleri yüklememeniz önemlidir. Çok büyük JS ve CSS dosyalarını gerekmedikçe tarayıcıya göndermekten kaçınmalısınız. CSS çok daha sonra indirilebiliyorsa veya belirli bir sayfada bir JS işlevi gerekmiyorsa, onu önden yüklemek ve tarayıcıda oluşturmayı engellemek için hiçbir neden yoktur. Erteleme özniteliği eklemek, DOM ayrıştırma için herhangi bir engelleyiciyi kaldırır ve LCP düşer.
  • Kritik CSS, sayfanızın ilk katında görünen DOM için gereken stil tanımlarını içerir. Sayfanın bu bölümü için stil tanımları satır içi ise, yani her öğenin stil özelliğindeyse, tarayıcının bu öğeleri stillendirmek için harici CSS’e bağımlılığı söz konusu değildir. Bu nedenle sayfayı hızlı bir şekilde oluşturabilir ve LCP değeri düşer.

  • İçeriği küçültmek ve sıkıştırmak da tavsiyeler arasındadır. CSS ve JS dosyaları, okunaklı olmaları için boşluklar içerir, ancak bunlar kod yürütme için gereksizdir. Bunları kaldırabilirsiniz. Daha küçük dosya boyutu, dosyaların hızlı bir şekilde yüklenebileceği ve LCP sürenizin azalacağı anlamına gelir.
  • Tarayıcıya gönderilen Javascript’i optimize etmezseniz, kullanıcı; Javascript indirilip çalıştırılana kadar sayfadaki herhangi bir içeriği göremeyebilir veya bunlarla etkileşime geçemeyebilir.

İstemci Cihazlarda Oluşturmayı Optimize Etmek

  • Tüm JS’yi istemci tarafına göndermek ve tüm oluşturmayı orada yapmak yerine, sayfayı dinamik olarak sunucuda oluşturabilir ve ardından ziyaretçinin cihazına gönderebilirsiniz. Bu, sayfanın oluşturulması için gereken süreyi artıracak, bir sayfanın tarayıcıda etkin hale getirilmesi için gereken süreyi azaltacaktır. Ancak, aynı sayfa için hem istemci tarafı hem de sunucu tarafı çerçevelerini sürdürmek zaman alıcı olabilir.
  • Ön işleme, sunucunun sayfayı oluşturmasını sağlayan farklı bir tekniktir. Oluşturulan sayfa, derleme döngüsü sırasında bir kez depolanır ve ardından gelen her istek, sunucuda herhangi bir hesaplama olmaksızın önceden oluşturulmuş sayfayı kullanır. Bu hızlı bir yükleme süresi sağlar. TTFB’yi iyileştirir. Ancak, sayfanın etkileşimli hale gelmesi için JS’nin indirmesini beklemesi gerektiğinden etkileşim yine de etkilenebilir. Ayrıca, bu teknik sayfaların önceden oluşturulmasını gerektirdiğinden, çok sayıda sayfanız varsa ölçeklenebilir olmayabilir.

Özet

En Büyük İçerikli Boyama – LCP, ziyaretçinin görünüm alanındaki en büyük içerik öğesinin görünür hale geldiği anı ölçer. Güçlü bir LCP puanı, Google’a kullanıcıların web sitenizde kolaylıkla gezinebileceğini söyler.

LCP’yi içeren Temel Web Verileri, artık sıralama faktörü haline geldiğinden kullanıcı deneyimine odaklanıp LCP (Largest Contentful Paint) Nedir? sorusunun araştırılması SERP sıralaması ve dönüşüm oranları açısından önem arz etmektedir.