Core Web Vitals 2026: Hızlı Bir Site Google'da Neden Kazanır?

Hızlı bir site Google'da kazanır, çünkü Google kullanıcıya en iyi deneyimi sunan sayfaları öne çıkarmak ister ve Core Web Vitals bu deneyimin ölçülebilir kısmıdır. İçerik kalitesi ve alaka düzeyi hâlâ sıralamanın ana belirleyicisi olsa da benzer kalitedeki sayfalar arasında hızlı ve kararlı olan avantaj kazanır. Daha da önemlisi, hızlı bir site kullanıcıyı sayfada tutar, daha fazla sayfa gezdirir ve daha çok dönüşüm üretir. Bu yazıda LCP, INP ve CLS metriklerini, eşik değerlerini, yaygın sorunları ve çözümlerini ele alıyoruz.

Core Web Vitals nedir ve eşik değerleri nelerdir?

Core Web Vitals, Google'ın bir sayfanın yüklenme hızını, kullanıcı etkileşimlerine ne kadar çabuk yanıt verdiğini ve içerik yüklenirken ne kadar kararlı kaldığını ölçen üç temel metriktir. Mart 2024'te FID metriğinin yerini INP almıştır. Google, bu metrikleri laboratuvar testlerine göre değil, Chrome kullanıcılarından toplanan gerçek saha verisine göre ve ziyaretlerin 75. yüzdelik dilimi üzerinden değerlendirir.

LCP neden yüksek çıkar ve nasıl düşürülür?

LCP öğesi çoğu sayfada ana görsel, hero alanındaki büyük başlık ya da bir video kapağıdır. LCP'nin yüksek çıkmasının en yaygın nedenleri yavaş sunucu yanıtı, render'ı engelleyen CSS ve JavaScript, optimize edilmemiş büyük görseller ve ana görselin geç keşfedilmesidir. Özellikle ana görselin JavaScript ile sonradan yüklenmesi veya tembel yükleme (lazy loading) ile işaretlenmesi sık yapılan bir hatadır.

• Ana görsele fetchpriority="high" verin ve onu asla lazy loading ile yüklemeyin.
• Görselleri AVIF veya WebP formatında, ekran boyutuna uygun srcset ile sunun.
• Sunucu yanıt süresini (TTFB) önbellekleme, CDN ve sunucu tarafında oluşturma (SSR) veya statik üretimle düşürün.
• Kritik CSS'i satır içine alın, render'ı engelleyen betikleri ertelenmiş (defer) olarak yükleyin.
• Ana içeriği istemci tarafında JavaScript ile oluşturmak yerine HTML içinde doğrudan gönderin.

AVIF ve WebP: hangi görsel formatını kullanmalı?

WebP, JPEG ve PNG'ye kıyasla benzer kalitede belirgin biçimde daha küçük dosyalar üretir ve bugün tüm modern tarayıcılarda desteklenir. AVIF ise çoğu fotoğrafta WebP'den de daha iyi sıkıştırma sağlar ve tarayıcı desteği artık oldukça geniştir. Pratik yaklaşım, görselleri önce AVIF, desteklenmezse WebP olarak sunmak ve bunu bir görsel optimizasyon hattıyla otomatikleştirmektir. Next.js gibi modern çatıların görsel bileşenleri, format seçimini, boyutlandırmayı ve tembel yüklemeyi büyük ölçüde sizin yerinize halleder.

INP nedir ve etkileşim gecikmesi nasıl azaltılır?

INP, kullanıcının sayfadaki tıklama, dokunma ve tuş basma gibi etkileşimlerine sayfanın ne kadar sürede görsel bir yanıt verdiğini ölçer. Bir menü butonuna basıldığında menünün açılması gecikiyorsa ya da bir filtre seçildiğinde ekran bir an donuyorsa INP kötüleşir. Bunun temel nedeni, tarayıcının ana iş parçacığının uzun süren JavaScript görevleriyle meşgul olmasıdır.

• Uzun JavaScript görevlerini daha küçük parçalara bölün ve tarayıcıya araya girme fırsatı verin.
• Kullanılmayan JavaScript'i kaldırın; sayfa başına gönderilen paket boyutunu kod bölme (code splitting) ile küçültün.
• Ağır hesaplamaları etkileşim anından çıkarın; gerekirse Web Worker kullanın.
• Büyük listeleri sanallaştırın, gereksiz yeniden render'ları önleyin.
• Etkileşim sonrası önce görsel geri bildirimi gösterin, ağır işi ardından yapın.

CLS neden oluşur ve sayfa kaymaları nasıl önlenir?

CLS, sayfa yüklenirken içeriğin beklenmedik şekilde yer değiştirmesini ölçer. Bir habere tıklamak üzereyken üstte bir reklamın açılıp metni aşağı itmesi, CLS'nin en tanıdık örneğidir. Boyutu tanımlanmamış görseller ve videolar, sonradan yüklenen reklam ve gömülü içerikler, çerez bildirimleri ve web fontlarının yüklenirken metni yeniden düzenlemesi başlıca nedenlerdir.

• Tüm görsel ve videolara width ve height değerleri ya da CSS aspect-ratio verin.
• Reklam, harita ve gömülü içerikler için önceden sabit yükseklikte alan ayırın.
• Çerez bildirimlerini ve kampanya bantlarını içeriği itmeyecek şekilde, sayfanın üzerine binen katman olarak tasarlayın.
• Animasyonlarda top, left veya height yerine transform ve opacity özelliklerini kullanın.

Fontlar ve üçüncü taraf betikler hızı nasıl etkiler?

Web fontları hem LCP'yi hem CLS'yi etkileyebilir. Font dosyası geç yüklenirse metin ya görünmez kalır ya da yedek fonttan asıl fonta geçerken kayar. Fontları kendi sunucunuzdan barındırmak, yalnızca kullandığınız ağırlıkları ve Türkçe karakterleri içeren alt kümeleri yüklemek, WOFF2 formatını kullanmak, kritik fontu önceden yüklemek (preload) ve font-display ile yedek font ölçülerini eşleştirmek bu sorunları büyük ölçüde çözer.

Üçüncü taraf betikler ise çoğu sitede performansın sessiz katilidir. Analitik araçları, reklam ve yeniden pazarlama pikselleri, canlı destek widget'ları, A/B test araçları ve sosyal medya gömmeleri ana iş parçacığını meşgul eder, ağ isteklerini çoğaltır. Her betiğin gerçekten gerekli olup olmadığını düzenli olarak sorgulayın, mümkün olanları sayfa etkileşime hazır hale geldikten sonra yükleyin ve etiket yöneticisi içinde birikmiş eski etiketleri temizleyin.

Core Web Vitals nasıl ölçülür?

Core Web Vitals ölçümünde iki tür veri vardır: laboratuvar verisi ve saha verisi. Laboratuvar verisi, kontrollü bir ortamda tek bir test çalıştırarak sorunları teşhis etmenize yardımcı olur. Saha verisi ise gerçek kullanıcıların deneyimini gösterir ve Google'ın değerlendirmesinde esas alınan veridir.

1. PageSpeed Insights: Bir URL için hem CrUX saha verisini hem de Lighthouse laboratuvar analizini ve somut iyileştirme önerilerini tek ekranda gösterir.
2. Google Search Console: Core Web Vitals raporu, sitenizdeki URL'leri benzer sayfa grupları halinde iyi, iyileştirilmeli ve zayıf olarak sınıflandırır; mobil ve masaüstünü ayrı raporlar.
3. Chrome UX Report (CrUX): Chrome kullanıcılarından toplanan anonim saha verisidir; aylık eğilimleri ve rakip karşılaştırmalarını incelemek için kullanılabilir.
4. Chrome DevTools ve Lighthouse: Geliştirme sırasında uzun görevleri, LCP öğesini ve kayma kaynaklarını ayrıntılı olarak incelemek için idealdir.
5. Gerçek kullanıcı izleme (RUM): web-vitals kütüphanesi gibi araçlarla kendi analitik sisteminize saha verisi göndermek, sorunları sayfa ve kullanıcı segmenti bazında görmenizi sağlar.

Hızlı bir sitenin işletmeye etkisi nedir?

Core Web Vitals'ı yalnızca bir SEO maddesi olarak görmek, resmin küçük bir parçasına bakmak demektir. Hız, kullanıcının markanız hakkında ilk saniyelerde edindiği izlenimin parçasıdır. Hızlı açılan, dokunulduğunda anında tepki veren ve okurken kaymayan bir sayfa profesyonellik ve güven hissi verir. Yavaş bir sayfa ise reklam bütçenizin bir kısmını, ziyaretçi daha içeriği görmeden harcatır.

Pek çok sektörden yayımlanan vaka çalışmaları, sayfa hızındaki iyileştirmelerin hemen çıkma oranında düşüş, oturum süresinde ve dönüşüm oranında artış ile ilişkili olduğunu tutarlı biçimde gösteriyor. Özellikle mobil trafiğin baskın olduğu Türkiye'de, değişken bağlantı koşullarında hızlı kalan bir site doğrudan rekabet avantajıdır. Ayrıca hızlı ve temiz kodlu bir altyapı, yapay zekâ tarayıcıları dahil tüm botların içeriğinizi daha verimli taramasına da yardımcı olur.

Mikro Dijital'de geliştirdiğimiz sitelerde Core Web Vitals eşiklerini proje başında hedef olarak belirliyor, Next.js ve modern altyapılarla bu hedefleri yayın öncesinde test ediyoruz. Mevcut sitenizin hangi metriklerde geride kaldığını görmek isterseniz, kısa bir performans incelemesiyle başlayabiliriz.