Site Hızı ve Core Web Vitals

📚 Seviye 2 — Uygulama ⏱ ~12 dakika

1. Core Web Vitals Nedir?

Core Web Vitals (CWV), Google'ın kullanıcı deneyimini ölçmek için belirlediği üç temel metriktir. 2021'den beri doğrudan bir sıralama faktörüdür. İyi CWV skorları = daha iyi sıralama potansiyeli.

graph TD CWV["⚡ Core Web Vitals"] LCP["🖼️ LCP
Largest Contentful Paint
En büyük içerik elemanı
ne kadar sürede yüklendi?"] INP["👆 INP
Interaction to Next Paint
Kullanıcı etkileşimine
ne kadar hızlı yanıt verdi?"] CLS["📐 CLS
Cumulative Layout Shift
Sayfa elemanları beklenmedik
şekilde kayıyor mu?"] CWV --> LCP CWV --> INP CWV --> CLS LCP --> LCPG["✅ İyi: ≤2.5s"] LCP --> LCPY["🟡 Orta: 2.5-4s"] LCP --> LCPR["🔴 Kötü: >4s"] INP --> INPG["✅ İyi: ≤200ms"] INP --> INPY["🟡 Orta: 200-500ms"] INP --> INPR["🔴 Kötü: >500ms"] CLS --> CLSG["✅ İyi: ≤0.1"] CLS --> CLSY["🟡 Orta: 0.1-0.25"] CLS --> CLSR["🔴 Kötü: >0.25"] style CWV fill:#29ABE2,stroke:#1E8EBF,color:#fff,stroke-width:2px style LCP fill:#E8F6FC,stroke:#29ABE2,stroke-width:2px style INP fill:#FEF3C7,stroke:#F59E0B,stroke-width:2px style CLS fill:#DCFCE7,stroke:#22C55E,stroke-width:2px style LCPG fill:#DCFCE7,stroke:#22C55E style LCPY fill:#FEF3C7,stroke:#F59E0B style LCPR fill:#FEE2E2,stroke:#EF4444 style INPG fill:#DCFCE7,stroke:#22C55E style INPY fill:#FEF3C7,stroke:#F59E0B style INPR fill:#FEE2E2,stroke:#EF4444 style CLSG fill:#DCFCE7,stroke:#22C55E style CLSY fill:#FEF3C7,stroke:#F59E0B style CLSR fill:#FEE2E2,stroke:#EF4444

2. LCP — Largest Contentful Paint

Sayfadaki en büyük görünür içerik elemanının (hero görseli, büyük metin bloğu, video poster'ı) ne kadar sürede render edildiğini ölçer.

a) Hedef ve Yorumlama

İyi: 2.5 saniye ve altı
Orta: 2.5 - 4 saniye arası
Kötü: 4 saniyenin üzeri

b) LCP'yi İyileştirme

Hero görseli optimize et: WebP format, uygun boyut, sıkıştırma.
Sunucu yanıt süresini azalt: CDN kullan, hosting kalitesini artır.
Render-blocking kaynakları azalt: Kritik olmayan CSS ve JS'i ertele.
Preload kullan: LCP elemanı için <link rel="preload"> ekle.

💡 Benzetme: Restoran Servisi

LCP, restorana oturup ana yemeğin masana gelmesine kadar geçen süre gibidir. Garson hızlı gelse bile mutfak yavaşsa yemek geç gelir. Sunucu hızı (mutfak), görsellerin boyutu (yemeğin hazırlık süresi) ve CDN (mutfağın masana yakınlığı) hep LCP'yi etkiler.

3. INP — Interaction to Next Paint

INP, kullanıcının sayfayla etkileşime girmesi (tıklama, dokunma, yazma) ile tarayıcının görsel olarak yanıt vermesi arasındaki süreyi ölçer. FID'in (First Input Delay) yerini aldı — daha kapsamlıdır çünkü sadece ilk etkileşimi değil, tüm etkileşimleri ölçer.

a) Hedef ve Yorumlama

İyi: 200ms ve altı
Orta: 200ms - 500ms arası
Kötü: 500ms üzeri

b) INP'yi İyileştirme

Uzun JavaScript task'larını böl: 50ms'den uzun süren task'ları küçük parçalara ayır.
Gereksiz JavaScript'i kaldır: Kullanılmayan kodları temizle.
Ana thread'i bloklamaktan kaçın: Ağır işlemleri Web Worker'a taşı.
Üçüncü taraf script'leri minimize et: Chat widget'ları, analitik kodları vb. lazy-load yap.

4. CLS — Cumulative Layout Shift

Sayfa yüklenirken içerik elemanlarının beklenmedik şekilde kaymasını ölçer. Bir butona tıklamaya çalışırken sayfanın kayıp yanlışlıkla reklama basman gibi durumlar CLS sorunudur.

a) Hedef ve Yorumlama

İyi: 0.1 ve altı
Orta: 0.1 - 0.25 arası
Kötü: 0.25 üzeri

b) CLS'i İyileştirme

Görsellere boyut belirt: width ve height attribute'ları ekle.
Reklam alanlarını önceden ayır: Reklam yüklenene kadar boş yer tutucu kullan.
Web fontlarını optimize et: font-display: swap kullan veya önceden yükle.
Dinamik içerik eklerken dikkatli ol: Sayfanın üstüne içerik ekleme, altına ekle.

⚠️ CLS'in Gizli Tetikleyicileri

En yaygın CLS sorunları: boyutsuz görseller, geç yüklenen reklamlar, dinamik olarak eklenen banner'lar ve font değişimleri. Bir e-ticaret sitesinde ürün görseli boyutsuz bırakılırsa, görsel yüklendiğinde altındaki fiyat ve "Sepete Ekle" butonu aşağı kayar — kullanıcı yanlış yere tıklar, sinir olur ve sayfayı terk eder.

5. Ölçüm Araçları

a) PageSpeed Insights

Google'ın resmi aracı. URL gir, hem lab hem field (sahadan) verilerini gösterir. Puan 0-100 arası: 90+ yeşil (iyi), 50-89 turuncu (orta), 0-49 kırmızı (kötü).

b) Google Lighthouse

Chrome DevTools'ta (F12 → Lighthouse sekmesi) çalışan performans denetim aracı. Performance, Accessibility, Best Practices ve SEO kategorilerinde puan verir.

c) Chrome DevTools — Performance Sekmesi

Detaylı performans analizi için. Sayfa yüklemesini kaydedip her bir kaynağın ne zaman yüklendiğini, hangi script'in ana thread'i bloke ettiğini görebilirsin.

graph LR OL["📊 Ölçüm Araçları"] PSI["PageSpeed
Insights
Field + Lab data
Basit URL girişi"] LH["Lighthouse
DevTools içinde
Detaylı denetim"] DT["Chrome
DevTools
Performance tab
Derinlemesine analiz"] SC["Search Console
CWV Raporu
Tüm site geneli
Field data"] OL --> PSI OL --> LH OL --> DT OL --> SC style OL fill:#29ABE2,stroke:#1E8EBF,color:#fff,stroke-width:2px style PSI fill:#DCFCE7,stroke:#22C55E,stroke-width:2px style LH fill:#E8F6FC,stroke:#29ABE2,stroke-width:2px style DT fill:#FEF3C7,stroke:#F59E0B,stroke-width:2px style SC fill:#F5F7FA,stroke:#64748B,stroke-width:2px

6. Field Data vs Lab Data

a) Lab Data (Laboratuvar Verisi)

Kontrollü bir ortamda (sabit bağlantı hızı, belirli cihaz) ölçülen veri. Lighthouse ve PageSpeed Insights'ın lab bölümü. Sorunları tespit etmek için harika ama gerçek kullanıcı deneyimini yansıtmayabilir.

b) Field Data (Saha Verisi)

Gerçek kullanıcılardan toplanan veri. Chrome User Experience Report (CrUX) veritabanından gelir. PageSpeed Insights'ın üst bölümü ve Search Console CWV raporu field data gösterir. Google sıralama için field data'yı kullanır.

📌 Pratik İpucu

Lab data'da skor iyi ama field data'da kötüyse, sorun kullanıcılarının cihaz ve bağlantı kalitesinde olabilir. Türkiye'deki kullanıcıların önemli bir kısmı orta segment mobil cihaz ve 4G bağlantı kullanıyor. Optimize ederken bu gerçeği göz önünde bulundur — sadece MacBook Pro ve fiber bağlantıyla test etme.

7. Temel Optimizasyon Yöntemleri

a) Önbellekleme (Caching)

Tarayıcı cache: Statik dosyaları (CSS, JS, görseller) tarayıcıda sakla. Cache-Control header'ı ile süre belirle.
Sunucu cache: Dinamik sayfaları sunucu tarafında cache'le (Redis, Varnish).

b) CDN (Content Delivery Network)

İçeriği dünya genelindeki sunuculara dağıtarak kullanıcıya en yakın sunucudan sunar. Türkiye'deki bir site Cloudflare CDN kullanırsa, İstanbul'dan giren kullanıcı İstanbul POP'undan, Ankara'dan giren Ankara'ya en yakın sunucudan içerik alır.

c) Görsel Optimizasyonu

WebP formatı kullan (JPEG/PNG yerine %25-35 küçük).
Responsive görseller: srcset ile farklı ekran boyutlarına farklı görsel sun.
Lazy loading: loading="lazy" ile ekranın dışındaki görselleri sonradan yükle.
Above-the-fold görselleri preload et.

d) JavaScript ve CSS Optimizasyonu

Minify (küçültme): Boşluk, yorum satırlarını kaldır.
Kritik CSS'i inline yap, geri kalanı ertelenerek yükle.
Gereksiz JavaScript'i kaldır veya defer/async ile yükle.

📌 Hızlı Kazanımlar

Eğer müşterinin sitesini ilk kez analiz ediyorsan, en hızlı iyileştirmeler genellikle şunlardır: (1) Görselleri sıkıştır ve WebP'ye dönüştür, (2) Kullanılmayan CSS/JS'i kaldır, (3) Lazy loading ekle, (4) CDN etkinleştir. Bu dört adım çoğu sitede LCP'yi ciddi ölçüde iyileştirir.

📝 Quiz — Bilgini Test Et

← Önceki Ders Sonraki Ders →