Core Web Vitals Nedir? LCP, INP ve CLS Rehberi

Bir web sitesinin hızlı olup olmadığını çoğu zaman sezgiyle değerlendiririz: sayfa açılırken bekletiyor mu, butona dokununca tepki veriyor mu, okurken içerik yerinden kayıyor mu? Google bu üç deneyimi ölçülebilir hale getirmek için Core Web Vitals adını verdiği bir metrik seti kullanır. Bu metrikler hem Search Console’da hem de PageSpeed Insights’ta karşınıza çıkar ve çoğu zaman kırmızı, sarı ya da yeşil renklerle işaretlenmiş olarak görünür.

Bu rehberde LCP, INP ve CLS metriklerinin tam olarak neyi ölçtüğünü, Google’ın hangi değerleri iyi kabul ettiğini, bu değerleri hangi araçlarla takip edebileceğinizi ve her biri için uygulanabilir iyileştirme yöntemlerini ele alıyoruz. Ayrıca bu metriklerin sıralamaya etkisini abartmadan, gerçekçi bir çerçevede değerlendiriyoruz.

Core Web Vitals Nedir ve Neden Önemlidir?

Core Web Vitals, Google’ın sayfa deneyimi sinyalleri arasında yer alan ve kullanıcının bir sayfada yaşadığı deneyimi üç temel boyutta ölçen metriklerdir: içeriğin ne kadar hızlı göründüğü, sayfanın etkileşimlere ne kadar hızlı yanıt verdiği ve sayfa yüklenirken düzenin ne kadar kararlı kaldığı. Bu metriklerin ortak özelliği, yalnızca teknik bir ölçüm değil, ziyaretçinin gerçekten hissettiği deneyimi yansıtmalarıdır.

Metrik seti zaman içinde güncellenmiştir. Mart 2024’te etkileşim ölçümünde kullanılan FID (First Input Delay) metriği emekliye ayrılmış, yerini INP (Interaction to Next Paint) almıştır. FID yalnızca ilk etkileşimdeki gecikmeyi ölçerken INP, sayfa açık kaldığı sürece gerçekleşen tıklama, dokunma ve klavye etkileşimlerini değerlendirir. Bu nedenle eski bir kaynakta FID’den bahsedildiğini görürseniz, güncel ölçümün artık INP olduğunu bilmeniz gerekir.

LCP, INP ve CLS için İyi Eşik Değerleri

Google her metrik için üç kademe tanımlar. Aşağıdaki tablo, güncel eşik değerlerini özetler:

Önemli bir ayrıntı: Bu değerler tek bir ölçüme göre değil, sayfa yüklemelerinin 75. yüzdelik dilimine göre değerlendirilir. Yani bir sayfanın “iyi” sayılması için ziyaretlerin en az dörtte üçünde eşik değerin altında kalması gerekir. Mobil ve masaüstü verileri de ayrı ayrı değerlendirildiği için, masaüstünde yeşil görünen bir sayfa mobilde sarı ya da kırmızı olabilir. Kocaeli’deki birçok hizmet işletmesinde ziyaretçilerin önemli kısmı telefondan geldiği için mobil sonuçlara öncelik vermek genellikle doğru yaklaşımdır.

Saha Verisi ile Laboratuvar Verisi Arasındaki Fark

Core Web Vitals ölçümlerinde iki tür veriyle karşılaşırsınız. Saha verisi, Chrome kullanan gerçek ziyaretçilerden toplanan ve Chrome Kullanıcı Deneyimi Raporu (CrUX) olarak bilinen veridir; son 28 günün ortalamasını yansıtır. Laboratuvar verisi ise belirli bir cihaz ve bağlantı hızı taklit edilerek tek seferlik yapılan testlerden elde edilir. Google’ın değerlendirmesinde esas alınan saha verisidir; laboratuvar verisi ise sorunları bulmak ve düzeltmeleri denemek için kullanılır.

• PageSpeed Insights: Yeterli trafik varsa sayfanın saha verisini, her durumda da Lighthouse ile üretilen laboratuvar verisini ve iyileştirme önerilerini gösterir.
• Search Console Core Web Vitals raporu: Sitenizdeki benzer URL’leri gruplayarak mobil ve masaüstü için hangi sayfaların iyi, iyileştirilmeli ya da zayıf olduğunu saha verisine göre listeler.
• Chrome DevTools ve Lighthouse: Geliştirme sırasında sorunun kaynağını bulmak için kullanılır; Performance paneli uzun görevleri ve düzen kaymalarını ayrıntılı gösterir.

Burada sık yaşanan bir yanılgıya dikkat edin: Lighthouse bir laboratuvar aracı olduğu için gerçek kullanıcı etkileşimi olmadan INP’yi ölçemez; bunun yerine yakın bir gösterge olan Total Blocking Time (TBT) değerini raporlar. Ayrıca yaptığınız bir iyileştirmenin saha verisine tam olarak yansıması, 28 günlük veri penceresi nedeniyle birkaç hafta sürebilir. Hız ölçümünün genel mantığını merak ediyorsanız site hızının SEO’ya etkisini anlattığımız yazıya da göz atabilirsiniz.

LCP Nasıl İyileştirilir?

LCP öğesi çoğu sitede sayfanın üst kısmındaki büyük görsel, slider ya da başlık metnidir. Özellikle kurumsal sitelerde sık görülen ağır ana sayfa sliderları, LCP sorunlarının en yaygın kaynaklarından biridir. Bu nedenle iyileştirmeye önce sorunlu öğeyi bulup ardından yüklenme zincirini kısaltarak yaklaşmak en verimli yoldur.

Önce LCP Öğesini Tespit Edin

İyileştirmeye başlamadan önce hangi öğenin LCP olarak ölçüldüğünü bilmeniz gerekir. PageSpeed Insights raporundaki tanılama bölümü bu öğeyi doğrudan gösterir; Chrome DevTools’taki Performance paneli de sayfa yüklenirken LCP’nin hangi anda ve hangi öğeyle gerçekleştiğini işaretler. Mobil ve masaüstünde LCP öğesi farklı olabilir; örneğin masaüstünde büyük bir görsel, mobilde ise başlık metni öne çıkabilir. Doğru öğeyi hedeflemeden yapılan optimizasyonlar çoğu zaman beklenen sonucu vermez.

Öncelikli Düzeltmeler

LCP öğesini belirledikten sonra aşağıdaki adımlar, çoğu sitede en belirgin iyileşmeyi sağlar:

• Sunucu yanıt süresini kısaltın: kaliteli hosting, sayfa önbellekleme ve gerekirse CDN kullanın.
• LCP görselini tembel yüklemeye (lazy loading) dahil etmeyin; bunun yerine fetchpriority="high" ile öncelik verin.
• Görselleri WebP veya AVIF formatında, ekran boyutuna uygun ölçülerde sunun.
• Oluşturmayı engelleyen CSS ve JavaScript dosyalarını azaltın, kritik stilleri öne alın.
• Ana içeriğin yalnızca JavaScript çalıştıktan sonra görünmesine yol açan yapılardan kaçının.

Tembel yükleme doğru kullanıldığında sayfanın alt kısmındaki görseller için çok faydalıdır, ancak görünür alandaki ana görselde LCP’yi geciktirir. Bu dengeyi lazy loading kullanımı üzerine hazırladığımız yazıda daha ayrıntılı ele aldık.

INP Nasıl İyileştirilir?

INP sorunlarının kaynağı genellikle tarayıcının ana iş parçacığını uzun süre meşgul eden JavaScript kodlarıdır. Menü açma, sepete ekleme, filtre seçme ya da form gönderme gibi etkileşimlerde kullanıcı tıkladığı halde ekranda bir şey olmuyorsa INP değeriniz büyük olasılıkla yüksektir.

• 50 milisaniyeyi aşan uzun görevleri daha küçük parçalara bölün ve ana iş parçacığına nefes aldırın.
• Canlı destek, harita, sosyal medya eklentileri ve fazla sayıda takip kodu gibi üçüncü taraf betiklerini gözden geçirin; gereksizleri kaldırın, kalanları erteleyin.
• Olay işleyicilerinde yalnızca ekranı güncellemek için gereken işi yapın, ağır hesaplamaları sonraya bırakın.
• Aşırı büyük DOM yapısından kaçının; binlerce öğe içeren sayfalar her etkileşimde daha yavaş güncellenir.
• Kullanıcıya anında görsel geri bildirim verin; işlem sürse bile butonun tepki verdiğini göstermek algıyı iyileştirir.

Hangi etkileşimin yavaş olduğunu bulmak için sayfayı gerçek bir kullanıcı gibi kullanırken DevTools’taki Performance panelinde kayıt alabilirsiniz. Uzun görevler kırmızı işaretle gösterilir ve hangi betiğin süreyi uzattığını görmenizi sağlar. Gerçek kullanıcılardan veri toplamak isterseniz Google’ın açık kaynaklı web-vitals kütüphanesiyle INP değerlerini ve ilgili etkileşimleri kendi analiz aracınıza gönderebilirsiniz.

CLS Nasıl İyileştirilir?

Bir habere tıklamak üzereyken içeriğin aşağı kayması ve yanlış yere tıklamak, düşük CLS’nin tipik örneğidir. Kullanıcı etkileşiminden hemen sonra gerçekleşen beklenen değişiklikler hesaba katılmaz; sorun, kullanıcının beklemediği kaymalardır.

• Görsel, video ve iframe öğelerine genişlik ve yükseklik ya da aspect-ratio değeri verin.
• Reklam alanları, gömülü içerikler ve sonradan yüklenen bileşenler için önceden yer ayırın.
• Çerez bildirimi gibi bantları içeriği iten bir blok yerine sayfanın üzerinde duran bir katman olarak gösterin.
• Web fontlarında uygun font-display ayarı kullanın ve yedek fontun ölçülerini yakınlaştırın.
• Animasyonlarda düzeni değiştiren özellikler yerine transform kullanın.

Düzen kaymalarının kaynağını görmek için PageSpeed Insights’taki “büyük düzen kaymalarından kaçının” tanılaması iyi bir başlangıçtır. DevTools’taki Performance panelinde ise her kaymanın hangi öğeden kaynaklandığını ayrıntılı olarak inceleyebilirsiniz. Sayfayı yavaş bir bağlantıda test etmek, hızlı bağlantıda gözden kaçan kaymaları da görünür hale getirir.

Core Web Vitals Sıralamayı Ne Kadar Etkiler?

Bu soruya dürüst bir cevap vermek gerekir: Core Web Vitals, Google’ın sayfa deneyimini değerlendiren sinyallerinden biridir ve sıralama sistemlerinde yer alır. Ancak Google, arama sonuçlarında önceliğin her zaman sorguyla en alakalı ve en faydalı içeriğe verildiğini açıkça belirtir. Mükemmel Core Web Vitals değerleri, zayıf ya da konuyla ilgisiz bir içeriği üst sıralara taşımaz. Benzer kalitede içeriklerin yarıştığı durumlarda ise sayfa deneyimi fark yaratabilir.

Asıl kazanç çoğu zaman sıralamanın ötesindedir. Hızlı açılan, tıklamalara anında tepki veren ve kaymayan bir sayfa, ziyaretçinin formu doldurma ya da satın alma olasılığını artırır. Bu nedenle Core Web Vitals çalışmasını yalnızca bir SEO görevi değil, kullanıcı deneyimi ve dönüşüm yatırımı olarak görmek daha doğrudur. Statik dosyaların sunumunu hızlandırmak için CDN kullanımının avantajlarını da bu çerçevede değerlendirebilirsiniz.

Ölçün, Önceliklendirin ve Kalıcı Hale Getirin

Core Web Vitals çalışmasına Search Console raporundaki zayıf URL gruplarıyla başlamak en verimli yoldur. En çok trafik alan şablonlar, örneğin ana sayfa, hizmet sayfaları ya da ürün detay sayfaları düzeltildiğinde etki sitenin geneline yayılır. Her değişiklikten sonra laboratuvar testleriyle sonucu doğrulamak, ardından saha verisinin güncellenmesini beklemek gerekir. Yeni eklenen bir eklenti ya da takip kodu kazanımları kolayca geri alabileceği için düzenli takip de şarttır.

Kocaeli Dijital olarak sitelerimizi en baştan Core Web Vitals değerleri gözetilerek tasarlıyor ve kodluyoruz; mevcut sitelerde ise sorunun kaynağını ölçerek önceliklendirilmiş bir iyileştirme planı hazırlıyoruz. Hızlı ve kullanıcı dostu bir altyapı için web tasarım hizmetimizi inceleyebilirsiniz.