Core Web Vitals ölçümü, LCP’nin bir sayfanın temel içeriğinin indirilmesine ve etkileşime hazır hale gelmesinin ne kadar sürdüğünü gösterir. Kullanıcının görünüm alanı içinde LCP ile ölçülen en büyük görsel veya içerik bloğudur. Ekranın dışında kalan ama görünüm alanında başlayan ögeler, hesaplamada kullanılabilir fakat ekranın dışında kalanlar ölçüme dâhil değildir. LCP en büyük içerik boya anlamına gelir. Hesaplanırken başlık, div, form ögeleri kullanılmaktadır.
LCP değeri düşük olursa sayfanın genel hızı iyi olsa da kullanıcılar en büyük ve muhtemelen en önemli içeriğin yüklenmesi uzun sürecektir. Bu yüzden sunucu tarafı önbelleğe alma, görsel optimizasyon tekniklerini kullanmak, JavaScript ve CSS’yi küçülterek kod şişmesinin azaltmak, içerik dağıtım ağı (CDN) gibi uygulamalarla sunucu yanıt sürelerini iyileştirmek gibi yöntemler önerilir.
LCP Nasıl Ölçülür?
PageSpeed Insights ya da Search Console (Core Web Vitals Raporu), Chrome User Experience Report gibi alan araçları ziyaret eden gerçek kullanıcılardan toplanan verilere dayanır 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 alan verileri ve lab verileri arasında bazı farklar görülebilir. Nedeni ise kullanıcı deneyimini etkileyen faktörler içermesidir. Örneğin; alan verilerinin çeşitli ağ ve cihaz koşullarına ek olarak sayısız kullanıcı davranışı, tarayıcı optimizasyonu içermesidir. Gerçek web ziyaretçilerinin gerçek yaşam deneyimlerini sonucu olan alan araçları kullanarak elde ettiğimiz verilerdir. Puanlardaki eşitsizliklere katkıda bulunmada rol oynayan bazı faktörler vardır, bunlardan bazıları kullanıcıların hepsinin farklı internet bağlantı hızları, donanımları, bellekleri, GPU’ları, CPU’ları, gecikmeleri, ve konumları vardır.
Bu nedenle laboratuvar verileri ilgili değişkenlerin sayısını kasıtlı olarak sınırlar. Sonuç olarak gerçek dünyadaki çoğu kullanıcının koşulları ve laboratuvar koşulları arasında kopukluk görülebilir. Hangi öğenin LCP öğesi olduğunu, sayfadaki metnin boyutunu veya kişileştirmeler nedeniyle kullanıcının sistemine yüklenen yazı tipi etkileyebilir. LCP değerleri, laboratuvar verilerinin gösterdiğinden ve iyi optimize edilmiş önbellek yapılandırmalarına sahip sitelerden çok daha iyi olabilir.
Web sitenizde iyi bir kullanıcı deneyimi sağlamak için 2, 5 saniye veya daha kısa bir LCP değerine sahip olmaya çalışmalısınız. Sayfa yüklemelerinizin çoğu bu sınırın altında gerçekleşmelidir.
Google, web sitenizde geçirilen zamanın en az %75’inde 2. 5 saniyelik LCP değeri hedeflemeniz, kullanıcı deneyimini, dönüşüm oranlarını iyileştirmek ve hemen çıkma oranlarını azaltmak için yapılmalıdır.
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)Haziran 2021’den bu yana Google, CWV’yi sıralama faktörü olarak kullanmaktadır. Google’nın hedefi yükleme hızı ve etkileşimi vurgulayarak kullanıcı deneyimini ön plana çıkarmaktır.
Bir web sayfasının ne kadar hızlı kullanılabileceğini doğru bir şekilde ölçen LCP Core Web Vitals setindeki 3 temel metriğe dâhil edilmiştir.
LCP, içerik öğesinin görünüm alanında görünür hale gelmesi için geçen süreyi veya en büyük içerik bloğunu geçen süreyi ölçer. Web sayfalarının tepkiselliğini değerlendirirken TBT ve FID kullanılır. CLS, 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 metriktir. TTFB ve Firts Contentful Paint diğer metrikler de sayfa deneyimini ölçmeye yardımcı olur ama sayfanın kullanıcı için ne zaman “anlamlı” hale geldiğini gösteremezler. Eğer sayfadaki en büyük öge tamamen görünür hale gelmez ise sayfa kullanıcı için çok fazla anlam sağlamayabilir.
TTFB, ilk bayta kadar geçen süre, bir web sunucusunun yanıt verme hızını ölçer. TTFB, sayfa yükleme sürelerini optimize etmeyi azaltmak için FCP ve LCP gibi diğer sayfa hızı metriklerini iyileştirmeye yardımcı olur. First Paintt (FP) ilk boyama anlamına gelen, içerikli olsun ya da olmasın, tarayıcının ilk bilgi baytlarını oluşturduğu, ilk pikselin ekranda görüntülendiği zamandır.
Bir arka plan resmi ya da bir metin parçası gibi kullanıcının içeriği olarak tüketebileceği ögelerin görüntülendiği ana odaklanan FCP, ilk boyama anlamına gelir.
Sayfada ilk ögenin görüldüğü ana kadar geçen süreyi ölçen FCP aynı zamanda yükleme deneyimi açısından kritik bir değerdir. LCP ile ilgili sorunları teşhis etmede FCP kullanılır. FCP ( First Contentful Paint ) şu anda Core Web Vitals metriklerine dâhil olmasa da algılanan yükleme süresi için önemli bir göstergedir. İleride Core Web Vitals setine dâhil edeceğini öngörülmektedir.
LCP sıfıra yakın değerlere FID ve CLS için ulaşılmalıdır. Aksi sayfa deneyiminin kötü olması anlamına gelir. Bu nedenle yüksek hemen çıkma oranlarına, düşük dönüşüm oranlarına ve daha düşük SERP sıralamasına yol açar.
Kısacası, 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ürer ve ilk etkileşimlerinize hemen yanıt vermeyen, mizanpajda kaymaları olan bir sayfa kullanıcılara hitap etmez.
LCP Skoru Nasıl İyileştirilebilir?
Bir web sayfasındaki en büyük metin bloğunun veya görselin hızlı bir şekilde indirilmesini izin vermeyen şeyleri ortadan kaldırmak LCP değerini optimize etmek için yeterlidir. Bu yüzden LCP iyileştirme için öne sürülen tüm tekniklerin altında yatan ilke, kullanıcının cihazına indirilen verileri en aza indirmek, içeriği göndermek ve ileri sürmek için gereken süreyi azaltmaktır. Bu yüzden çoğunlukla ö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 sürülür.
Görseller
HTML ve CSS web yayıncıları çoğu zaman görüntüleri orijinal boyutlarında yükler ve sonrasında daha küçük boyutta görüntülemek üzere görüntüyü yeniden boyutlandırmak için kullanılır. Görsel boyutunu hesaplamak amacıyla, gerçek ve görünür boyuttaki görseller arasında hangisi daha küçükse onu Google kullanır. Google’ın görüntünün Orijinal boyutu “gerçek” boyutu olarak adlandırdığı şeydir. Ama 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.
LCP’yi etkileyen tarayıcının görsel açıdan önemli bir kaynağı yüklemeye öncelik vermeyebileceği bazı hususlar söz konusu olabilmektedir. Bunlar, ekranın üstünde yer alan bir banner, bir CSS dosyası içinde arka plan resmi olarak gösterilebilir. CSS tarayıcı dosyası tarafından indirilene kadar ve DOM ağacıyla birlikte ayrıştırılana kadar bu görüntüyü hiçbir zaman bilemeyeceğinden, onu yüklemeye öncelik vermez. HTML belhenizin head bölümüne rel=”preload ”etiketi ekleyerek bu tür kaynakları önceden indirebilirsiniz.
Sunucu Yanıt Sürelerini İyileştirmek
Sunucunuzun bir isteğe yanıt vermesi uzun sürüyor ise ekrandaki sayfayı işlemesi daha da uzun sürer. LCP dahil tüm sayfa hızı ölçümlerini olumsuz etkiler. Yanıt sürelerini sunucular iyileştirmek için aşağıdaki noktaları göz önünde bulundurmak isteyebilirsiniz:
- Sunucuda birçok hesaplama, DB sorgusu ve sayfa oluşturma işlemleri gerçekleşir. Bu nedenle sunucularınız için istekleri analiz etmek önemlidir. Sunucunuzun isteklere yanıt vermesi için geçen süreyi azaltmak için DB yanıtlarını önbelleğe alma, sayfaları ön işleme vb. gibi öneriler 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.
- JS, CSS veya en üstte bulunan görseller gibi kritik içerikleri sunacak üçüncü parti domainler söz konusu olduğunda, aynı alan adıyla bağlantının bir an önce yapılması gerektiğini tarayıcıya belirtmeniz tavsiye edilir. Bu, rel = "preconnect" etiketi kullanılarak yapılır. Ana sitenizin alt alanları da üçüncü taraf domain olarak kabul edilir.
- Service Worker, tarayıcınızın bir web sayfasından ayrı olarak arka planda çalıştığı ve bir web sayfası veya kullanıcı ile etkileşim gerektirmeyen özelliklere kapı açan bir komut dosyasıdır. Service Worker'ı kullanmak, kullanıcının cihazında statik özellikleri ve HTML yanıtlarını önbelleğe almamıza ve bunları ağa geçmeden sunmamıza olanak tanır. Service Worker önbelleği, HTTP veya tarayıcı önbelleğiyle 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 sunar ve bu şekilde LCP süresini azaltmak için kullanabilirsiniz.
- Metin dosyalarının sıkıştırılması, sayfa yüklendiğinde indirilecek veri miktarını önemli ölçüde azaltır, böylece LCP'yi düşürür.
- Başka bir öneri, işlemeyi engelleyen kaynakları kaldırmaktır. Tarayıcı, HTML sayfasını sunucunuzdan aldığında, DOM ağacını analiz eder. DOM'da harici stil sayfaları veya JS dosyaları varsa, kalan DOM ağacını analiz etmeye devam etmeden önce tarayıcının bunlar için duraklaması gerekir. Bu JS ve CSS dosyalarına işleme engelleme kaynakları denir ve LCP süresini geciktirir
JS ve CSS Dosyaları İçin Engelleme Süresini Azaltmak
- Gereksiz paketler kurmamanız ö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 önceden yüklemek ve tarayıcıda oluşturmayı önlemek için hiçbir neden yoktur. Erteleme özniteliğinin eklenmesi, DOM analizi için tüm engelleyicileri kaldırır ve LCP düşer.
- Kritik CSS, sayfanızın birinci katında görünen DOM için gerekli stil ayarlarını içerir. Sayfanın bu bölümünün stil ayarları arka arkaya, yani her öğenin stil özelliğindeyse, tarayıcının bu öğelere stil vermek için harici CSS'ye ihtiyacı yoktur. Bu nedenle sayfayı hızlı bir şekilde işleyebilir ve LCP değeri düşer.
- İçeriğin küçültülmesi ve sıkıştırılması da öneriler arasında yer alıyor. CSS ve JS dosyaları, okumalar için alan içerir, ancak kod yürütmek için gereksizdir. Bunları kaldırabilirsiniz. Daha küçük dosya boyutu, dosyaları hızlı bir şekilde yükleyebileceğiniz ve LCP sürenizin azalacağı anlamına gelir.
- Tarayıcıya gönderilen Javascript’i optimize etmezseniz, kullanıcı; Javascript indirilip etkinleştirilene kadar sayfadaki herhangi bir içeriği göremeyebilir veya bunlarla etkileşime geçemeyebilir.
İstemci Cihazlarda Oluşturmayı Optimize Etmek
- Tüm JS'leri istemci tarafına gönderip tüm işlemleri orada yapmak yerine, sayfayı dinamik olarak sunucuda oluşturup ardından ziyaretçinin cihazına gönderebilirsiniz. Bu, sayfanın oluşturulması için gereken süreyi artıracak ve 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 korumak fazla zaman alabilir.
- Ön işleme, sunucunun sayfayı oluşturmasına izin veren farklı bir tekniktir. Oluşturulan sayfa, oluşturma döngüsü sırasında bir kez saklanır ve sonraki 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.
Yorum Yapabilirsiniz.
E-posta mailiniz gizli kalacaktır.*