Web Sitesi Hız Optimizasyonu 2026: Core Web Vitals (LCP, INP, CLS) ve Gerçek Dönüşüm Etkisi
Her 100ms ek yüklenme süresi dönüşümü ~%1 düşürüyor. Google Core Web Vitals'ı sıralama sinyali olarak kullanıyor. 2026 playbook'u: neyi ölçmeli, önce neyi düzeltmeli ve rakamları gerçekten hareket ettiren Next.js optimizasyonları.
Sık gördüğümüz kalıp: Lighthouse skoru 30'larda olan ve Google'ın üçüncü sayfasında takılan bir site. Odaklanılmış dört günlük performans çalışması ve birkaç mimari değişiklik, skoru 90'ın üzerine çıkarır. Google hız'ı sıralama faktörü olarak kullanıyor ve skor düzeldikten sonra sıralamalar genelde birkaç hafta içinde hareketlenmeye başlar. Yavaş site = düşük sıralama = kayıp müşteri.
LCP (Largest Contentful Paint): Sayfanın en büyük öğesinin ne kadar sürede göründüğü. 2.5 saniyenin altı olmalı. Genelde suçlu: 3MB'lık optimize edilmemiş hero görseli, render'ı bloke eden JavaScript ve yavaş sunucu. Biz ne yapıyoruz: next/image ile otomatik WebP dönüşümü ve lazy load, kritik CSS'i inline alıyoruz, ekranın üst kısmını SSR veya SSG ile sunuyoruz.
INP (Interaction to Next Paint): Kullanıcı tıkladığında sitenin ne kadar hızlı tepki verdiği. 200ms altı olmalı. Sıkça gördüğümüz sorunlar: ana thread'i bloke eden ağır JavaScript, analytics ve chat widget'ları gibi üçüncü parti scriptler, karmaşık state güncellemeleri. Çözümümüz: dynamic import ile uzun görevleri parçalıyoruz, kritik olmayan scriptleri erteliyoruz, pahalı hesaplamaları React.memo ile izole ediyoruz.
CLS (Cumulative Layout Shift): Sayfa yüklenirken içeriğin zıplaması. Görsel yüklenirken metnin aşağı kayması, reklam girdiğinde sayfanın oynaması. 0.1 altı olmalı. Gördüğümüz yaygın sebepler: boyut belirtilmemiş görseller, dinamik enjekte edilen içerik, font yüklenirken metin değişmesi. next/image boyutları otomatik ayarlıyor, next/font font değişimini ortadan kaldırıyor, dinamik alanlara CSS min-height ile yer ayırıyoruz.
Nasıl ölçüyoruz: Google PageSpeed Insights (pagespeed.web.dev) lab ve alan verisi veriyor. Chrome DevTools Performance sekmesi detaylı waterfall gösteriyor. Gerçek kullanıcı verisi için Google Search Console veya Vercel Speed Insights kullanıyoruz.
Next.js'te elimizdeki silahlar: Image bileşeni LCP sorunlarının %80'ini tek başına çözüyor. next/font, font kaynaklı CLS'yi sıfırlıyor. next/dynamic ile kod bölme INP'yi düşürüyor. App Router'ın sunucu bileşenleri zaten istemciye giden JavaScript'i minimuze ediyor. Streaming SSR ile her şeyi beklemek yerine içerik parça parça gösteriliyor.
Her projede tutturduğumuz standart: LCP 2.5s altı, INP 200ms altı, CLS 0.1 altı, Lighthouse Performance 90+, SEO 95+. Lansmandan önce ölçüyoruz, sonra Vercel Speed Insights ile sürekli takip ediyoruz.
Sitenizin ücretsiz performans analizini ister misiniz? URL'nizi gönderin, neyin yavaşlattığını ve nasıl düzelteceğimizi somut olarak söyleyelim.
Önemli Çıkarımlar
- 01LCP (Largest Contentful Paint) hedefi: 2.5 saniye altı. En büyük suçlular: optimize edilmemiş hero görseller, render'ı bloke eden JS ve yavaş TTFB.
- 02INP (Interaction to Next Paint) hedefi: 200ms altı. Dynamic import ile uzun görevleri parçalayarak, üçüncü parti scriptleri erteleyerek ve pahalı hesaplamaları izole ederek çözülür.
- 03CLS (Cumulative Layout Shift) hedefi: 0.1 altı. Görsel boyutlarını ayarlayarak, next/font kullanarak, dinamik içeriğe min-height ile yer ayırarak çözülür.
- 04Ölçüm: lab ve alan verisi için PageSpeed Insights, waterfall için Chrome DevTools Performance sekmesi, gerçek kullanıcı metriği için Vercel Speed Insights veya Search Console.
- 05Next.js seti: next/image LCP sorunlarının çoğunu çözer, next/font font CLS'i kaldırır, next/dynamic ve App Router server bileşenleri INP'i düşürür, streaming SSR içeriği artan şekilde gösterir.
Sıkça Sorulan Sorular
2026'da iyi bir Core Web Vitals skoru ne?
Google'ın 'iyi' eşikleri: LCP 2.5 saniye altı, INP 200 milisaniye altı ve CLS 0.1 altı. Projelerimizde bunun üzerine Lighthouse Performance 90+ ve SEO 95+ hedefliyoruz, sadece lab testi değil gerçek kullanıcı alan verisiyle ölçüyoruz.
Core Web Vitals'ı düzeltmek gerçekten SEO'mu iyileştirir mi?
Evet. Google Core Web Vitals'ı sıralama sinyali olarak kullanıyor. Lighthouse skoru 30'lardan 90'lara çıktıktan sonra sıralamalar genelde birkaç hafta içinde iyileşmeye başlar çünkü site Page Experience çıtasını geçer ve crawl performansı iyileşir.
Görselleri sıkıştırdığım halde LCP'im neden hala kötü?
LCP'in üç yaygın hata modu var: görselin kendisi, görsel boyanmadan önce render'ı bloke eden JavaScript veya CSS ve yavaş sunucu cevabı (TTFB). Sadece sıkıştırma bunların sadece ilkini çözüyor. Ekran üstü içerik için genelde next/image artı inline kritik CSS artı SSR veya SSG gerekiyor.
INP eski FID metriğinden daha mı zor düzeltilir?
Evet. INP oturum boyunca her etkileşimi ölçer, sadece ilkini değil. Uzun süren JavaScript, ağır üçüncü parti tag'leri ve karmaşık state güncellemeleri FID'in kaçırdığı INP'te ortaya çıkıyor. Çözüm: uzun görevleri parçalamak, kritik olmayan scriptleri ertelemek ve pahalı işi izole etmek.
Projeniz için konuşalım
15 dakika, taahhut yok.