Sayfa Hızı ve Core Web Vitals 2026: Pratik İyileştirme Rehberi

Sayfa hızı, web işlerinin en akıl karı kısmıdır: hiçbir ziyaretçi sitenizin tasarımını övmek için beklemeyi kabul etmez. Google da aynı dille konuşur — Core Web Vitals adını verdiği üç metrikle gerçek kullanıcı deneyimini ölçer ve bu ölçümler arama sinyallerine girer. İyi haber: üç metriğin çoğu sorunu üç klasik suçludan çıkar (görsel, font, script) ve suçluların hepsinin bilinen tedavisi vardır. Bu rehber, ölçümden iyileştirmeye sıralı yol verir; karmaşık araç zinciri gerektirmez.

Üç metrik, insan diliyle

• LCP (Largest Contentful Paint) — ekranın büyük kısmını kaplayan en büyük öğenin (genelde hero görseli ya da büyük başlık) görünmesi. Kullanıcının "açılıyor" hissi bu metrikte saklıdır. Hedef: 2,5 saniyenin altı.
• INP (Interaction to Next Paint) — kullanıcı bir şeye dokunduğunda (menü, buton, form) arayüzün ne hızlı yanıt verdiği. Skor hesaplamayı engellemekten çıkar; yavaş arayüz burada yakalanır. Hedef: 200 milisaniyenin altı.
• CLS (Cumulative Layout Shift) — sayfa yüklenirken öğelerin yer değiştirmesi: okuduğunuz satırın alttan gelen bir görselle kayması, yanlış butona basmak. Hedef: 0,1'in altı.

Üçünün ortak noktası: hepsi gerçek kullanıcıyla ölçülür (Google'ın "alan verisi" dediği şey), laboratuvar skoru değil. Detaylı teknik tanımlar için tek otorite web.dev/vitals sayfasıdır.

Ölçüm: iki pencere, iki veri

1. PageSpeed Insights (PSI) — tek sayfa için hızlı laboratuvar testi; gerçek kullanıcı verisi yeterli biriktiyse onu da gösterir. Rapordaki "teşhis" bölümü, iyileştirme listesini hazır verir.
2. Search Console → Core Web Vitals raporu — sitenin tamamının gerçek kullanıcı verisiyle durum resmi; hangi sayfa gruplarının iyileştirme beklediğini grup bazında söyler.

İki pencerenin farkını bilmek önemli: PSI laboratuvar koşullarında test eder ("telefonunuzda şöyle görünüyor"), Search Console gerçek ziyaretçilerinizin cihaz ve şebekesiyle ölçer. İyileştirme kararı gerçek veriden çıkar; laboratuvar skoru test tezgâhıdır.

Görseller: en büyük kaldıraç

LCP ve genel yükleme süresinin bir numaralı suçlusu. Sıralı müdahale:

• Format: WebP/AVIF gibi modern formatlar, aynı kaliteyi JPG'nin kesirli boyutunda verir. Dönüşüm çoğu araçla toplu yapılabilir.
• Boyut: Genişlik 4000 piksel olan fotoğraf, 800 piksellik alana yerleşecekse 3975 pikseli yedektir. Görseli görüntülenecek boyuta kırpmak, tek başına ciddi küçültmedir.
• Boyut beyanı: Her <img>'ye width ve height verin — tarayıcı yeri baştan ayırır, CLS düşer. Bu, tek satırlık en ucuz düzeltmedir.
• Lazy loading: Ekran altındaki görsellere loading="lazy". Kritik istisna: hero görseline lazy koymak LCP'yi vurur — o görsel tam tersine fetchpriority="high" alır.

Fontlar: görünmez gecikme

Özel yazı tipi, indirilene kadar metni görünmez ya da yedek fontta tutar; yanlış kurulu font, hem LCP hem "yatay yazı zıplaması" yaratır. Tedavi üçlüsü:

• Self-host + modern format: Fontu kendi sunucunuzda woff2 olarak tutmak, üçüncü taraf istekleri budar. (Kendi sitemizde de bu yöntem var: iki font dosyası, self-hosted woff2, sadece kullanılan karakter seti.)
• font-display: swap: Font geç gelirse metin yedek fontta görünür, font gelince değişir — kullanıcı boş ekrana bakmaz.
• preload: Hero'nun kullandığı font dosyası <link rel="preload"> ile öne alınır; ilk boyamada font hazır olur.

JS ve CSS: az ve geç

• Scriptler defer ile yüklenmeli — render engellemesiz. Sayfanın ilk boyamasını bekleten tek bir script, LCP'yi tek başına bozabilir.
• Kullanılmayan kütüphaneleri çıkarın. Bir slider için yüklenen 200 KB'lık kütüphane, tek slider'da kullanılıyorsa güncellemesi de yüküdür. Statik sitede gerekmedikçe framework yüklememek bu yüzden bilinçli bir tercihtir.
• Kritik CSS: İlk ekranda görünen stilin küçük kısmı sayfaya inline edilebilir; kalan CSS normal yoldan gelir. Öncelik sırasında en sonda dener — kazancı siteye göre değişir.

Sunucu ve CDN: mesafenin sınırı

Sayfa ne kadar ince olursa olsun, ziyaretçiden uzak bir sunucu gecikme yaratır. Türkiye'deki ziyaretçiye yurt dışından servis veren bir site, bu gecikmeyi CDN ile budar: içerik dünya genelindeki kenar sunucularda önbelleğe alınır, ziyaretçi en yakından alır. Statik siteler için bu, işlerin büyük kısmını çözer; ayrıca sıkıştırma (gzip/brotli) ve önbellek başlıkları sunucu tarafında bir kez doğru kurulunca her sayfaya bedava hız verir. Yayın akışında CSS/JS dosyalarını sürümlemek (?v=20260905 gibi) ise önbelleğin "eski dosya" tuzağına düşmesini önler — dosya değişince sürümü de değiştirin.

Öncelik sırası: nereden başlamalı?

Sıra	İş	Vurduğu metrik	Zorluk
1	Ölçüm: PSI + Search Console	—	Kolay (yarım saat)
2	Büyük görselleri format+boyut düzelt	LCP	Orta
3	Tüm img'lere width/height	CLS	Kolay
4	Hero görseline lazy KOYMA, öne al	LCP	Kolay
5	Font: self-host + swap + preload	LCP + CLS	Orta
6	Scriptleri defer et, kullanılmayanı at	INP + LCP	Orta
7	CDN + sıkıştırma + önbellek başlıkları	Hepsi	Değişken

Listenin sırası rastgele değil: ölçümsüz iyileştirme, hedefi olmayan atıştırma. İlk iki satır çoğu sitenin en büyük kazancını verir. Site altyapısı bu işleri almaya uygun değilse, bazen çözüm iyileştirme değil yeniden kurulumdur — bunu kurumsal web sitesi tarafında değerlendiriyoruz; maliyet mantığını da fiyat rehberimizde açtık.

Son not: hız tek seferlik proje değil, yayın disiplinidir. Yeni görsel atmak, yeni eklenti eklemek — her biri ölçümün bozulabileceği bir adım. Üç ayda bir PSI turu, sayfa hızını birikmeden yakalar; kontrol listesi yaklaşımının tamamı 25 maddelik rehberimizde duruyor.

Sık sorulanlar