Core Web Vitals Nedir?

Site hızı özellikle SEO (arama motoru optimizasyonu) çalışmalarında en önemli metrik haline gelmiş bulunmaktadır. Bu süreci biraz daha ayrıntıya dökecek olursak  en önemli sebeplerinden biride “hızlı bir web sitesinin” getirileri olacaktır.

Core web vitals; Google’ın bir internet sitesinde, son kullanıcı deneyimi açısından önemli olduğunu düşündüğü bir takım özel teknik faktörlerdir. Kullanıcıların deneyimlerini iyileştirmek amacıyla sayfa açılış hızına odaklanan sayfaların hız konusundaki performansını ölçümlemekte kullanılan bir dizi metriklerden oluşur.

Bu metrikler;

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

Kısaca Core web vitals, Google’ın kullanıcı sayfa üstü deneyimini, algoritmik şekilde ölçeklendirmede kullanacağı önemli 3 metriğe verilen isimdir.

Core web vitals kullanıcıyı merkez alan bir yaklaşımdır bu yaklaşım sayesin de Google site hızı konusunda sınırlarını belirledi hangi siteleri iyi veya kötü olarak adlandıracağını üç temel metriğe bağlı olarak açıkladı.

Google bir sitenin hızını ölçümlerken sadece iki kaynaktan gelen verilere bakar. Bunlar field data (saha verisi) ve lab data (test ortamı verisi)’dır. Bu metrikler oldukça değerli verileri barındırır.

Field data, Google Chrome kullanıcılarının internette gezinme deneyimlerini anonim olarak topladığı CrUx data setlerinde tutulur. Field data RUM (real user monitoring) ile sonuçlar elde edilir. Bu sebeple oldukça değerli verileri içinde barındırır, sebebi ise doğrudan gerçek kullanıcıların deneyimlerini ifade etmesidir.

Lab data ise Lighthouse gibi çeşitli araçlar ile ölçümlenebilen, web sitesinin belirli koşullar altında laboratuvar ortamında test edilmesi ile birlikte elde edilen verilerdir.

PageSpeed Insights (PSI) gibi araçlar kullanarak sizde web sitenizin field ve lab ortamında çeşitli parametreler üzerinden hız performans durumunuzu görebilir , Google’nın siteniz için sunduğu teşhisleri ve önerileri gözlemleyebilirsiniz.

Görsel de gözüktüğü üzere kullanıcı deneyimlerini ölçümlemede ve sıralama faktörü olan pek çok farklı metrik bulunmaktadır. Fakat Core Web Vitals üç farklı metrikten oluşmaktadır.

2021 Page Experience güncellemesi ile yukarıdaki şablonda gördüğümüz metrikler Google açısından “sıralama faktörü” olarak tanımlanmıştır. Bu sebepten dolayı bu metriklerden özellikle Core Web Vitals’ı iyi anlamak gerekmektedir.

Sitenizin Core Web Vitals metriklerinin yanı sıra aşağıdaki gereklilikleri de yerine getirmesinde büyük bir fayda sağlar.

• Mobile Friendly: Sayfanızın mobil ile uyumlu olup olmadığını buradan test edebilirsiniz.
• Safe Browsing: Bilgi hırsızlığı ve kimlik dolandırılıcığı için önlem almak oldukça önemlidir. Sitenizi buradan test edebilirsiniz.
• HTTPS: Eğer hala HTTPS’e geçmediyseniz zaman kaybetmeyin.
• No Intrusive Interstitials: Kullanıcının karşısına çıkan ve onları rahatsız eden pop-upların kullanılmaması gerekiyor.

Core Web Vitals Neden Önemlidir?

Core Web Vitals Google’ın fazlasıyla önemsediği kullanıcı deneyiminin (UX), Google için açılış hızı noktasında ölçümlenebilmesinde önemli bir rol oynadığı için hem SEO dünyası için hem de web siteleri için büyük bir önem taşımaktadır. Özellikle kullanıcılarına sayfa hızı açılış deneyimini iyi yaşatmak isteyen web site sahipleri Google’ın açıkladığı bu metrikleri gereken seviyeye getirip optimizasyonunu sağlamalıdır.

Google’un uzun süredir yayınladığı algoritma güncellemelerine bakarak ve Google uzmanlarının da sürekli söylemekte olduğu en önemli ifadelerden biri “Google için değil kullanıcı için site/içerik oluşturun” olmuştur. Bu açıklamayı baz alarak da Core Web Vitals metriklerini doğrudan örnek gösterebiliriz.

Core Web Vitals“ Essential metrics for a healthy site”

Core Web Vitals Google’ın deyimi ile sağlıklı bir web sitesi için önemli metrikleri ifade eder. Farklı açılardan kullanıcı deneyimini merkezine alan bu metrikleri inceleyelim.

Yukarda da anlattığımız gibi bu kapsamda Google en temel üç metriği ön plana çıkarmaktadır. Bunlar;

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

Core Web Vitals Metrikleri Nelerdir?

Largest Contentful Paint (LCP)

Bir mobil sayfada yüklenen en yüksek boyutlu öğeye odaklanır. Sayfa yüklenmeye başladığı andan itibaren, bu öğenin görüntülenme süresini değerlendirir. Bu öğe max 2.5s içinde görüntülenmelidir. Kısaca sayfanın yüklenmesi ile alakalı, kullanıcı merkezli bir metriktir.

Largest Contentful Paint sayfada belirli etiketler ile sunulan video ve görsel elementlerini değerlendirir. Largest Contentful Paint metriği hem saha hem de laboratuvar verilerinden ölçümlenmektedir.

• 5 ile 4 saniye arası kullanılabilir alanlardır, 2.5 ve üstü en iyi performans.
• Sayfa yüklenme hızını gösterir (Loading Time).
• Sayfanın içeriklerinin ne kadar sürede görünür hale geldiğini ölçer, yani ana içeriğinin ekranda oluşturulma zamanını belirlemek için kullanılır.

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

1. Optimize edilmemiş veritabanı, Sunucu yanıt süresi ne kadar uzun olursa Largest Contentful Paint’de o kadar uzun olur. Bu yüzden TTFB (First Byte Time) değeri iyileştirilirse Largest Contentful Paint’in düşmesine de yardımcı olur. TTFB iyileştirme için sunucu optimize edilmesi, CDN kullanılması, Önbellekleme işlemlerin yapılması gibi.
2. JS ve CSS kaynaklarını erteleme, sıkıştırma ve küçültme işlemlerini yapın. Çözülmesi zaman alan API JS ve CSS’de engelleme oluşturabilir.
3. Yükleme süresini artıran kaynakları optimize edin. Resimlerin boyutlarının optimize edilmesi, sıkıştırılması, önemli kaynakları önceden yükle (preload) özelliğinin kullanılması, metin dosyalarını sıkıştırılması(HTML, CSS ve JS) gibi.
4. Önbellek eklentilerini, statik CDN yada sunucu taraflı önbellekle yaparken zaman aşımını mümkün olan en üst sürede tutun.

Largest Contentful Paint (LCP)’yi Etkileyenler

• <img> elementleri
• <image> element içindeki <svg> elementi
• <video> elementi
• Background görseli URL üzerinden gelmesi (CSS gradient yerine)
• Metin düğümleri içeren blok düzeyinde elementler. (inline level text element or block level elements in text nodes)

Görüntüler bir sitede Largest Contentful Paint’i en çok etkileyen bölümdür. Resimler için yapılması gerekenler;

1. Compress işlemi
2. Modern biçimlerde kullanılmalı ve responsive olmalı (WebP varsayılan olarak kabul edilmesi)
3. CDN kullanımı (Image CDN)
4. Lazy Load kullanılması (Örneğin, Ürün listeleme sayfalarında Lazy Load kullanılması gibi)
5. Ekran üstündeki görsellerin indirme boyutlarının düşürülmesi.

Zayıf Largest Contentful Paint (LCP) Neye Sebep Olur?

• Yavaş sunucu yanıt süresine
• Oluturmayı engelleyen JavaScript ve CSS
• Yavaş kaynak yükleme süreleri
• İstemci tarafı oluşturma

Yavaş Sunucu Yanıt Süresi

Tarayıcının sunucudan içerik alması ne kadar uzun sürerse eğer ekranda oluşabilecek herhangi bir şeyin açılması da o kadar uzun sürecektir. Daha hızlı bir sunucu yanıt süresi Largest Contentful Paint’i doğrudan iyileştirir.

Sunucu yanıt süresi ne kadar uzun olursa Largest Contentful Paint’de uzun olur. TTFB (First Byte Time) değeri iyileştirilirse Largest Contentful Paint değeri de iyileştirilir. TTFB’nizi iyileştirmek için bu yolları kullanabilirsiniz;

CDN Kullanımı

Content delivery network (CDN) içerik dağıtım ağı olarak geçmektedir. Bu teknoloji TTFB değerlerini kötü olan web siteleri için önemli methodlardan bir tanesidir. CDN hizmeti ayrıca istemci ile sunucu arasındaki mesafeden kaynaklı gecikmeleri de engelleyen önemli bir hizmettir.

CDN kullanımının en temel amacı herhangi bir internet sitesin de statik olarak kullanılan JavaScript, CSS ve resim gibi dosyaların CDN hizmetine ait farklı lokasyona ait sunucular da tutlmasını sağlar bu sayede ilgili web sitesine farklı lokasyonlardan gönderilecek isteklerde ilgili o lokasyona en yakın sunucudan statik dosyaların gönderimi sağlanacaktır.

CDN hizmetini kullanarak sitenizin kaynaklarını servis sunucusu üzerinden kullanıcıya göndererek sitenizin sunucusunun yükünü azaltabilirsiniz. Az sayıda kaynağı yanıt olarak göndermeye çalışan sunucu bu sayede işlem yükü azalacak, statik kaynakalrın dışında kalan kısımları ise kolay ve hızlı bir şekilde işlemeye başlayacaktır.

CDN hizmeti üzerinde olan statik kaynaklar klasik sunuculara göre daha kolay ve hızlı bir şekilde kullanıcılara iletileceği için sitenizin de TTFB değeri önemli bir ölçüde iyileşme gösterecektir.

Web Server (Sunucu) Konfigürasyonu

TTFB değerlerinizi iyileştirip optimize etmenizin en önemli adımlarından biri de sunucunuzun optimal konfigürasyonunun sağlanmasıdır. Web siteniz hangi sunucu üzerinde barınıyorsa sunucunuzun türevine göre optimizasyonları yapılmalıdır.

Bu aşamada eğer PHP kullanımı gerçekleştiriyorsanız PHP sürümünün güncel olduğunu kontrol etmelisiniz. WordPress ve PHP kullanan web siteler , PHP sürümünün aktif olarak güncellenmesi çok önemlidir. Sunucu üzerinde brotli sıkıştırma, http/2, sunucu tarafında cacheleme, redis gibi işlemlerin yapılması gerekmektedir.

Brotli Sıkıştırma

Brotli sıkıştırma Gzip sıkıştırmaya göre %30 daha fazla sıkıştırma sağlar. Brotli sunucudan istemciye gönderilen kaynakları sıkıştırarak minimize edilmesini sağlar. Minimize edilen kaynakalar sunucu tarafında iletimi hızlanacağından TTFB değerinde de iyileşme gerçekleşecektir.

HTTP/2

HTTP protokolünün güncel versiyonu HTTP/2 kullanımı sunucuda aktif hale getirildiğinde network üzerinde istek gönderilen kaynakların daha hızlı bir şekilde gönderilmesini sağlayabilirsiniz.

Sunucu Tarafında Cacheleme

Sunucu tarafında gönderilen isteklerin daha hızlı bir şekilde gerçekleşmesini sağlayabilmek adına sunucu tarafındaki cache sistemini aktif hale getirerek oluşabilecek gecikmeleri en az seviyeye indirebilirsiniz.

Dinamik İçerik ve Kaynak Kullanımını Azaltmak

Dinamik içerik oluşturmak kötü TTFB değerlerine sahip olmanızda önemli rol oynar. Web sitenizin sayfalarında dinamik içerik kullandığınız da istemciden gelen HTTP isteğine yanıt olarak döndürülecek dinamik kaynaklar sunucu tarafında tekrar tekrar işleyecektir. Bu sebeple TTFB’yi etkileyen işlenme süresi gecikme yaşayacağından sunucu yanıt süreside uzayacaktır.

Yaşanacak bu gibi durumların önüne geçilebilmesi için dinamik kaynak ve dinamik içerik kullanımını azaltmalı, yoğun bir iletişim içinde olan alt yapılarda sunucu veya kullanıcı taraflı cache uygulamaları yapılmalıdır.

Veri Tabanı Optimizasyonu

Veri tabanı ve sunucu üzerinde yapılacak optimizasyon çalışmaları ile TTFB değeri optimize etmek mümkündür. Sunucunuzun hardware limitleri yeterli olduğu durumlarda veri tabanından kaynaklı TTFB metriği üzerinde yavaşlama yaşamamak adına veritabanın optimize edilmesi oldukça önemlidir.

Üst kısımda da bahsettiğimiz gibi önbellekleme methodları ile veritabanın da meydana gelebilecek sorunların daha hızlı bir şekilde iyileşmesini, sonuçlandırılmasını sağlayabilirsiniz.

First Input Delay (FID)

Bir mobil sayfada ilk etkileşim sağlandığında (bir butona veya bağlantıya tıklanması vb.) bu etkileşimin gerçekleşme süresini değerlendirir. Bir etkileşim max 100 ms içinde gerçekleşmelidir. Yani First Input Delay kısaca kullanıcıların sayfaya girdikleri zaman ki etkileşimleri ölçümlemektedir.

Sayfa tarafından kullanıcının isteğine geç dönüş sağladığında kullanıcı sayfanın yavaş olduğunu veya istekte bulunduğu web sitesinin bozuk olduğunu düşünebilir.

First Input Delay sadece field data ve lab data üzerinden ölçümlenebilir.

• 100 ile 300 ms arası ideal olandır, 100 ms ve üstü ise en iyi performansı gösterir.
• Kullanıcının site ile etkileşimini ve yanıt vermesini ölçer.
• FID kullanıcının bir sayfa ile ilk etkileşimde bulunduğu andan tarayıcının söz konusu etkileşime gerçekten yanıt verebildiği süreye kadar ölçer.

First Input Delay (FID) Nasıl Optimize Edilir?

1. JavaScript dosyaları olabildiğince sıkıştırılmalı ve birleştirilmelidir.
2. JavaScript dosyalarının sayısının azaltılması gerekmektedir.
3. Önemli olmayan JavaScript kaynaklarını erteleme seçeneği kullanılmalıdır.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift belki de hepimizin çoğunlukla rahatsız eder. Bazen sayfalarda stabilizasyon sorunları nedeni ile istenmeyen yerlere tıklanmak zorunda kalınabilir. Cumulative Layout  Shift görsel stabilizasyonu ölçümlemek adına kullanılan field data ve lab data üzerinden değelendirilen metriktir.

Bu metrik,  hareket eden görsel öğelerin boyutunu ve ne kadar uzağa hareket ettiğini değerlendirir. Recommendation, slider, banner vb. alanlara içerik yüklendikten sonra sayfanın geri kalan içeriği aşağıya doğru kayıyor. Sayfaya land eden kullanıcının istediğinden farklı bir elemente tıklaması ya da okuduğu içeriğin aşağıya kayması gibi problemlere yol açtığından dolayı deneyimi negatif etkiler.

• 1’den düşük olmalıdır. 0.25’e kadar performans kabul edilebilir.
• Görsel stabiliteyi ölçer.
• Cumulative Layout  Shift , kullanıcı girişlerinin 500 ms içinde gerçekleşmeyen düzen kaydırmalarında kaydırma puanlarını toplayarak içeriğin kararsızlığını ölçer.
• Görünüm alanında ne kadar görünür içeriğin değiştiğinin yanı sıra, etkilenen öğelerin kaydırıldığı mesafeye de bakar.
• Sayfa indirilirken beklenmedik şekilde web sayfası öğelerinin kaydırılması olayıdır.
• Görseller, videolar, fontlar, butonlar, iletişim formları gibi öğeler,

Cumulative Layout Shift (CLS)’de Sık Görülen Sorunlar

• Görsel boyutlarının uyumlu olmaması: Responsive tasarım yapılması gerekir. Resimler ve videolarda mutlaka width – height değerlerini belirtin. (CSS box modeli ile boyutlandırma yapılabilir, ancak tarayıcılar kendi boyutlandırmalarını yapabilir bu durumda sayfada aniden metnin aşağıya inmesi gibi durumları oluşturabilir.)
• Boyutsuz ads, embeds ve iframes’ler: Stil elementler önce verilebilir, embed ve iframe boyutları doğru ayarlanmalı, (https://aspectratiocalculator.com/)
• Dinamik içerik: Slider, banner gibi.
• Web Yazı Tipleri: font-display, özel fontların oluşturma davranışını otomatik, takas, engelle, yedek ve isteğe bağlı gibi değerlerle değiştirmenize olanak tanır. Font API’sı, gerekli yazı tiplerini almak için gereken süreyi azaltabilir. (Lighthouse ile test edilebilir.)
• DOM güncellenmeden önce ağ yanıt süresinin beklenmesi.

Cumulative Layout Shift (CLS) Nasıl Hesaplanır?

• Etki oranı, dengesiz bir elemanın görüntü alanında ne kadar yer kapladığının bir ölçümüdür.
• Mesafe kesri, sayfa öğesinin orijinal konumdan son konuma taşındığı alan miktarıdır.
• Kümülatif Yerleşim Skoru: Etki Kesrinin (Impact Fraction), Mesafe Kesri (Distance Fraction) ile çarpılmasıyla hesaplanır: 0.75 x 0.25 = 0.1875

Cumulative Layout Shift (CLS) Nasıl Optimize Edilir?

• Ertelenen CSS ve JavaScript dosyalarını düzen kaymasına karşı test edin.
• Görüntü boyutları için CSS ile boşluk ayırın, resim yüklendiği sırada oluşabilecek kaymaları engelleyin.
• JQuery dosyasını olabildiğince az ertelemeye çalışın.
• 3. Party eklentilerin bulunduğu div alanlarının belirlenmesi ya da slider divi için sabit alanın belirlenmesi gereklidir.

Web Vital Araçları

Web sitenizin Core Web Vitals performansını ölçümleyebilmek için aşağıdaki araçları kullanarak görebilirsiniz.

1. Lighthouse,
2. PageSpeed Insights,
3. Chrome DevTools,
4. Search Console,
5. dev’s measure tool,
6. The Web Vitals Chrome extension,
7. Chrome UX Report API.