Core Web Vitals Nedir? Nasıl Optimizasyon Yapılır?

Core Web Vitals Nedir?

Core Web Vitals, Google’ın bir web sayfasının kullanıcı deneyimi açısından ne kadar iyi ve kötü olduğunu gösteren en temel metriklerdir. 

Kısacası, websitesinin kullanıcı deneyimini iyileştirmek için odaklanmamız gereken ilk metriklerdir.

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

Core Web Vitals, Google’ın resmi olarak açıkladığı (“https, site hızı, mobil uyumluluk ” gibi) bir sıralama faktörüdür. 

Google sıralamalarını ne kadar etkiler?

Google sıralamalar için 200’den fazla makro ve mikro birçok faktör kullanır. 

Temel Web Göstergeleri de bunlar arasında kullanıcı deneyimini iyileştirmeye yönelik bir kriterdir.

Core Web Vitals Metrikleri Nelerdir?

Tüm web göstergelerinin temel metrikleri olarak Google, LCP, FID ve CLS metriklerini öncelikle olarak iyileştirmemizi istiyor. 

1. LCP: Largest Contentful Paint – En büyük zengin içerikli boyama (metin, görsel)
2. FID: First Input Delay – İlk Giriş Gecikmesi
3. CLS: Cumulative Layout Shift – Görsel Kararlılık

En Büyük Zengin İçerikli Boyama (Largest Contentful Paint) Nedir?

LCP, sayfanın yüklenme süresini ölçen bir hız metriğidir. 

Bir sayfanın yüklenmeye ilk başladığı andan 2.5 saniye sonunda kullanıcının sayfadaki en büyük içeriği görmesine kadar geçen süre.

En büyük içerik, HTML metinleri, görsel veya video gibi sayfadaki ana içeriktir.

En Büyük Zengin İçerik Metriği (LCP) Nasıl İyileştirilir?

LCP puanını etkileyen faktörler: 

• Sunucu yanıt süresinin yavaş olması
• Javascript veya CSS’in sayfanın render edilmesini engellemesi (oluşmasını engelleme) 
• Client-side rendering
• Kaynakların yüklenme süresinin yavaş olması

Kısacası LCP’yi iyileştirmek için bunu etkileyen faktörleri optimize etmeye çalışabiliriz. 

1. Sunucu yanıt süresini iyileştirin

Kullanıcı web sayfasını açmak istediğinde tarayıcı (browser) sunucudan web sayfamızın dosyalarını ister ve bu dosyaları oluşturmaya başlar. 

Sunucu bu isteğe ne kadar geç cevap verirse, dosyaları geç gönderirse hem LCP hem de diğer web göstergeleri bundan olumsuz etkilenir.

Sunucuyu optimize etmek veya daha iyi bir sunucuya geçmek faydalı olacaktır. 

Bunu anlamak için PageSpeed Insights veya Lighthouse raporunda “Time-to-First-Byte” raporunu kullanabiliriz.

Buradaki metrik, kullanıcı tarayıcısının sayfa içeriğinin ilk baytını alması için geçen süreyi gösterir.

Bu da sunucudan kaynaklı yavaşlık olup olmadığını gösterir.

2. CDN Kullanın

İçerik Dağıtım Ağı (“Content Delivery Network”), farklı konumlara dağıtılan sunucu ağlarıdır. 

Kullanıcılara mümkün olduğunca en yakın konumlardaki sunuculardan web sayfalarının oluşturulmasını sağlamak sunucu yanıt sürelerini kısaltır ve dolayısıyla sayfaların hızlı yüklenmesini sağlar.

3. Önbellekleme (Cache) Kullanın 

Web sayfaları statik olan siteler için önbellekleme kullanmak, her istekte yeniden oluşmasını engellemek için kullanılabilir. 

Bu sayede sunucu yanıt süresini de iyileştirebiliriz.

4. preconnect ve dns-prefetch kullanın

Sunucu isteklerini optimize etmek için rel=”preconnect” kullanarak tarayıcıya bağlantı kurma isteğine yanıt oluşturmaya çalıştığınızı anlatabilirsiniz. 

DNS aramalarını daha hızlı çözümlemek içinse, dns-prefetch kullanabilirsiniz.

Bunlar LCP puanını iyileştirebilir.

5. Javascript ve CSS kaynaklarını optimize edin

Kullanılmayan CSS ve JS kaynaklarını Lighthouse kapsam raporunda görebiliriz. 

Bunları tamamen kaldırabiliriz ya da websitemizde farklı sayfalarda bunlar kullanıyorsa farklı bir dosyaya taşıyabiliriz.

• CSS Optimizasyonu

CSS dosyalarını asenkron yüklenmesi için rel=”preload” ve onload kullanabiliriz. 

Örnek: 

<link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">

• Javascript Optimizasyonu

Kullanılmayan JS dosyalarını Lighthouse kapsam raporuyla tespit edebilir ve buradaki kullanılmayan kaynakları kaldırabiliriz.

6. Görselleri Optimize Edin

Web sayfalarının en büyük elemanlarından biri görsellerdir. 

Bu görsellerin yüklenme ve işlenme sürelerini iyileştirmek LCP metriğini iyileştirir. 

Görsel SEO yazımı inceleyerek bu konuda çok daha kapsamlı bilgilere sahip olabilirsiniz.

Görselleri sıkıştırarak daha küçük boyutlu hale getirebilirsiniz. 

Bunun için görsel kalitesi kaybı oluşabilecek ve oluşmayacak görsel sıkıştırma araçlarını kullanabilirsiniz.

7. Client-Side Rendering Optimizasyonu

Angular, Vue, React gibi frameworklerde yapılan websiteleri sayfaların tarayıcıda render edilmesi için client-side JS uygulamasını kullanır. 

Yani sunuculardan değil bu frameworklerden render edilmesidir.

Bu frameworkleri kullanan bir web siteniz varsa büyük bir JS dosyasına sahipsiniz demektir ve bunları optimize etmeniz gerekir. 

Bu konuyla ilgili takip edebileceğiniz kaynaklar:

• AngularJs SEO
• React SEO (Samet Özsüleyman)
• React SEO (Google Search Central)
• VueJS SEO

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

PageSpeed Insights aracında bu ölçümü yapabiliriz. Ancak bu, gerçek bir kullanıcı deneyimini ölçmez. 

Her kullanıcının websitemizle etkileşime girdiği birçok faktöre göre buradaki hız ve deneyim metrikleri de değişir. 

Örneğin, cep telefonundan 4G ile sitemize giren kullanıcı ile Wi-Fi ile bilgisayardan bağlanan kullanıcılar için farklı deneyimler gerçekleşir.

Chrome 88 sürümünü kullandığınızda Lighthouse aracından Web Vitals metriklerini görebiliriz. 

Lighthouse içerisinde Performans sekmesinde Web Vitals seçeneğini aktif hale getirerek kullanabilirsiniz.

Gerçek verileri elde etmek için Chrome Kullanıcı Deneyimi Raporlarını kullanmalısınız. 

İlk Giriş Gecikmesi (First Input Delay) Nedir?

FID, websitenin, bir kullanıcının sayfadaki ilk etkileşimine verdiği yanıt süresini ölçen metriktir. 

Kısacası, kullanıcının bir linke, butona tıklaması veya bir javascript etkileşimine girmek istediğinde website buna ne kadar hızlı yanıt verebiliyor ölçümünü bu metrikle yapabiliriz. 

FID sınırı olarak Google 100 milisaniye öneriyor.

İlk Giriş Gecikmesi (First Input Delay) Nasıl İyileştirilir?

FID süresinin uzamasının en büyük nedenlerinden biri, tarayıcının Javascript dosyalarını ayrıştırmaya çalışmasındandır. 

Bu durumda diğer etkileşimleri çalıştıramaz ve bu da kullanıcının bir butona veya linke tıkladığında herhangi bir sonuç almamasına neden olur. 

Tüm kullanıcılar için FID değeri ölçülmez. 

FID, Rail Performans Ölçüm Metriğidir ve buradaki 4 farklı metriğe göre yanıt verebilirlik bölümündedir. 

Yani her kullanıcı bir bağlantıya veya butona tıklamayacaktır. Bazı kullanıcılar ise çok erken tıklayacaklardır, bazıları ise sitenin yanıt verebileceği zamanlarda tıklayacaklardır. 

Bu yüzden her kullanıcı için FID değeri bulunmaz.

FID değerini ölçmek için PageSpeed Insights veya Lighthouse verilerini doğrudan kullanamayız.

Çünkü gerçek bir kullanıcı etkileşimi gerektirir. 

Ancak FID, PageSpeed Insights veya Lighthouse araçlarında bulabileceğimiz Total Blocking Time metriği ile korelasyon gösterdiği için bunu iyileştirmeye başlayarak FID değerini iyileştirmeye yönelik çalışmalara başlayabiliriz.

Javascript’te FID metriğini ölçmek için Event Timing API kullanabilirsiniz. 

İlk olarak FID optimizasyonu için Total Blocking Time iyileştirmesi yaparak başlayabiliriz. 

Lighthouse ve PageSpeed Insights bölümünde çıkan önerileri iyileştirerek burada iyi sonuçlar alabiliriz. 

Bir önceki bölümde bahsettiğim gibi Lighthouse Kapsam raporunda kullanılmayan CSS ve JS kodlarını görebiliriz. 

Burada kullanılmayan JS kodlarını optimize edebiliriz. 

Javascript dosyalarını parçalayabilirsiniz. Bu sayede kullanıcının etkileşime girmediği JS dosyaları kullanılmaz. 

Async veya defer kullanarak önemli olmayan JS kodlarını erteleyebilirsiniz.

Kümülatif Düzen Kayması (Cumulative Layout Shift) Nedir?

CLS, website düzeninin beklenmedik anda değişmesi veya kaymasını ölçen temel web göstergesi metriğidir.

Bu sorunun oluşmasının sebebi DOM elemanlarının dinamik olarak sayfaya eklenmesiyle oluşabilir. 

Otomatik olarak yeniden boyutlandırılan reklam, widget, boyutu bilinmeyen görsel veya video gibi birçok sayfa elemanı website tasarım düzenini aniden bozabilir.

Kümülatif Düzen Kayması (Cumulative Layout Shift) Nasıl İyileştirilir?

Görsellerin boyutlarını CSS dosyalarınızda belirtin. 

Bu sayede tarayıcı sayfayı oluştururken görselin ne kadar alanda yer alacağını bilerek bu işlemi yapar.

Lighthouse veya PageSpeed Insights kullanarak bu CLS değerini ölçebiliriz. 

Buradaki değerleri iyileştirmek için öneriler bölümünde “Büyük düzen kaymalarından kaçının” sekmesini kullanabilirsiniz.

Google Data Studio ile Core Web Vitals Değerleri Nasıl Ölçülür?

Bu raporlamayı kullanmak için Search Console üzerinde Core Web Vitals verilerinin aktif olması gerekiyor. 

Daha sonra datastudio.google.com adresine girerek yeni rapor oluşturma bölümünde Data Source (“veri kaynakları”) bölümünü seçin. 

Veri kaynağı olarak “Chrome UX Report” kaynağını eklememiz gerekiyor.

Karşımıza raporda kullanılacak metrikler çıkıyor ve rapor oluştur butonuyla oluşturuyoruz.

Son ekranda ise kapsamlı bir rapor çıkıyor. Burada her değer için farklı rapor sayfaları mevcut ve hepsini geçmiş aylara göre takip edebilirsiniz. 

Yani yaptığınız iyileştirmelerin sonuçlarını bu şekilde de bir önceki ay ile kıyaslayarak ölçebilirsiniz.

Google Search Console ile Core Web Vitals Değerleri Nasıl Ölçülür?

Search Console üzerinde Core Web Vitals menüsünden buradaki iyileştirme önerilerini alabilir ve sorunları tespit edebilirsiniz. 

Ayrıca burada yaptığınız düzeltme çalışmalarını Google’a buradan bildirebilirsiniz.

Buradaki düzeltmenin doğrulanması ve arama konsoluna yansıması için 28 gün geçmesi ve bu sayfalara kullanıcı ziyaretlerinin gerçekleşmesi gerekir.