Core Web Vitals Nedir? Web Sitesi Hızı Nasıl Artırılır? (2026 Rehberi)

Telefonda açılması beş saniye süren bir siteyi çoğu ziyaretçi beklemez. Google da bu davranışı ölçer: Core Web Vitals, bir sayfanın ne kadar hızlı yüklendiğini, ne kadar çabuk tepki verdiğini ve yüklenirken ne kadar oynadığını üç ölçümle özetler. Bu rehberde bu ölçümlerin ne anlama geldiğini, nasıl okunacağını ve en sık görülen sorunların nasıl çözüleceğini; kendi sitemizde yaptığımız bir optimizasyondan örneklerle anlatıyoruz.

Core Web Vitals nedir?

Core Web Vitals, Google’ın gerçek kullanıcı deneyimini ölçmek için seçtiği üç temel metriktir. Her biri sayfa deneyiminin farklı bir yönünü anlatır:

• LCP (Largest Contentful Paint): Ekranda görünen en büyük içeriğin (genellikle ana görsel ya da büyük bir başlık) ne zaman göründüğü. İyi eşik: 2,5 saniye veya altı.
• INP (Interaction to Next Paint): Ziyaretçi tıkladığında, dokunduğunda ya da bir tuşa bastığında sayfanın görsel olarak ne kadar çabuk yanıt verdiği. İyi eşik: 200 milisaniye veya altı. INP, 2024 başında FID metriğinin yerini aldı.
• CLS (Cumulative Layout Shift): Sayfa yüklenirken içeriğin beklenmedik biçimde kayması. İyi eşik: 0,1 veya altı.

Google bu değerleri, sayfa ziyaretlerinin %75’i için hem mobilde hem masaüstünde ayrı ayrı değerlendirir. Yani ziyaretçilerinizin dörtte üçünün yaşadığı deneyim “iyi” aralığında olmalıdır.

Hız SEO için ne kadar önemli?

Dürüst cevap: önemli ama tek başına yeterli değil. Core Web Vitals, Google’ın sayfa deneyimi sinyallerinin bir parçasıdır; içeriğin aranan soruya yanıt vermesi, sayfanın güvenilir olması ve diğer sitelerden bağlantı alması çok daha ağır basar. Buna rağmen hızı ihmal etmek üç şekilde zarar verir:

• Ziyaretçi sayfa açılmadan siteyi terk eder; arama ve WhatsApp talebi kaybolur.
• Rakipler içerik olarak yakınken hız, sıralamada ayrıştırıcı olabilir.
• Yavaş ve kayan sayfalar, reklam ve yerel arama trafiğinde dönüşüm oranını düşürür.

Hız çalışması, yerel işletmeler için en hızlı karşılığını veren teknik işlerden biridir. Yerel görünürlük konusunda daha geniş bir çerçeve için yerel SEO nedir yazımıza da göz atabilirsiniz.

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

İki tür veri vardır ve ikisini karıştırmamak gerekir:

• Saha verisi: Gerçek ziyaretçilerin tarayıcılarından toplanan veri. Google’ın sıralamada dikkate aldığı budur. Search Console’daki “Core Web Vitals” raporunda ve PageSpeed Insights’ın üst bölümünde görünür.
• Laboratuvar verisi: Lighthouse’un sahte bir telefon ve yavaş ağ simülasyonuyla yaptığı test. Sorunları bulmak için çok faydalıdır ama her çalıştırmada değişebilir.

Pratik yöntem şöyle: PageSpeed Insights’ta sayfanızı mobil olarak test edin, “Düzeltilmesi gerekenler” bölümünü okuyun ve ölçümü en az üç kez tekrarlayın. Bizim projemizde de aynı sayfa ardışık testlerde farklı LCP değerleri verdi; tek bir ölçüme bakıp karar vermek yanıltıcıdır.

LCP nasıl iyileştirilir?

Önce hangi öğenin LCP olduğunu bulun. PageSpeed raporundaki “LCP öğesi” bölümü bunu gösterir. Çoğunlukla ana sayfa görseli ya da ilk büyük metin bloğudur.

1. Ana görseli doğru biçimde yayınlayın

• WebP veya AVIF kullanın; 1,5 MB’lık bir JPEG’i 100-150 KB’lık WebP’ye çevirmek çoğu zaman en büyük kazançtır.
• Ekran boyutuna göre farklı boyutlar sunun (srcset ve sizes). 360 piksel genişliğindeki bir telefonun 1600 piksellik görsel indirmesi gereksizdir.
• Görsele width ve height ekleyin; böylece tarayıcı yeri önceden ayırır.
• Ekranın üstündeki (LCP) görsele loading="lazy" koymayın; aksine fetchpriority="high" verin. Sayfanın altındaki görseller için ise tembel yükleme doğrudur.

2. İlk ekrandaki içeriği animasyonla gizlemeyin

Bu, sık gözden kaçan bir hatadır. Kaydırınca beliren (scroll reveal) animasyonlar, başlangıçta öğeyi görünmez yapıp JavaScript çalışınca gösterir. Eğer bu öğe LCP öğesiyse, tarayıcı içeriği çoktan indirmiş olsa bile ekranda geç görünür. Kendi sitemizde ana sayfa açıklama paragrafı LCP öğesiydi ve bu animasyon yüzünden geç görünüyordu; ilk ekrandaki öğelerde animasyonu kapattığımızda PageSpeed laboratuvar testinde LCP 4,4 saniyeden 1,0 saniyeye indi.

3. Yazı tiplerini hafifletin

• Yalnızca kullandığınız karakter kümesini (Türkçe için Latin + birkaç ek karakter) içeren yazı tipi dosyasını yayınlayın. Biz iki ana yazı tipini yaklaşık 40’ar KB’a indirdik.
• En kritik iki yazı tipi dosyasını preload ile önceden yükletin.
• Yazı tipi gelmeden metnin kayması sorunu için aşağıdaki CLS bölümüne bakın.

4. Sunucu yanıt süresini kısaltın

İlk byte ne kadar geç gelirse LCP de o kadar geç olur. Statik sayfalar, önbellek ve CDN (örneğin Cloudflare) bu süreyi ciddi biçimde kısaltır. Ayrıntılar için TTFB nedir ve nasıl iyileştirilir yazımızı okuyabilirsiniz.

5. Render’ı engelleyen kaynakları azaltın

Sayfa ilk kez boyanmadan önce indirilmesi gereken büyük CSS dosyaları ve senkron JavaScript, LCP’yi geciktirir. Küçük sitelerde kritik CSS’i sayfanın içine gömmek ve gereksiz betikleri ertelemek iyi bir yaklaşımdır.

INP nasıl iyileştirilir?

INP, sayfanın ana iş parçacığının (main thread) ne kadar meşgul olduğuyla ilgilidir. Ziyaretçi bir düğmeye dokunduğunda tarayıcı başka bir ağır işle uğraşıyorsa tepki gecikir.

• Üçüncü taraf kodları azaltın: Canlı sohbet, reklam ve takip kodları INP’nin en yaygın düşmanlarıdır. Kullanmadığınız her etiketi kaldırın.
• Analitik kodunu sayfa yüklendikten sonra çalıştırın: Biz Google Analytics etiketini, sayfa yüklenip tarayıcı boşta kaldığında yüklüyoruz; ölçüm doğruluğunu korurken ilk yüklemeyi yavaşlatmıyor.
• Uzun görevleri bölün: 50 milisaniyeden uzun süren JavaScript görevleri sayfayı kilitler. Büyük betikleri parçalara ayırın ve gerekmedikçe yüklemeyin.
• Tema ve eklenti sayısını sınırlayın: WordPress sitelerinde her eklenti ek CSS ve JavaScript getirir. Kullanılmayanları kaldırın, ağır sayfa oluşturucuları gözden geçirin.
• Düzen okuma-yazma döngülerinden kaçının: Betiğin aynı anda hem ölçüp hem düzeni değiştirmesi “zorunlu yeniden düzenleme” (forced reflow) uyarısı verir ve sayfayı yavaşlatır.

CLS nasıl iyileştirilir?

Düzen kayması, ziyaretçinin okuduğu satırın aniden aşağı kaymasıdır. En yaygın nedenler:

• Boyutu belirtilmemiş görseller ve iframe’ler: Her zaman width ve height verin ya da CSS’te aspect-ratio kullanın.
• Geç yüklenen yazı tipleri: Yedek yazı tipi ile asıl yazı tipi farklı genişlikte olduğundan satırlar yeniden sarılır. Çözüm: yazı tipini önceden yükletmek ve font-display davranışını bilinçli seçmek ya da yedek yazı tipini size-adjust ile asıl yazı tipine yaklaştırmak.
• Sonradan eklenen içerik: Çerez bildirimi, reklam alanı ya da harita yer ayrılmadan eklenirse altındaki her şey kayar. Bu öğelere sabit yükseklik ayırın.
• Animasyon yöntemi: top/left yerine transform ve opacity kullanın.

Kendi sitemizde yazı tiplerini iyileştirirken önce CLS’in 0’dan 0,165’e çıktığını gördük: Kayan öğe ilk ekrandaki açıklama paragrafıydı ve metinde Türkçe karakterler (ş, ğ, İ) vardı. Bu harfler yazı tipinin ayrı bir “ek” dosyasından geliyordu; dosya geç gelince satırların yeniden sarıldığını düşünüyoruz. Türkçe karakterleri tek bir küçük dosyada toplayıp yazı tiplerini önceden yükletince CLS tekrar 0’a döndü.

WordPress sitelerinde hız için ne yapılmalı?

WordPress’te hızı en çok üç şey belirler: tema, eklenti sayısı ve barındırma. Hazır, çok amaçlı ve her şeyi yapmaya çalışan temalar yüzlerce KB gereksiz CSS ve JavaScript yükler. Mümkünse hafif bir tema ve yalnızca gerçekten kullandığınız bileşenleri seçin.

• Önbellek eklentisi kullanın ve sayfaları statik olarak sunun; her ziyarette veritabanından sayfa üretmek TTFB’yi artırır.
• Görselleri yüklerken değil, yüklenmeden önce küçültün ve WebP’ye çevirin; eklentiler bunu otomatikleştirebilir.
• Kullanmadığınız eklentileri silin (devre dışı bırakmak yetmez, güncellemeleri ve güvenlik riski de sürer).
• Sayfa oluşturucunun ürettiği iç içe geçmiş yapıyı (DOM boyutu) kontrol edin; çok sayıda gereksiz kutu INP’yi kötüleştirir.

Sıfırdan site kurarken bu sorunları baştan yaşamamak için hafif yapı ve statik çıktı tercih etmek mümkün. Süreci adım adım anlatan sıfırdan profesyonel web sitesi nasıl kurulur yazımıza bakabilirsiniz.

Hızı sürekli nasıl takip edersiniz?

Hız, bir kez yapılıp biten bir iş değildir; her yeni görsel, etiket ya da eklenti sonucu değiştirebilir. Basit bir rutin çoğu zaman yeterlidir:

• Önemli sayfalarınızı (ana sayfa, en çok trafik alan hizmet sayfası) ayda bir PageSpeed Insights ile mobil olarak test edin.
• Search Console’da Core Web Vitals raporunu izleyin; “zayıf” ya da “iyileştirme gerekli” grupları ortaya çıkarsa en çok URL içeren gruptan başlayın.
• Siteye yeni bir betik, widget ya da eklenti eklemeden önce ve sonra ölçüm yapın; hangi değişikliğin yavaşlattığını bilmek zaman kazandırır.
• Önemli bir değişiklikten sonra saha verisinin güncellenmesi için yaklaşık dört hafta bekleyin; laboratuvar sonucu hemen, saha sonucu geç yansır.

Hızlı kontrol listesi

• Görseller WebP/AVIF ve doğru boyutta mı?
• Ana görsel ya da başlık gizlenmeden, hemen görünüyor mu?
• Tüm görsellerde ve iframe’lerde boyut bilgisi var mı?
• Yazı tipleri küçültülmüş ve önceden yükleniyor mu?
• Kullanılmayan eklenti, etiket ve betikler kaldırıldı mı?
• Analitik ve reklam kodları sayfa yüklendikten sonra mı çalışıyor?
• Sayfalar önbellekten ya da CDN’den mi sunuluyor?
• Mobil test üç kez tekrarlanıp ortalama değerlendirildi mi?

En sık yapılan hatalar

• Yalnızca masaüstü puanına bakmak; asıl trafik çoğunlukla mobildir.
• Tek bir ölçüme güvenmek; sonuçlar çalıştırmadan çalıştırmaya değişir.
• Puanı yükseltmek için içeriği veya görseli kırpmak; amaç hız kazanmak, siteyi fakirleştirmek değildir.
• Hız eklentisi kurup sorunun kaynağını (ağır tema, çok betik) çözmemek.
• Hızı iyileştirdikten sonra bir daha ölçmemek; yeni eklenen her görsel ve etiket yeniden sorun yaratabilir.

Sonuç: önce ölçün, sonra en büyük sorunu çözün

Core Web Vitals’ı iyileştirmek karmaşık bir proje olmak zorunda değil. Mobil testle LCP öğesini bulun, görselleri ve yazı tiplerini hafifletin, ilk ekrandaki içeriği gizlemeyin, üçüncü taraf kodları azaltın ve boyut bilgisi vermeyi alışkanlık yapın. Bu beş adım çoğu işletme sitesinde metrikleri “iyi” aralığına taşır.

Sitenizin hızını birlikte değerlendirmek isterseniz web tasarım ve SEO hizmetlerimizi inceleyebilir, bize yazarak ücretsiz bir ön değerlendirme alabilirsiniz. SEO uyumlu site kurulumunu uçtan uca anlatan SEO uyumlu web sitesi nasıl kurulur yazımız da bu konuyu tamamlar.