Site hızı: Core Web Vitals'ı anlamak ve gerçekten düzeltmek

"PageSpeed puanımız 92, sorun yok" — bu cümleyi çok duyuyoruz. Sonra Search Console'a bakıyoruz ve gerçek kullanıcı verisinde site "iyileştirme gerekiyor" işaretli çıkıyor.

Sebep basit: puan ile deneyim aynı şey değil.

Önce şunu ayırın: laboratuvar mı, saha mı?#

İki farklı veri var ve karıştırılıyor:

Laboratuvar verisi (lab) — PageSpeed Insights'ın sizin için o anda çalıştırdığı test. Tek cihaz, tek bağlantı, tek deneme. Kod değişikliğinin etkisini hızlı görmek için iyi.

Saha verisi (field / CrUX) — sitenizi gerçekten ziyaret eden Chrome kullanıcılarından toplanan veri. Son 28 günün gerçek ölçümü.

Google sıralamada saha verisini kullanıyor. Laboratuvar puanınız 100 olabilir ama kullanıcılarınızın çoğu eski Android telefonlarda 3G ile giriyorsa saha verisi kötü çıkar.

Nerede bakılır: Search Console → Deneyim → Core Web Vitals. Buradaki tablo gerçeği gösteriyor.

Üç metrik, üç farklı sorun#

LCP — en büyük içeriğin yüklenme süresi#

Sayfanın en büyük görsel öğesi (genelde hero görseli veya ana başlık) ne zaman görünüyor?

En sık sebepler ve düzeltmeleri:

• Devasa hero görseli. Fotoğraf makinesinden çıkan 4000px'lik görseli olduğu gibi koymak. → WebP/AVIF formatına çevirin, ekran boyutuna göre farklı ölçüler sunun.
• Görselin geç keşfedilmesi. Tarayıcı görseli CSS yüklendikten sonra fark ediyor. → Sayfa üstündeki tek görsele priority / fetchpriority="high" verin.
• Sayfa üstündeki görsele lazy loading uygulamak. Yaygın bir hata: loading="lazy" her görsele eklenirse hero görseli de gecikiyor. → İlk ekranda görünen görsellere lazy loading UYGULAMAYIN.
• Render'ı bloklayan CSS/JS. → Kritik olmayan script'leri defer ile yükleyin.

CLS — düzen kayması#

Sayfa yüklenirken içerik zıplıyor mu? Okumaya başlıyorsunuz, reklam yükleniyor, metin aşağı kayıyor ve yanlış yere tıklıyorsunuz.

En sık sebepler:

• Boyutu belirtilmemiş görseller. <img> etiketine width ve height yazın. Tarayıcı yer ayırıyor, görsel gelince zıplama olmuyor.
• Web fontu yüklenince metnin yeniden akması. → font-display: swap + fallback fontun metriklerini yakınlaştıran size-adjust kullanın. Next.js next/font bunu otomatik yapıyor.
• Üstten inen çerez bildirimi veya duyuru çubuğu. → İçeriği aşağı itmek yerine üzerine binen (overlay) veya alta sabitlenen bir yapı kullanın.
• Sonradan yüklenen reklam/iframe. → Alanı önceden min-height ile ayırın.

CLS genelde en kolay düzeltilen metrik ve etkisi hemen görülüyor.

INP — etkileşime yanıt süresi#

2024'te FID'in yerini aldı. Kullanıcı bir şeye tıkladığında sayfa ne kadar sürede tepki veriyor?

En sık sebep: ana iş parçacığını meşgul eden JavaScript. Genelde suçlu üçüncü taraf script'ler — canlı destek widget'ları, ısı haritası araçları, birden fazla analitik kodu, sosyal medya beslemeleri.

Düzeltme:

• Sayfadaki üçüncü taraf script'leri listeleyin ve her biri için sorun: "Bu gerçekten gerekli mi?" Genelde yarısı kaldırılabiliyor.
• Kalanları geciktirin: kullanıcı etkileşime geçene kadar yüklemeyin.
• Kendi kodunuzda uzun süren işlemleri bölün.

Öncelik sırası#

Hepsini birden yapmaya çalışmayın. Etki/emek oranına göre sıra:

1. Görselleri optimize edin (WebP/AVIF + doğru boyut + hero'ya priority) — en büyük etki, en az emek
2. Görsellere width/height ekleyin — CLS'yi genelde tek başına çözüyor
3. Gereksiz üçüncü taraf script'leri kaldırın — INP'de en büyük fark
4. Fontları kendi sunucunuzdan servis edin — hem hız hem gizlilik
5. Kullanılmayan CSS/JS'i temizleyin — en zahmetli, en son

Ölçüm alışkanlığı#

• Değişiklikten önce ve sonra ölçün. Ölçmeden yapılan optimizasyon tahmin.
• Saha verisi 28 gün geriye bakıyor. Bugün yaptığınız düzeltme Search Console'a yarın yansımıyor — sabırlı olun, ama laboratuvar verisinden anında geri bildirim alabilirsiniz.
• Mobilde ölçün. Masaüstü puanı neredeyse her zaman daha iyi ve yanıltıcı.

Ne zaman hız yeterli#

Şunu da söylemek gerek: hız bir noktadan sonra getirisi azalan bir yatırım. LCP'yi 4 saniyeden 2 saniyeye indirmek dönüşümü belirgin etkiliyor; 1,2 saniyeden 0,9'a indirmek için harcanan emek genelde başka bir işe daha iyi yatırılır.

Üç metrikte de "iyi" bandındaysanız durun ve enerjinizi içeriğe veya dönüşüm optimizasyonuna verin.

Kendi sitenizi kontrol etmek#

# Sayfanın gerçek boyutunu ve en ağır kaynaklarını görün
curl -s -o /dev/null -w "toplam: %{size_download} bayt · süre: %{time_total}s\n" https://siteniz.com

Ardından tarayıcıda: DevTools → Network → Disable cache → sayfayı yenileyin. Boyuta göre sıralayın; listenin başındaki 3 dosya genelde sorunun kaynağı.