Web Sitesi Hızlandırma: 2026'da Core Web Vitals Nasıl İyileştirilir?

Google'ın PageSpeed Insights aracına sitenizin adresini yazdığınızda çıkan o kırmızı veya sarı skor sizi rahatsız ediyorsa, yalnız değilsiniz. Web sitesi hızı artık yalnızca teknik bir detay değil; arama motoru sıralamasını, kullanıcı deneyimini ve dönüşüm oranını doğrudan etkileyen kritik bir faktör. Bu rehberde Core Web Vitals metriklerini parçalıyoruz ve PageSpeed skorunuzu 90'ın üzerine taşıyacak somut adımları sıralıyoruz.

Core Web Vitals Nedir? LCP, INP ve CLS Açıklaması

Google, 2021 yılından itibaren Core Web Vitals'ı sıralama faktörü olarak kabul etti. Bu üç metrik, kullanıcının sayfayı nasıl hissettiğini sayısal olarak ifade eder:

• LCP — Largest Contentful Paint (En Büyük İçerikli Boyama): Sayfadaki en büyük görsel veya metin bloğunun ekranda belirme süresi. İyi: 2,5 sn altı. Kötü: 4 sn üzeri.
• INP — Interaction to Next Paint (Etkileşimden Sonraki Boyamaya Kadar): Mart 2024'te FID'in yerini aldı. Kullanıcının tıklama/dokunma gibi bir eylemi gerçekleştirmesinden tarayıcının ekranı güncellemesine kadar geçen süre. İyi: 200ms altı. Kötü: 500ms üzeri.
• CLS — Cumulative Layout Shift (Birikimli Düzen Kayması): Sayfa yüklenirken öğelerin beklenmedik biçimde kayması. "Gönder" butonuna tıklayacakken reklam yüklendi ve butonu kaydı mı? İşte bu CLS sorunudur. İyi: 0,1 altı. Kötü: 0,25 üzeri.

Google'ın Hız Sıralama Faktörü: Sayısal Verilerle Etki

Google'ın kendi araştırmalarına göre sayfa yükleme süresi 1 saniyeden 3 saniyeye çıktığında hemen çıkma olasılığı (bounce rate) %32 artıyor. 5 saniyeye ulaştığında bu oran %90'a yükseliyor. Portent'in e-ticaret araştırması ise 1 saniyelik bir yükleme süresinin, 5 saniyelik bir siteye kıyasla %3 daha yüksek dönüşüm oranı sağladığını ortaya koyuyor.

Sıralama etkisi açısından ise Google, Core Web Vitals'ın "page experience" sinyalinin bir parçası olduğunu ve diğer koşullar eşit olduğunda iyi skora sahip sayfaların öne çıktığını belirtiyor. Bu nedenle SEO optimizasyonu çalışmalarının ayrılmaz bir parçası haline geldi.

Görsel Optimizasyonu: WebP, AVIF ve Lazy Loading

Görseller, web sayfalarının ortalama %60-70'ini oluşturur. Yanlış formatta veya boyutta yüklenen tek bir görsel, LCP skorunuzu çökertebilir.

Format Seçimi

• WebP: JPEG'e göre ortalama %25-35 daha küçük dosya boyutu. Tüm modern tarayıcılar destekler.
• AVIF: WebP'ye göre %20 daha küçük. Chrome ve Firefox destekler; Safari desteği 2023'ten itibaren geldi. En iyi kalite/boyut oranını sunar.
• SVG: Logo, ikon ve illüstrasyonlar için her zaman tercih edilmeli; sonsuz ölçeklenebilir ve dosya boyutu minimumdur.

Lazy Loading

Ekranın hemen dışındaki görseller için HTML'de tek bir attribute yeterli:

Ancak dikkat: Hero bölümündeki LCP görseline asla loading="lazy" eklemeyin. Bu, LCP sürenizi ciddi biçimde uzatır. Hero görseline aksine fetchpriority="high" ekleyin.

CSS ve JavaScript Dosya Optimizasyonu

Minify (Küçültme)

CSS ve JS dosyalarındaki boşluklar, yorum satırları ve gereksiz karakterler dosya boyutunu şişirir. Webpack, Vite veya Rollup gibi build araçları bu işlemi otomatik yapar. Manuel çözüm için cssnano (CSS) ve Terser (JS) tercih edilebilir.

defer ve async Kullanımı

Harici JavaScript dosyaları varsayılan olarak HTML ayrıştırmasını durdurur (render-blocking). Bunu önlemek için:

• <script defer src="app.js"> — HTML tamamen yüklendikten sonra çalışır, sıralamayı korur.
• <script async src="analytics.js"> — HTML'den bağımsız indirilir ve hemen çalışır; sıralama garantisi yoktur. Yalnızca bağımsız scriptler için uygundur (GA, GTM gibi).

Tree Shaking ve Code Splitting

Vite veya Webpack ile kullanılmayan kodu bundle'dan çıkartmak (tree shaking) ve sayfaya özgü kodu ayrı parçalara bölmek (code splitting) bundle boyutunu dramatik biçimde küçültür. Örneğin yalnızca iletişim sayfasında kullanılan form validasyon kütüphanesini ana bundle'a dahil etmeyin.

Tarayıcı Önbelleği (Browser Caching) Ayarları

Bir kullanıcı sitenizi ilk ziyaretinde tüm dosyaları indirir. İkinci ziyarette aynı dosyaları tekrar indirmesi gerekmez; tarayıcı önbelleğinde saklanan dosyalar anında yüklenir.

Apache sunucularda .htaccess dosyasına şu direktifi ekleyin:

Nginx kullanıcıları için location bloklarında expires 1y; direktifi aynı işi görür. Statik varlıklar (görseller, fontlar) için 1 yıl; CSS/JS için dosya hash'i değiştiğinde cache otomatik bozulacağından yine uzun süre belirtilebilir.

CDN Kullanımı: Cloudflare Örneği

CDN (Content Delivery Network), sitenizin statik dosyalarını dünyanın farklı noktalarındaki sunuculara dağıtır. İzmir'deki bir kullanıcı sitenizi ziyaret ettiğinde dosyalar New York'taki ana sunucunuzdan değil, İstanbul veya Frankfurt'taki CDN düğümünden yüklenir. Bu fark, yüzlerce milisaniyelik bir kazanç anlamına gelir.

Cloudflare'in ücretsiz planı küçük ve orta ölçekli siteler için oldukça yeterlidir:

• DNS yönetimi ve proxy
• Otomatik HTTPS ve SSL
• Statik varlık önbellekleme
• DDoS koruması (temel düzey)
• Brotli sıkıştırma (gzip'ten %15-20 daha iyi)

Sunucu Yanıt Süresi (TTFB) İyileştirme

TTFB (Time to First Byte), tarayıcının isteği göndermesinden sunucudan ilk byte'ı almasına kadar geçen süredir. İyi hedef: 200ms altı. TTFB'yi etkileyen başlıca faktörler:

• Hosting kalitesi: Paylaşımlı hosting, VPS ve dedicated sunucu arasında ciddi fark vardır. Trafiğiniz arttıkça hosting planınızı yükseltmek şart olabilir.
• Veritabanı sorguları: WordPress sitelerinde yavaş veya çok sayıda veritabanı sorgusu TTFB'yi artırır. Query Monitor eklentisiyle yavaş sorguları tespit edebilirsiniz.
• Sunucu tarafı önbellekleme: WordPress için WP Rocket veya W3 Total Cache; Node.js projeler için Redis ile sayfa önbelleklemesi TTFB'yi dramatik biçimde düşürür.
• PHP versiyonu: PHP 8.x, PHP 7.x'e kıyasla yaklaşık 2 kat daha hızlıdır. Hosting panelinizden PHP versiyonunu güncelleyin.

Critical CSS ve Render-Blocking Resources

Tarayıcı, sayfayı ekranda göstermeden önce tüm CSS dosyalarını işlemek zorundadır. Büyük bir CSS dosyası varsa sayfa "beyaz ekran" olarak bekler. Çözüm: Yalnızca ilk ekranda (above-the-fold) görünen öğelerin stillerini inline olarak HTML'e gömmek, geri kalanı asenkron yüklemek.

Critical CSS'i otomatik olarak çıkarmak için critical npm paketi veya Penthouse aracını kullanabilirsiniz. Sonuç HTML'in <head> bölümünde şöyle görünür:

Font Optimizasyonu: font-display: swap

Google Fonts veya özel fontlar yüklenene kadar tarayıcı metni gizleyebilir (FOIT — Flash of Invisible Text). Bu hem CLS'e hem de kötü kullanıcı deneyimine yol açar. Çözüm:

font-display: swap ile tarayıcı önce sistem fontunu gösterir, özel font yüklenince değiştirir. Böylece kullanıcı boş sayfa görmez. Google Fonts URL'ine &display=swap parametresi eklemek de aynı etkiyi sağlar.

PageSpeed Insights Skorunu 90+ Yapmak İçin Checklist

• Hero görselini WebP/AVIF formatına çevirin ve boyutlandırın (genişlik 1200-1600px yeterli)
• Hero görseline fetchpriority="high", diğer görsellere loading="lazy" ekleyin
• Tüm görsellere width ve height attribute'u ekleyin (CLS önler)
• CSS/JS dosyalarını minify edin
• Harici scriptlere defer veya async ekleyin
• Critical CSS'i inline'a alın, geri kalanını async yükleyin
• Font dosyaları için font-display: swap kullanın
• Browser caching header'larını ayarlayın (min. 1 ay)
• Cloudflare veya benzeri CDN aktive edin
• Sunucu tarafı önbellekleme açın
• Gzip veya Brotli sıkıştırmayı etkinleştirin
• Kullanılmayan CSS ve JS'i kaldırın (Coverage sekmesi ile tespit edin)

Gerçek Örnek: Bir E-Ticaret Sitesinin 45'ten 92'ye Yolculuğu

SRN Dijital olarak geçtiğimiz yıl 200'den fazla ürünü olan bir giyim e-ticaret sitesinin hız optimizasyonunu üstlendik. Başlangıç PageSpeed skoru mobilde 45, masaüstünde 61'di. Sorunları tespit etmek için Chrome DevTools'un Performance paneli ve Lighthouse raporunu kullandık.

Tespit edilen başlıca sorunlar:

• Ürün görselleri JPEG formatında ve optimize edilmemiş halde (ortalama 800KB/görsel)
• 5 adet render-blocking harici script (sosyal medya widget'ları, canlı destek vb.)
• CSS dosyası 280KB, yaklaşık %60'ı kullanılmıyor
• Font dosyaları için font-display tanımlanmamış
• Browser cache header yok

Uygulanan çözümler ve sonuçları:

• Tüm ürün görselleri WebP'ye dönüştürüldü, ortalama boyut 800KB'dan 95KB'a düştü → LCP 6.2sn'den 2.1sn'ye indi
• Sosyal medya widget'ları lazy load ile yüklenir hale getirildi → INP 650ms'den 180ms'ye indi
• PurgeCSS ile kullanılmayan stiller kaldırıldı, CSS 280KB'dan 38KB'a indi
• Cloudflare CDN aktive edildi, TTFB 820ms'den 210ms'ye indi
• CLS'e yol açan görsellere sabit boyut eklendi → CLS 0.31'den 0.04'e indi

Sonuç: Mobil PageSpeed skoru 45'ten 92'ye, masaüstü skoru 61'den 97'ye yükseldi. Organik trafik bir sonraki ay %23 arttı. Bu tür kapsamlı optimizasyon çalışmaları için SEO ve performans hizmetlerimizi inceleyebilir ya da bizimle iletişime geçebilirsiniz. E-ticaret projeleriniz için de benzer hız optimizasyonu süreçlerini uyguluyoruz.