2025'te Web Sitesi Hız Optimizasyonu: Core Web Vitals Rehberi
Google, 2021'den bu yana Core Web Vitals'ı arama sıralama faktörü olarak kullanıyor. Yavaş veya görsel olarak dengesiz bir site, rakipleriniz tarafından geçilmenize yol açar. Bu rehberde, teknik bilgi gerektirmeyen pratik optimizasyon adımlarını bulacaksınız.
Core Web Vitals Nedir?
Google üç temel metrik üzerinden değerlendirme yapar: LCP (Largest Contentful Paint) — sayfanın en büyük içeriğinin yüklenme süresi, hedef 2.5 saniyenin altı. INP (Interaction to Next Paint) — kullanıcı etkileşimine verilen yanıt hızı, hedef 200ms altı. CLS (Cumulative Layout Shift) — sayfa yüklenirken öğelerin kayma miktarı, hedef 0.1 altı. Bu üç metrikte 'İyi' statüsüne ulaşmak, arama sıralamalarınızı olumlu etkiler.
LCP (Yüklenme Hızı) Nasıl İyileştirilir?
Hero bölümündeki büyük görsele priority loading ekleyin (Next.js'te Image component'in priority={true} kullanımı). Hosting sunucusunun yanıt süresi 200ms altında olmalı — Türkiye'de müşterilere hizmet veriyorsanız, sunucu konumu veya CDN önemli. Görselleri WebP formatına dönüştürün, boyutlarını küçültün. Google Fonts gibi üçüncü taraf kaynakları preconnect ile önceden bağlayın.
CLS (Görsel Stabilite) Nasıl İyileştirilir?
Sayfada kayma genellikle boyutsuz görsellerden ve geç yüklenen fontlardan kaynaklanır. HTML'deki tüm img etiketlerine width ve height ekleyin. Fontlar için font-display: swap kullanın. Dinamik banner ve reklam alanlarına sabit yükseklik rezerve edin. Bir sayfa beklenmedik biçimde 'zıplıyorsa', büyük olasılıkla CLS sorunu vardır.
INP (Etkileşim Hızı) Nasıl İyileştirilir?
INP, tıklama veya dokunmadan sonra tarayıcının görsel güncelleştirme yapana kadar geçen süreyi ölçer. Büyük JavaScript dosyaları, ana iş parçacığını (main thread) blokladığında INP yükselir. Kullanılmayan JavaScript'i kaldırın, kritik olmayan kütüphaneleri lazy load edin ve üçüncü taraf scriptleri (analytics, chat) async olarak yükleyin.
Test Araçları
PageSpeed Insights (pagespeed.web.dev): Google'ın resmi test aracı, hem lab hem de gerçek kullanıcı verisi sunar. GTmetrix: Detaylı şelale grafiği ve optimizasyon önerileri için ideal. Chrome DevTools > Lighthouse: Geliştirici ortamında hızlı test için. Search Console > Core Web Vitals raporu: Gerçek kullanıcı verilerinizi izin için zorunlu araç.
Next.js ile Otomatik Optimizasyon Avantajları
Next.js ile geliştirilen siteler, Image Optimization (otomatik boyut, format dönüşümü), font optimizasyonu (next/font), code splitting ve static generation gibi özelliklerle Core Web Vitals açısından büyük avantaj sağlar. Bu nedenle markaizi olarak tüm web projelerinde Next.js tercih ediyoruz.
Core Web Vitals ile SEO Bağlantısı
Google, Core Web Vitals puanlarını 'sayfa deneyimi sinyali' olarak kullanır. Benzer içeriklere sahip iki sayfa arasında, daha iyi Core Web Vitals puanına sahip olan üst sırada gösterilir. E-ticaret siteleri için bu doğrudan gelir etkisi anlamına gelir: 1 saniyelik yükleme süresi gecikmesi, dönüşüm oranını ortalama %7 düşürür.
Core Web Vitals optimizasyonu, hem kullanıcı deneyimini iyileştirir hem de Google sıralamalarını olumlu etkiler. markaizi olarak web tasarım projelerinde hız optimizasyonunu standart sürecimizin parçası yapıyoruz. Sitenizin ücretsiz Core Web Vitals analizini yaptırmak için bizimle iletişime geçin.
Projenizi konuşalım
Ücretsiz danışmanlık için WhatsApp veya iletişim formunu kullanın.