Genel Bakış
En Büyük İçerikli Boyama (LCP), kullanıcılar için algılanan yükleme deneyimini daha iyi ölçmek için 2020’de Lighthouse tarafından sunulan bir performans metriğidir.
En basit ifadeyle, LCP, sayfanızdaki en büyük “içerik öğesinin” (örneğin kahraman resmi, başlık metni, vb.) ziyaretçinizin görüş alanında görünmesinin ne kadar sürdüğünü ölçer.
LCP, Google’ın Önemli Web Verileri’ni oluşturan ölçümlerden biridir. Önemli Web Verileri hakkında daha fazla bilgiyi buradan edinebilirsiniz.
En Büyük Zengin İçerikli Boyama Neyi Ölçer?
Google’a göre,
“LCP, algılanan yükleme hızını ölçmek için önemli bir kullanıcı merkezli metriktir, çünkü sayfanın ana içeriği büyük olasılıkla yüklendiğinde sayfa yükleme zaman çizelgesinde noktayı işaretler- hızlı bir LCP, kullanıcının sayfanın yararlı olduğundan emin olmasına yardımcı olur.”
Temel olarak LCP, web sayfanızdaki önemli içeriğin ziyaretçileriniz tarafından ne kadar hızlı tüketilebileceğini ölçer.
Varsayım, bir resim galerisi veya kahraman kişi resmi gibi sayfanızdaki en büyük içerik öğesinin yüklenmesinin, ziyaretçileriniz için sayfanızın ne kadar hızlı yüklendiğine dair önemli bir gösterge olacağıdır.
Aşağıdaki resim ilk boyamayı (First Paint – FP), ilk zengin içerikli boyamayı (FCP) ve en büyük zengin içerikli boyamayı (LCP) göstermektedir.
LCP, sayfanızdaki en büyük içerik öğesinin ne kadar hızlı yüklendiğini ölçer.
“İçerik öğesi”, aşağıdakiler gibi herhangi bir HTML öğesidir:
- Bir görüntü öğesi
- Bir video öğesi
- URL işlevi ile yüklenen arka plan resmine sahip öğe (CSS’de yerine)
- < h1 >, < h2 >, < div >, < ul >, < table > vb. blok düzeyindeki öğeler
GTmetrix gibi ölçüm araçları, ekranın üst kısmındaki en büyük içerik öğesinin sayfanıza ne kadar hızlı boyandığını ölçer.
Benzer yapılara sahip web siteleri, en büyük içerik öğesi sayfadan sayfaya farklılık göstereceğinden, LCP ölçüsünde çok farklı puanlar alabilirler.
LCP, tek yapmanız gereken web sayfanıza bakmak, en büyük metin bloğunu veya resmi belirlemek ve ardından yükleme süresini optimize etmek olduğundan dolayı anlaşılması kolay bir ölçümdür.
En Büyük İçerikli Boyama’nın Performans Puanınızda Etkisi
Bir Önemli Web Verileri (Web Vitals) ölçümü olarak LCP, Performans Puanının %25’ini oluşturur.
Ve bu da onu optimize edilmesi gereken en önemli ölçümlerden biri yapar.
İlk Zengin İçerikli Boyama (First Contentful Paint – FCP) veya İlk Bayta Kadar Geçen Süre (Time-to-First-Byte – TTFB) gibi diğer ölçümler, sayfa hızı bağlamında alakalı olmaya devam ederken, LCP, web sitenize erişirken ziyaretçilerinizin gerçek dünyadaki beklentilerini daha iyi temsil eder.
Daha hızlı bir LCP, sayfanızın daha hızlı yüklendiği izlenimini verir.
Yukardaki resimde yeşil web sitesi, kırmızı web sitesine göre 0,2 saniyede görsel olarak daha eksiksiz görünüyor.
Bunun sizin için anlamı şudur:
LCP’nizi optimize etmek, genellikle hem Performans Puanı hem de ziyaretçilerinizin performans algısı açısından sitenizin web performansında en büyük artışı sağlayabilir.
En Büyük Zengin İçerikli Boyama İçin Eşikler
LCP için GTmetrix ölçüm aracındaki eşikler, ziyaretçinin görüş alanında görülebilen en büyük resmin veya metin bloğunun oluşturma süresiyle (saniye cinsinden) ölçülür.
LCP metriğinin GTmetrix’de eşikleri aşağıdaki gibidir:
- İyi – burada yapılacak bir şey yok (1200 milisaniye veya daha az)
- Tamam, ancak iyileştirmeyi düşünün (1200 ile 1666 milisaniye arasında)
- Önerilenden daha uzun (1666 ve 2400 milisaniye arasında)
- Önerilenden çok daha uzun (LCP 2400 milisaniyeden yüksek)
Google perspektifi ise şöyledir:
İyi bir kullanıcı deneyimi sağlamak için, siteler 2,5 saniye veya daha kısa En Büyük İçerikli Boyama değerine sahip olmaya çalışmalıdır.
Çoğu kullanıcınız için bu hedefi tutturduğunuzdan emin olmak için ölçmek için iyi bir eşik, mobil ve masaüstü cihazlarda bölümlere ayrılmış sayfa yüklemelerinin yüzde 75’lik dilimidir.
Aşağıda resimle gösterilmiştir:
- 2.5 saniyeden az ise İYİ (yeşil renk)
- 2.5 saniye ile 4 saniye arasında ise GELİŞMEYE AÇIK (kavuniçi rnek)
- 4 saniyeden büyük ise ZAYIF (kırmızı renk)
Yapı Sekmesindeki En Büyük Zengin İçerikli Boyama Öğesi
GTmetrix’de raporun Yapı sekmesinde, GTmetrix’in sayfanızdaki en büyük içerik öğesi olarak algıladığını görebilirsiniz.
“En Büyük Zengin İçerikli Boya Öğesi” denetimi altında listelenmiştir.
Bu denetimin tamamen bilgilendirme amaçlı olduğunu ve Performans veya Yapı Puanınıza katkıda bulunmadığını unutmayın.
En Büyük Zengin İçerikli Boyama Nasıl İyileştirilir?
Aşağıda belirtilen belirli denetimlerin muhtemelen LCP metrik değerinize en çok katkıda bulunduğunu unutmayın.
Ancak sayfanızın LCP zamanlaması, burada bahsedilmeyen diğer optimizasyonlardan da etkilenebilir.
Aşağıdakiler gibi iyi web geliştirme uygulamalarını dahil ederek LCP zamanlamanızı iyileştirin (yani azaltın):
- Sunucu yanıt süresini azaltılma
Sunucu yanıt süresinin azaltılması, kaynakların daha hızlı yüklenmesine ve sayfanızda hızlı bir LCP süresi sağlanmasına yardımcı olur.
Burada yapabileceğiniz şeylerden bazıları şunlardır:
- İlk sunucu yanıt süresinin azaltılması
- Bir İçerik Dağıtım Ağı (CDN) kullanma
- Statik varlıkları verimli bir önbellek politikasıyla sunma
- Önemli üçüncü taraf eklentileriyle erken bağlantılar kurma
- Oluşturmayı engelleme davranışını ortadan kaldırılma
Sayfanızdaki oluşturmayı engelleme davranışını ortadan kaldırmak, kaynakların olabildiğince hızlı yüklenmesini sağlar.
Diğer blog yazılarımızda daha detaylı bilgi veriyoruz.
- Resimleri ve videoları optimize etme
Resimleri ve videoları yüklemek için harcanan zamanı azaltmak için sayfanızdaki resim ve video sunumunu optimize edin.
Yapabileceğiniz şeylerden bazıları şunlardır:
- Resimleri doğru şekilde boyutlandırma
- Görüntüleri verimli bir şekilde kodlama
- CSS birleşmesi kullanarak görüntüleri birleştirmek
- Görüntüleri yeni nesil formatlarda sunmak
- Canlandırmalı içerik için video formatlarını kullanmak
Önemli web verileri konusunda diğer yazılarımızdan örnek:
Siz de fikrinizi belirtin