Web Sitesi Hız Optimizasyonu: Core Web Vitals Rehberi

Core Web Vitals Nedir ve Neden Önemlidir?

Google, 2021'den beri web sitelerinin hızını ve kullanıcı deneyimini sıralama faktörü olarak değerlendiriyor. Core Web Vitals, bu değerlendirmenin temelini oluşturan üç kritik metrik. 2026'da bu metrikler daha da önem kazandı çünkü Google, kullanıcı deneyimine dayalı sıralama sinyallerini güçlendirmeye devam ediyor.

Araştırmalar, sayfa yükleme süresinin 1 saniyeden 3 saniyeye çıkmasının hemen çıkma oranını %32 artırdığını gösteriyor. 5 saniyeye çıktığında bu oran %90'a ulaşıyor. Yani web sitenizin hızı, doğrudan gelir kaybına neden olabilir. Exludio'nun performans optimizasyon hizmetleri ile sitenizi hızlandırabilirsiniz.

Üç Temel Core Web Vitals Metriği

1. LCP (Largest Contentful Paint)

LCP, sayfadaki en büyük içerik öğesinin ne kadar sürede yüklendiğini ölçer. Bu genellikle hero görseli, büyük bir metin bloğu veya video thumbnail'i olabilir. Google'ın beklentisi:

• İyi: 2.5 saniyenin altında
• İyileştirme gerekli: 2.5 - 4 saniye arası
• Kötü: 4 saniyenin üzerinde

LCP'yi iyileştirmek için en etkili yöntemler:

• Görselleri WebP veya AVIF formatına dönüştürün — dosya boyutunu %50-80 azaltır
• Hero görseli için fetchpriority="high" ve loading="eager" kullanın
• Kritik CSS'i inline olarak ekleyin, geri kalanı async yükleyin
• Server-side rendering (SSR) veya static site generation (SSG) kullanın
• CDN kullanarak içeriği kullanıcıya en yakın sunucudan servise edin

2. INP (Interaction to Next Paint)

INP, 2024'te FID'nin yerini alan yeni metrik. Kullanıcının sayfayla etkileşime geçtiğinde (tıklama, dokunma, klavye girişi) tarayıcının ne kadar sürede görsel yanıt verdiğini ölçer. Google'ın beklentisi:

• İyi: 200 milisaniyenin altında
• İyileştirme gerekli: 200 - 500 milisaniye arası
• Kötü: 500 milisaniyenin üzerinde

INP iyileştirme stratejileri:

• Ağır JavaScript hesaplamalarını Web Worker'lara taşıyın
• Uzun görevleri (Long Tasks) daha küçük parçalara bölün
• Gereksiz üçüncü parti scriptleri kaldırın veya gecikmeli yükleyin
• Event handler'ları optimize edin, debounce/throttle kullanın
• React kullanıyorsanız useMemo ve useCallback ile gereksiz render'ları önleyin

3. CLS (Cumulative Layout Shift)

CLS, sayfa yüklenirken içeriklerin beklenmedik şekilde kaymasını ölçer. Bir butona tıklamak üzereyken sayfanın kayması ve yanlış yere tıklamanız — işte CLS bunu ölçer. Google'ın beklentisi:

• İyi: 0.1'in altında
• İyileştirme gerekli: 0.1 - 0.25 arası
• Kötü: 0.25'in üzerinde

CLS'yi düzeltmenin yolları:

• Tüm görsellere width ve height attribute'u ekleyin
• Reklam alanları için önceden yer ayırın (placeholder)
• Web fontları için font-display: swap kullanın ve fallback font boyutlarını eşleştirin
• Dinamik içerikleri (cookie banner, bildirimler) sayfanın üstüne değil altına veya overlay olarak ekleyin
• Lazy load edilen görseller için aspect-ratio CSS özelliğini kullanın

Görsel Optimizasyonu: En Büyük Hız Kazanımı

Web sayfalarının ortalama boyutunun %50'sinden fazlasını görseller oluşturuyor. Bu nedenle görsel optimizasyonu, hız iyileştirmelerinde en büyük etkiyi sağlayan alan.

Modern Görsel Formatları

2026'da kullanmanız gereken görsel formatları:

• WebP: JPEG'den %25-35 daha küçük, tüm modern tarayıcılarda desteklenir
• AVIF: WebP'den bile %20 daha küçük, giderek artan tarayıcı desteği
• SVG: Logo, ikon ve basit grafikler için mükemmel — ölçeklendirilebilir ve çok küçük dosya boyutu

HTML <picture> elementi ile modern format desteği olmayan tarayıcılar için fallback sağlayabilirsiniz.

Responsive Görseller

srcset ve sizes attribute'ları kullanarak tarayıcının ekran boyutuna uygun görseli yüklemesini sağlayın. Mobilde 2000px genişliğinde bir görseli yüklemeye gerek yok — 800px yeterlidir. Bu basit değişiklik bile sayfa boyutunu dramatik şekilde azaltabilir.

JavaScript Optimizasyonu

Aşırı JavaScript kullanımı, web sitesi performansının en büyük düşmanlarından biridir. Özellikle React, Vue gibi framework'ler kullanıyorsanız JavaScript bundle boyutuna dikkat etmeniz kritik.

Code Splitting

Tüm JavaScript'i tek bir dosyada göndermek yerine, sayfa bazında ayırın. Next.js gibi framework'ler bunu otomatik olarak yapar, ancak büyük kütüphaneleri (chart.js, moment.js vb.) dynamic import ile lazy load etmek gerekir.

Tree Shaking

Kullanmadığınız kodu bundle'dan çıkarın. Örneğin Lodash kütüphanesinin tamamını import etmek yerine sadece ihtiyacınız olan fonksiyonları import edin: import debounce from 'lodash/debounce'

Üçüncü Parti Scriptler

Google Analytics, Facebook Pixel, canlı sohbet widget'ları, reklam scriptleri… Her biri sayfa hızınızı olumsuz etkiler. Bu scriptleri mutlaka gözden geçirin:

• Gerçekten kullanmadıklarınızı kaldırın
• Kalması gerekenleri async veya defer ile yükleyin
• Mümkünse kullanıcı etkileşimi sonrası (scroll, click) yüklenecek şekilde geciktirin

Sunucu Tarafı Optimizasyonlar

CDN (Content Delivery Network)

CDN, içeriğinizi dünya genelindeki sunuculara dağıtarak kullanıcıya en yakın sunucudan servis eder. Cloudflare, AWS CloudFront veya Vercel Edge Network gibi CDN'ler, özellikle uluslararası trafiği olan siteler için vazgeçilmezdir. CDN kullanımı TTFB (Time to First Byte) değerini %40-60 iyileştirebilir.

HTTP/3 ve QUIC Protokolü

2026'da HTTP/3 desteği yaygınlaştı. HTTP/2'ye kıyasla bağlantı kurma süresini önemli ölçüde azaltan ve paket kaybına karşı daha dayanıklı olan HTTP/3, özellikle mobil kullanıcılar için büyük fark yaratıyor. Hosting sağlayıcınızın HTTP/3 desteği olduğundan emin olun.

Caching Stratejileri

Doğru cache yapılandırması, tekrar eden ziyaretçiler için sayfa yükleme süresini dramatik şekilde kısaltır:

• Browser cache: Statik dosyalar (CSS, JS, görseller) için uzun süreli cache header'ları ayarlayın
• Server-side cache: Sık değişmeyen sayfaları Redis veya Memcached ile önbelleğe alın
• Stale-while-revalidate: Eski cache'i gösterirken arka planda yeni versiyonu getirin
• ISR (Incremental Static Regeneration): Next.js kullanıyorsanız, sayfaları belirli aralıklarla yeniden oluşturun

Core Web Vitals Ölçüm Araçları

Sitenizin performansını düzenli olarak ölçmek ve izlemek için şu araçları kullanabilirsiniz:

• Google PageSpeed Insights: Hem lab hem de saha verilerini gösteren en kapsamlı ücretsiz araç
• Google Search Console: Core Web Vitals raporu ile tüm sayfalarınızın gerçek kullanıcı verilerini görün
• Chrome DevTools: Lighthouse ve Performance paneli ile detaylı analiz yapın
• WebPageTest: Farklı lokasyon ve cihazlardan detaylı performans testi
• Chrome UX Report (CrUX): Gerçek kullanıcı verilerine dayalı performans raporu

Performans Bütçesi Oluşturun

Performans bütçesi, web sitenizin performans metriklerinin aşmaması gereken sınırları belirleyen bir stratejidir:

• Toplam sayfa boyutu: maksimum 1.5 MB
• JavaScript boyutu: maksimum 300 KB (sıkıştırılmış)
• Görsel boyutu: maksimum 500 KB
• HTTP istek sayısı: maksimum 50
• LCP: 2.5 saniyenin altında

CI/CD pipeline'ınıza performans testlerini ekleyerek her deploy öncesi bu bütçenin aşılıp aşılmadığını otomatik kontrol edebilirsiniz.

Sonuç: Hız = Gelir

Web sitesi hızı sadece teknik bir metrik değil, doğrudan iş sonuçlarınızı etkileyen kritik bir faktör. Her 1 saniyelik gecikme, dönüşüm oranınızı %7 azaltabilir. Core Web Vitals optimizasyonu ile hem Google sıralamalarınızı yükseltir hem de ziyaretçilerinize mükemmel bir deneyim sunarsınız.

Web sitenizin performansını profesyonel olarak analiz ettirmek ve optimize etmek için Exludio ekibiyle iletişime geçin. Ücretsiz performans denetimi ile sitenizin mevcut durumunu değerlendirelim ve hız kazanımı fırsatlarını belirleyelim.