SEO

Core Web Vitals Nedir?

Core web vitals, Google’ın kullanıcı deneyimi ile web sayfalarının açılış hızlarının kalite sinyallerini ölçülmesinde kullandığı temel metriklerdir. 2021 yılında mayıs ayında yapılan algoritma güncellemesi içerisinde yer almıştır. Bir web sayfasının açılış hızı ve kalite sinyalleri önemlidir. Çünkü kullanıcılar yavaş web sitelerine girmemektedir. Yapılan bir araştırmaya göre “mobilde bir web sitesi 3 saniyeden daha uzun bir süre açılırsa kullanıcıların %53’ü  siteyi terk ediyor”.

Core web vitals site deneyimini göstermeye yarayan temel açılış hızı ve kullanıcı metriklerinden oluşmaktadır. Temelde 3 farklı kısımdan oluşur. Bu kısımlar:

core-web-vitals
  1. Largest Contentful Paint (LCP) en büyük zengin içerikli boyama (metin, görsel)
  2. First Input Delay (FID) ilk giriş gecikmesi
  3. Cumulative Layout Shift (CLS)  kümülatif görsel kayması

Core web vitals yukarıda belirttiğim 3 farklı kısımdan oluşmaktadır. Core web vitals sayfa hızı ile ilgilidir. Core web vitals ile ilgili nasıl daha iyi hale getirebileceğimizi aşağıda anlatmaktayım.

İçindekiler

Core Web Vitals Neden Önemlidir?

Kullanıcıları memnun etmek için sayfa deneyimi oldukça iyi olmalıdır. Sayfa deneyimini iyileştirmek için bazı faktörler:

  • HTTPS kullanımı
  • Web sitesinin mobil uyumlu olması
  • Sayfa açılışlarında pop-up’ların doğru konumlandırılması
  • Web sitesinin 2,5 saniyenin altında açılması

Bu liste daha da uzayabilir. Google’ın yaptığı güncellemeye bakarak, Core web vitals sayfa deneyimi açısından en büyük bölümü oluşturulacağı söylenebilir.

Web sitenizde sadece sayfa deneyimini çok iyi yaparak, Google’da birinci sayfaya gelemezsiniz. Google’ın 200’den fazla sıralama faktörü vardır. Google, iyi bir sayfa deneyiminin, mükemmel bir içeriği geçmeyeceğini söylüyor. Ama benzer kalitede içeriklere ve benzer domain otoritesine sahip siteleri ön plana çıkaracağını açıkça söylüyor. 

Domain otoritesi nedir? Domain otoritesi nasıl yükseltilir? sorularının cevabı  https://www.eyupkaradayi.com/domain-otoritesi-nedir/ içeriğimde bulabilirsiniz. 

Core Web Vitals Sıralama Faktörü müdür?

Core web vitals, Google’ın site hızı, mobil uyumluluk ve HTTPS gibi resmi olarak açıkladığı bir sıralama faktörüdür. 

Google’ın sıralamalar için 200’den fazla sıralama faktörü vardır. Core web vitals, yani temel web göstergeleri bu sıralama faktörleri açısından kullanıcı deneyimini iyileştirmeye çalışan bir kriterdir. 

Largest Contentful Paint (LCP) Nedir?

LCP yani largest contentful paint, web sayfasının yüklenme hızını ölçen bir hız metriğidir. 

Bir web sitesinin yüklenme başladığı andan kullanıcının sayfadaki en büyük içeriği görmesine kadar geçen süredir. Bu süre 2,5 saniyeden fazla olmamalıdır. 

En büyük içerik, görsel, video veya yazılar gibi sayfadaki ilk ana içeriktir. 

LCP’nin yavaş açılmasına sebep olan bazı kriterler:

  • Sunucunun yavaş yanıt vermesi
  • Oluşturmayı engelleyen JS ve CSS dosyaları
  • Yavaş yüklenen kaynaklar
  • Kullanıcı taraflı oluşturma

Sunucunuzun Yavaş Yanıt Vermesi

Sunucuyu optimize etme, sunucunuzun bir isteğe uzun sürede yanıt veriyorsa, ekranda oluşturma süreside artar. Bu sebeple, LCP de dahil olmak üzere her sayfa hızı metriği olumsuz yönde etkilenir. Sunucunuzu optimize etmek için yapılması gerekenler:

  • Sunucularınızı analiz edin ve optimize edin
  • CDN kullanımı
  • Cahce kullanımı
  • Önemli kaynakları ön yüklemesi

 Sunucularınızı analiz edin ve optimize edin

Sunucunlarınıza gereğinden fazla arama sorgusu yaptığı düşünelim. Bu sorguları Black Friday günlerde büyük e-ticaret sitelerini düşünebilirsiniz. Hatırlayacağınız gibi bazı markalara giriş yapılamadı.Sunucunun yetersiz kaldığı zamanlarda, JS ve CSS dosyalarını birleştirirsek, önemsiz görselleri ertelersek veya kaldırırsak bu sayede daha fazla verimli kullanıcıya hizmet verilir. Böyle bir sorunda diğer bir çözüm ise Sunucuyu yükseltmektir. 

CDN kullanımı

Web sitenizdeki JS ve CSS dosyalarını sizin sunucunuzu dışında başka bir yerde barındırıyorsunuz. Sizin sunucunuz sizin sitenizi barındırıyor. Ama Globaldeki aramalarda sizin kullandığınız CDN etkin hale geliyor. Yani, Birden fazla sunucunuz olacak ve hangi kıtadan arama yapılırsa o kıtaya en yakın CDN sunucu olarak kullanılacaktır. Böylelikle asıl sunucunuza binen yükün azalmaktadır. Böylelikle web siteniz daha hızlı açılacaktır. 

core-web-vitals-cdn-kullanimi

Kaynaklları Önbelleklemesi (Cache)

Web sitesine ilk defa girildiğinde metrikleri sunucudan istemektedir. Peki ikinci defa bilgisayardan gireceğiniz zaman tekrar sunucuya bağlanmadan aynı tarayıcı üzerinden geri yüklenirse nasıl olur? tabiki aynı kullanıcı tekrar sunucuyu yormadan tarayıcı ile siteye girmiş olur.

HTTP, tarayıcı önbelleği, servis çalışanı önbelleği ile kaynakları önbellekler. Önbellekten önceden önbelleğe alınan içerikleri kullanıcılara düşük ağ hızlarında sunmaktadır. Böylelikle LCP süresini azaltmak için böyle bir çalışma yapılabilir. 

HTML Yanıtlarını Önbelleklemesi (Sunucu Taraflı)

Sunucu taraflı, HTML yanıtlarını önbelleklemesi, insanların tarayıcılarından istekleri engelleyebilir. Sunucuya istek göndermek yerine önbelleğe alınmış yanıtlar sunabilir. 

Web sitesine ilk defa giren bir kullanıcı

Kullanıcı > Page Cache > PHP > Database > Database > PHP > Page Cache > Kullanıcı 

şeklinde ilerlemektedir. Web sitesine ikinci defa giren ve HTML yanıtlarının önbelleklemesi ile gerçekleşen işlem:

Kullanıcı > Page Cache > Page Cache > Kullanıcı

Şeklinde ilerlemektedir. Böylelikle kullanıcılar web sitelerine daha hızlı girebilmektedir. 

Önemli Kaynakları Ön Yüklemesi

JS, CSS veya imageler gibi ekranın üst kısmındaki içeriği farklı bir CDN veya sunucudan çekiyor olabilirsiniz. Sitenin metriklerini takip etmek için google analytics, yandex metrica, tag manager kullanıyor olabilirsiniz. 

Tarayıcıya üçüncü taraf alan adına bağlantıya mümkün olan en kısa sürede oluşması için bir html etiket kullanılmalıdır. Bu etiket rel=”preconnect” etiketidir.

<link rel=”preconnect” href=”https://static.example.com”/

Oluşturmayı Engelleyen Javascript ve CSS Dosyaları

Oluşturmayı engelleyen JS ve CSS Dosyaları web sayfanızın daha yavaş sürede açılmasına sebep olacaktır. JS ve CSS dosyalarının oluşturmayı sağlayan çözümler:

  • CSS ve JS dosyalarının sıkıştırılması
  • Critical path CSS kullanımı
  • Defer ve async etiketinin kullanımı

JS ve CSS Dosyalarının Sıkıştırılması

JS ve CSS dosyaları genellikle boşluklar kullanarak yazılır. JS ve CSS bilenler ne demek istediğimi anlamıştır. Sıkıştırılmış JS ve CSS dosyalarını Google botları daha hızlı okur ve boşluklarda zaman kaybetmez. Boşluklardan ne olacak demeyin, Yüz binlerce site olduğu için Google zaman tasarrufu açısından bu kısmı önemsiyor. 

Google her web sitesi için bir tarama bütçesi ayırmaktadır. Bu tarama bütçesini en iyi şekilde değerlendirmelisiniz. Tarama bütçesi ile ilgili daha fazla bilgi almak için https://www.eyupkaradayi.com/tarama-butcesi-nedir/ yazıma göz atabilirsiniz.

JS ve CSS dosyalarını kendiniz sıkıştırmak zorunda değilsiniz. Bunun için belirli ücretsiz yazılımlar var. Bu yazılımlar sayesinde zaman kaybetmemiş olacaksınız.

Yukarıdaki siteleri kullanabilirsiniz. Bu siteler dışında JSS ve CSS sıkıştırma araçları veya minify vb. aramalar ile yeni siteleri deneyebilirsiniz. 

Critical Path CSS

Kullanıcın ilk gördüğü içeriğin zamanını CSS kaynaklı gecikmesini önlemek için kullanılan bir yapıdır. Footer alanında bulunan kısmındaki CSS dosyalarına ilk açılışta yüklemesine gerek yok. Bunu engellemek için ilk kısımdaki alanlar dışında ya body etiketinin altında CSS etiketlerini kullanmalısınız ya da gecikmeli olarak CSS dosyaların vermelisiniz. 

Defer ve Async Etiketi

Kullanıcı web sitenize girdiğinde tarama botları ilk olarak HTML ve CSS dosyalarını indirmeye başlamaktadır. Bu sırada JS dosyası geldiğinde tarayıcı HTML ve CSS dosyalarını taramayı durdurup JS dosyası taranmaktadır.

Defer ve Async etiktetleri sayesinde botlar tararken JS dosyasına denk geldiğinde Hem HTML, CSS dosyalarını tararken hem de  JS dosyaları aynı anda indirmektedir.

Bu size ciddi bir zaman kazanmasını sağlamaktadır. Defer ve Async etiketlerini aşağıda sizinle paylaşıyorum.

<script defer>

<script async>

Yavaş Yüklenen Kaynaklar

Çoğu web sitesinde, Ekranın üst kısmında bir içerik yer alır. Bu resim LCP için optimize edilmesi gerekmektedir. LCP’de yavaş yüklenen kaynaklanmasının sorunların çözümleri aşağıdadır.

  • Görsellerin optimize edilmesi
  • önemli kaynakların ön yüklenmesi
  • Metin sıkıştırma algoritmaları kullanmak

Görsellerin Optimize Edilmesi 

Görsellerin optimize edilmesi ile ilgili 5 farklı çözüm önerisi var. Bu öneriler:

  1. Görselleri sayfanın en üst kısmında kullanmayın
  2. Alakasız görselleri kaldırın
  3. CDN kullanın
  4. Yeni nesil görsel formatları kullanın
  5. Responsive görseller kullanın

Ben sadece görsellerin optimize edilmesi ile ilgili burada bilgi vereceğim. İlk üç madde zaten anlaşılmaktadır. CDN kullanımı yukarıda bahsetmiştim. Yeni nesil görsel formatları ve responsive görsellere değineceğim.

Tamamen web odaklı çalışan görsel kullanımı ile WebP veya AVIF gibi daha az yer kaplayan görseller kullanılması gerekmektedir. PNG ve JPEG formatları oldukça fazla alan kaplamaktadır. WebP vb. formatlar JPEG ile kıyaslandığında %30’un üzerinden daha az yer kaplamaktadır. 

core-web-vitals-gorsel-optimizasyonu

Görselleri WebP odaklı güncellerken bazı problemler olabilir. Bu problemlerden bir tanesi, her tarayıcının WebP türü görsellere uygun olmamasıdır. Bunun için belirli kod kullanarak kullanıcının tarayıcısına en uygun görsel şeklinin yüklenmesi sağlanır. 

<picture>

<source  srcset=”gorsel/elbise.avif” type=”image/avif”>

<source srcset=”gorsel/elbise.webp” type=”image/webp”>

<img src=”gorsel/elbise.png” alt=”en uygun format”>

</picture>

Etiketi kullanılmalıdır. 

Kullanıcı Taraflı oluşturma

Tarayıcının, LCP’yi etkileyen görsel açıdan önemli bir kaynağı öncelik vermediği durumlar vardır. Örnek olarak, ekranın üst kısmında yer alan bir başlık resmi, belirli bir CSS dosyasında arka plan olarak belirtilmiş olabilir. Google, CSS dosyasını indirip ayrıştırana kadar bu görüntüyü bilmez. Ondan dolayı yüklemeye öncelik vermez. 

Bu tür kaynakları, Tarayıcıya bildirmek için HTML belgenizin Head bölümüne <link> etiketi ekleyerek onun içine .rel=”preload” ekleyerek önceliklendirme yapabilirsiniz. 

Kodun uzun hali:

<link rel=”preload”  as=”video”  href=”vid.webm” type=”video/webm”

<link rel=”preload” href=”font.woff2” as=”font”  type=”font/woff2” crossorigin>

Şeklindedir. Bu kodu girerken boşluk olmamasına dikkat etmelisiniz.

First Input Delay (FID) Nedir?

FID First Input Delay, yani ilk giriş gecikmesi demektir. Kullanıcının ilk etkileşimine verdiği yanıt süresi ölçen metriktir. 

Kullanıcının bir butona, bir link veya bir JS etkileşmine girmek istediğinde web sitesinin bu işleme ne kadar hızlı yanıt verdiğini ölçen metriktir. Google FID sınır olarak 100 milisaniye önermektedir.

FID faktörleri aşağıdaki gibidir.

  • JS yürütme süresini düşürün
  • JS dosyalarını sıkıştırın
  • Kullanılmayan JS dosyalarını defer edin

Javascript yürütme süresini düşürün

JS yüklenmesini erteleme olarak bilinen tekniğin içerisinde birkaç yöntem vardır.

  • settimeout veya setınterval komutlarını kullanmayın
  • web workers kullanın
  • JS ile toplu HTML düzenlemeleri yapmaktan kaçının 

Javascript Dosyalarını Sıkıştırın

Bu maddeyi CSS dosyaları ile birlikte anlattığım için burada tekrara düşmemek adına fazla girmeyeceğim. Yukarıda verdiğim web adreslerinde JS dosyaları da kolaylıkla sıkıştırma işlemi yapılabilir. 

Kullanılmayan Javsacript Dosyalarını Defer Edin

Yukarıda anlattığım Defer ve Async metriklerinide burada kullanabilirsiniz.  

FID yazılım tarafına çok fazla girdiği için burada biraz kısa tutacağım. JS ile ilgili sıkıştırma işlemlerini yazılım ekibinden destek almanızı tavsiye ederim. 

Cumulative Layout Shift (CLS) Nedir?

CLS Cumulative Layout Shift, web sitesinde düzenin beklenmedik bir anda kayması veya değişmesini ölçen bir web göstergesi metriğidir. 

Bu sorunun oluşmasında boyutu bilinmeyen görseli, video gibi birçok sayfa elemanı, otomatik olarak boyutlandırılan widget, reklamlar web sitesinin sayfa düzenini aniden bozabilir. 

CLS Etkileyen Faktörler

  • Yanlış boyutlandırılmış görseller
  • Boyutları olmayan iframe ve reklam alanları
  • Font entegrasyonu veya değişimleri
  • Dinamik entegre edilen içerikler

Yanlış Boyutlandırılmış Görseller

Görsel sonradan gelip metini aşağıya atıyor. Google bunu tabi ki istemiyor. Sayfaya girdiğinizde google bu görsellerin yerinin belli olmasını istiyor. Sonradan görseller yüklendiğinde metin kaymamalıdır.Çözüm olarak aşağıdaki etiketi kullanabilirsiniz.  

<picture>

 <source media=”(max-width: 799px)” srcset=”puppy-480w-cropped.jpg” />

 <source media=”(min-width: 800px)” srcset=”puppy-800w.jpg” />

 <img src=”puppy-800w.jpg” alt=”Puppy with balloons” />

</picture>

Boyutları Olmayan İframe ve Reklam Alanları

Yukarıdaki gibi görsel, burada reklam sonradan aşağıya iniyor ve kullanıcılar yanlışlıkla reklam alanına basabiliyor. Çözüm şekli yukarıdaki ile aynı kod ile sağlanabilir. 

Font Entegrasyonu veya Değişimleri

Sayfa yüklendikten sonra belirli font kullanımlarında fontların yerleri değişebilmektedir. Bu değişimler kullanıcılar açısından olumlu olmuyor.  Bu sorunu çözmek için yukarıda da bahsettiğim bir kodu kullanacağız.

<link rel=”preload” href=”font.woff2” as=”font”  type=”font/woff2” crossorigin>

Bu kod ile bu sorunu çözmüş olacaksınız. 

Dinamik Entegre Edilen Çözümler

Web sitesine girdikten sonra aniden başka bir alanın web sayfasına gelmesidir. Google bu yapıyıda sevmiyor. Bu sorunun çözümü de yukarıda verdiğim kod ile birlikte kodu doğru kullanarak çözüme ulaşabilirsiniz. Kod yanlış boyutlandırılmış görsellerdeki kod ile aynıdır.

Elimden geldiğince kısa tutmaya çalıştığım bir içerik oldu ama konu içeriği çok geniş. Bu konu hakkında daha değinmediğim alanlar var. Bu konuda daha fazla bilgi elde etmek için aşağıda sizinle bazı kaynakları paylaşıyor olacağım.

Javascript sıkıştırması ile ilgili kaynaklar:

  1. https://zeo.org/tr/kaynaklar/blog/react-seo-react-tabanli-siteler-icin-en-iyi-optimizasyon-yontemleri
  2. https://www.youtube.com/watch?v=rKgF0rf009c
  3. https://www.seoclarity.net/blog/angularjs-seo

Core Web Vitals ile ilgili daha fazla kaynaklar:

  1. https://web.dev/vitals/
  2. https://support.google.com/webmasters/answer/9205520?hl=en
  3. https://web.dev/learn/
  4. https://backlinko.com/hub/seo/core-web-vitals
  5. https://www.brightedge.com/blog/core-web-vitals-preparing-page-experience-update#:~:text=Core%20Web%20Vitals%2C%20are%20three,it%20loads%20in%20the%20browser.

eyup

Ben Eyüp Karadayı, Bandırma Onyedi Eylül Üniversitesi Maliye Bölümü mezunuyum. Üniversitede KGGT topluluğu kurucu başkanlığını yaptım. Üniversitede Earnadoda SEO stajyeri olarak çalıştım. Sonra BYT Dokuma firmasında e-ticaret uzmanı olarak çalıştıktım. Şimdi firmalara SEO danışmanlığı vermekteyim.

İlgili Makaleler

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu