Web Sitesi Hız Optimizasyonu 2026: LCP, INP ve CLS'i Adım Adım İyileştirin

Web Sitesi Hız Optimizasyonu 2026: Core Web Vitals Rehberi

Web sitesi hızı, hem kullanıcı deneyimini hem de Google sıralamasını doğrudan etkiliyor. 2021'den bu yana Core Web Vitals, Google'ın resmi sıralama faktörleri arasında. 2024'te FID (First Input Delay) yerini INP (Interaction to Next Paint) metriğine bıraktı ve standartlar bir kez daha değişti.

Yavaş yüklenen bir sayfa, kullanıcıların %53'ünü 3 saniye dolmadan kaçırıyor. E-ticaret sitelerinde bu oran dönüşüm kaybına direkt yansıyor.

Core Web Vitals Nasıl İyileştirilir? LCP için: büyük görselleri optimize edin, preload ekleyin, CDN kullanın. INP için: JavaScript bundle'ı küçültün, ağır event handler'ları optimize edin. CLS için: görsellere boyut attributu ekleyin, font-display:swap kullanın, dinamik içerik için alan rezerve edin. Hedefler: LCP < 2.5s, INP < 200ms, CLS < 0.1. Ücretsiz Destek →

İçindekiler

1. Core Web Vitals Nedir? 2026 Güncel Metrikler 2. LCP (Largest Contentful Paint) Optimizasyonu 3. INP (Interaction to Next Paint) Optimizasyonu 4. CLS (Cumulative Layout Shift) Optimizasyonu 5. Ölçüm Araçları: Lighthouse, PageSpeed, CrUX 6. Önceliklendirme: Hangi Metrikten Başlamalı? 7. Platform Bazlı Optimizasyon Notları 8. İleri Seviye Teknikler 9. Sık Sorulan Sorular 10. Sonuç ve Aksiyon Planı

Core Web Vitals Nedir? 2026 Güncel Metrikler

Core Web Vitals, Google'ın kullanıcı deneyimini ölçmek için belirlediği üç temel metrik seti. Her metrik, kullanıcı deneyiminin farklı bir boyutunu ölçüyor.

2024'te FID'in yerini alan INP, kullanıcının tüm etkileşim süresini ölçüyor. FID sadece ilk etkileşimi ölçüyordu; INP sayfa boyunca her tıklama, giriş ve etkileşimi izliyor.

Bu üç metriğin tamamında "İyi" aralığına giren siteler, Page Experience sinyalinden pozitif katkı alıyor. Bir veya daha fazla metrikte "Kötü" olan siteler ise bu avantajı kaybediyor.

LCP (Largest Contentful Paint) Optimizasyonu

LCP, viewport'taki en büyük içerik elementinin görünür olma süresini ölçüyor. Bu element genellikle: hero görseli, büyük bir başlık metni veya video thumbnail oluyor.

LCP Elementini Tespit Edin

Chrome DevTools Performance sekmesinden veya Lighthouse raporundan LCP elementini bulun. "LCP Element" satırı, hangi element ölçüldüğünü gösteriyor. Çoğu sitede bu bir <img> elementi oluyor.

Görsel Optimizasyonu

LCP elementi görsel ise şu optimizasyonları uygulayın:

Format dönüşümü: JPEG ve PNG görselleri WebP veya AVIF formatına çevirin. WebP, JPEG'e göre %25-35 daha küçük dosya boyutu sağlıyor. AVIF daha iyi sıkıştırma sunuyor ama browser desteği henüz tam değil. Her ikisini birden sunmak için <picture> elementi kullanın.

Boyut optimizasyonu: Görseli render boyutundan büyük sunmayın. 800px genişliğinde görüntülenen bir görseli 2400px boyutunda yüklemek gereksiz. srcset ile farklı ekran boyutları için uygun görsel boyutları sunun.

Preload: LCP görseli için preload directive ekleyin. Bu, browser'ın görseli diğer kaynaklardan önce yüklemesini sağlıyor: <link rel="preload" as="image" href="lcp-gorsel.webp" fetchpriority="high"

Lazy loading'i kaldırın: LCP elementi için loading="lazy" kullanmayın. Lazy loading, görsel viewport'a girene kadar yüklemeyi bekliyor ve LCP süresini uzatıyor.

CDN Kullanımı

CDN (Content Delivery Network), görselleri kullanıcıya coğrafi olarak yakın sunuculardan sunuyor. Türkiye'deki kullanıcılar için Avrupa edge node'larına sahip CDN'ler TTFB'yi düşürüyor. Cloudflare, Fastly ve AWS CloudFront yaygın seçenekler.

TTFB (Time to First Byte)

LCP süresinin büyük bölümünü sunucu yanıt süresi oluşturabilir. TTFB > 800ms ise hosting altyapısını gözden geçirin. Statik sayfalar için cache layer ekleyin. Next.js ve benzeri framework'lerde ISR, statik HTML önbellekleme sağlıyor.

INP (Interaction to Next Paint) Optimizasyonu

INP, kullanıcının sayfayla etkileşime geçtiği andan (tıklama, tuş basımı) tarayıcının görsel güncelleştirmeyi tamamladığı ana kadar geçen süreyi ölçüyor. 200ms altı hedef.

INP sorunları genellikle uzun JavaScript task'larından kaynaklanıyor. Main thread'de 50ms'yi aşan task'lar, etkileşim yanıt süresini uzatıyor.

JavaScript Bundle Optimizasyonu

Code splitting: Tüm JavaScript'i tek bir dosyada göndermek yerine, sayfa bazında split edin. Next.js otomatik code splitting yapıyor. Diğer framework'ler için dynamic import kullanın.

Tree shaking: Kullanılmayan kod bloklarını bundle'dan çıkarın. Webpack ve Rollup, default olarak tree shaking destekliyor. Ancak side effect içeren kütüphaneler bazen yanlış tree shake ediliyor.

Third-party script'leri erteleyin: Analytics, chat widget, reklam script'leri main thread'i meşgul ediyor. Bu script'leri defer veya async attribute ile yükleyin. Kritik olmayan script'leri requestIdleCallback ile boşta çalıştırın.

Event Handler Optimizasyonu

Ağır hesaplama yapan event handler'lar INP'yi olumsuz etkiliyor.

Debouncing: Sürekli tetiklenen event'ler (scroll, resize, input) için debounce uygulayın. Her tetiklemede hesaplama yapmak yerine kullanıcı durduğunda hesaplayın.

Web Workers: Ağır hesaplama işlemlerini main thread'den Web Worker'a taşıyın. Görsel işleme, büyük veri analizi ve şifreleme işlemleri için ideal.

Virtualization: Uzun listeler için virtual scroll/windowing uygulayın. Sadece viewport'ta görünen öğeleri render edin. react-window veya @tanstack/virtual kütüphaneleri bu amaçla kullanılıyor.

CLS (Cumulative Layout Shift) Optimizasyonu

CLS, sayfa yüklenirken veya kullanıcı etkileşimi sırasında içeriğin ne kadar kaydığını ölçüyor. Bir kullanıcı bir butona tıklamak üzereyken buton kaydıysa, bu CLS'e katkıda bulunuyor.

Görsel ve Video Boyutları

En yaygın CLS nedeni, boyut attribute'u olmayan görseller. Görsel yüklenene kadar tarayıcı alan ayırmıyor; görsel geldiğinde içerik aşağı kayıyor.

Tüm görseller için width ve height attribute'u ekleyin: <img src="..." width="800" height="450" alt="..."

CSS aspect-ratio özelliği de kullanılabilir: img { aspect-ratio: 16/9; width: 100%; }

Font Yükleme

Web fontları yüklenene kadar sistem fontu gösteriliyor; font geldiğinde metin boyutu değişiyor ve içerik kayıyor (FOUT - Flash of Unstyled Text).

Çözüm: font-display: swap kullanın. Sistem fontunu hemen gösterin, özel font geldiğinde değiştirin. next/font veya Google Fonts ile bu davranış otomatik olarak yönetiliyor.

Font preload: Kritik fontları preload edin: <link rel="preload" as="font" href="font.woff2" crossorigin

Dinamik İçerik

Banner'lar, bildirimler, cookie consent'ler veya geç yüklenen widget'lar CLS'e neden olabilir. Bu elementler için baştan alan rezerve edin. "Sonradan çıkan" banner'ları sayfa yüklemesinin başında placeholder ile gösterin.

Ölçüm Araçları: Lighthouse, PageSpeed, CrUX

Google PageSpeed Insights (PSI): Hem lab hem de alan verisi sunuyor. CrUX (Chrome User Experience Report) verisi ile gerçek kullanıcı deneyimini ölçüyor. Önce alan verisine bakın; lab verisi her zaman gerçeği yansıtmıyor.

Lighthouse: Chrome DevTools veya CLI üzerinden çalışıyor. Kontrollü lab ortamında ölçüm yapıyor. Simüle edilmiş yavaş ağ ve CPU throttling ile düşük end cihazları simüle ediyor.

Chrome User Experience Report (CrUX): Gerçek kullanıcı verisi. 28 günlük medyan ve 75. percentile değerleri sunuyor. CrUX Dashboard ile trend takibi yapabilirsiniz.

WebPageTest: Gelişmiş waterfall analizi, filmstrip görünümü ve global konum testleri. INP optimizasyonu için detaylı task analizi sunan en güçlü araç.

Önceliklendirme: Hangi Metrikten Başlamalı?

Önce PageSpeed Insights veya Search Console'dan mevcut durumu ölçün. En düşük skorlu metrikten başlayın.

Genellikle şu sıralama geçerli: Önce LCP (en yaygın sorun, görsel optimizasyonu ile hızlı kazanım). Sonra CLS (görsel boyutları eklemek hızlı düzeltme). En son INP (JavaScript optimizasyonu zaman alıyor).

Platform Bazlı Optimizasyon Notları

WordPress/WooCommerce: WP Rocket veya LiteSpeed Cache ile önbellekleme. Görseller için ShortPixel veya Imagify. Kullanılmayan plugin'leri kaldırın; her plugin HTTP isteği ekliyor.

Shopify: Theme seçimi kritik. Ağır tema script'leri INP'yi olumsuz etkiliyor. App'leri minimumda tutun. Shopify CDN kullanın ama görselleri theme içinde optimize edin.

Next.js: next/image, next/font ve Script bileşenlerini kullanın. ISR ile statik önbellekleme. Bundle analyzer ile gereksiz kütüphaneleri tespit edin.

İleri Seviye Teknikler

Resource Hints: dns-prefetch, preconnect ve preload directive'leri ile kritik kaynakları erken yükleyin. Üçüncü taraf domain'ler için preconnect ekleyin.

Critical CSS: Sayfa yüklenirken görünen içeriğin CSS'ini inline olarak HTML'e gömün. Bu, FOUC (Flash of Unstyled Content) ve CLS'i azaltıyor.

Service Worker: Tekrar ziyaretler için kritik kaynakları önbellekte tutun. Cache-first stratejisi ile statik dosyaları service worker üzerinden sunun.

Sık Sorulan Sorular

Lighthouse skoru 100 olmak zorunda mı? 100 puan hedef olabilir ama zorunlu değil. Google, arama sıralamalarında Lighthouse lab skoru değil CrUX alan verisini kullanıyor. 90+ lab skoru ile iyi bir alan verisi kombinasyonu yeterli. Rakiplerinizin skorlarını da göz önünde bulundurun.

Mobile ve desktop Core Web Vitals ayrı mı değerlendiriliyor? Evet, Google mobil ve desktop verileri ayrı izliyor. Mobil kullanıcılar daha yavaş ağ ve düşük performanslı cihaz kullandığı için mobil skorlar genellikle daha düşük. Önce mobil optimizasyona odaklanın; Google primary indexing için mobil kullanıyor.

INP neden FID'den daha zor optimize edilir? FID sadece ilk etkileşimi ölçüyordu ve genellikle sayfa yükleme sonrası JavaScript parse süresiyle ilgiliydi. INP tüm etkileşimleri ölçüyor: scroll, tıklama, form girişi, modal açma. Bu durum, sorunun kaynağını bulmayı zorlaştırıyor. WebPageTest ve Chrome DevTools Performance paneli ile uzun task'ları tespit edin.

CLS skoru 0 mümkün mü? Evet, CLS sıfır olabilir. Tüm görsel elementler için boyut belirtilmiş, web fontlar düzgün yönetilmiş ve dinamik içerik rezervasyon alanı olan siteler CLS sıfır değerine ulaşabiliyor. Özellikle blog ve kurumsal siteler için bu hedef erişilebilir.

CDN olmadan iyi LCP skoru mümkün mü? Türkiye'deki kullanıcılar için, sunucu Türkiye'deyse CDN olmadan da iyi TTFB mümkün. Ama görsel optimizasyonu, preload ve önbellekleme olmadan LCP hedefi zorlaşıyor. CDN, global kullanıcı kitlesi için daha kritik.

Third-party script'ler CWV'yi ne kadar etkiliyor? Büyük ölçüde etkiliyor. Analytics, chat widget, reklam ve A/B test araçları main thread'i meşgul ediyor. WebPageTest'te third-party özet raporunu inceleyin. Kritik olmayan araçları erteleyerek veya kaldırarak test edin.

Core Web Vitals Google Ads'i de etkiliyor mu? Doğrudan değil. Organik sıralama için Page Experience sinyali olarak kullanılıyor. Ancak yavaş açılan sayfalar Google Ads'de Kalite Skoru'nu dolaylı olarak etkiliyor (landing page experience bileşeni). Hem organik hem ücretli için hız önemli.

PageSpeed Insights skorum her ölçümde değişiyor, neden? Lighthouse lab ortamında simüle edilmiş ağ ve CPU koşullarında çalışıyor. Arka planda çalışan süreçler, sunucu yanıt süresi farklılıkları ve simülasyon değişkenleri skorları etkiliyor. Birden fazla ölçüm alıp ortalamasına bakın. CrUX alan verisi daha tutarlı bir gösterge sunuyor.

Sonuç ve Aksiyon Planı

Core Web Vitals optimizasyonu, tek seferlik değil süregelen bir süreç. Her deployment sonrası performans ölçümü yapın ve regresyonları erken yakalayın.

Bu hafta uygulayabileceğiniz hızlı kazanımlar: Tüm görsellere width/height attribute ekleyin (CLS). LCP görseliniz için preload ve WebP formatı ekleyin (LCP). Google Fonts'u font-display:swap ile yükleyin (CLS + FCP). Kullanılmayan JavaScript kütüphanelerini tespit edin (INP).

Derin optimizasyon için veya Core Web Vitals auditinden sonra aksiyon planı oluşturmak için:

• Teknik SEO ve Performans Hizmetleri →
• Web Tasarım ve Hız Optimizasyonu →
• Paketler ve Fiyatlar →

Ücretsiz Teklif Al →