Core Web Vitals Optimizasyonu 2026
Core Web Vitals, Google'ın kullanıcı deneyimini ölçmek için kullandığı üç temel metriktir: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) ve Cumulative Layout Shift (CLS). 2021'den beri resmi sıralama faktörü olan bu metrikler, 2026 itibarıyla Google algoritması içinde daha da belirgin bir rol oynamaktadır. Yavaş bir site artık sadece kötü kullanıcı deneyimi sunmuyor; aynı zamanda doğrudan sıralama kaybına ve gelir düşüşüne yol açıyor. Bu kapsamlı rehberde her bir metriği derinlemesine ele alıyor ve pratik optimizasyon tekniklerini uzman bakış açısıyla paylaşıyoruz.
LCP (Largest Contentful Paint) Optimizasyonu
LCP, sayfanın en büyük içerik elemanının (genellikle hero görseli veya başlık) ne kadar sürede göründüğünü ölçer. Google'a göre ideal değer 2.5 saniyenin altındadır. LCP'yi iyileştirmek için öncelikle sunucu yanıt süresini (TTFB) azaltmalısınız. TTFB 600 milisaniyenin altında olmalıdır; bunun için kaliteli bir hosting sağlayıcısı, sunucu tarafı önbellekleme (Redis, Varnish) ve HTTP/2 veya HTTP/3 protokolü kullanın.
Görseller, LCP'nin en büyük suçlusudur. Tüm görselleri WebP veya AVIF formatına dönüştürün, lazy loading ile ekran dışı görselleri geciktirin. Ancak LCP elemanınız olan ilk görseli preload edin: <link rel="preload" as="image" href="hero.webp">. Kritik CSS'leri inline olarak ekleyin; harici CSS dosyasının indirilmesi LCP'yi geciktirir. CDN (Cloudflare, AWS CloudFront) kullanarak içerik dağıtımını coğrafi olarak yakınlaştırın.
Örnek: Bir e-ticaret sitesinde LCP elemanı hero banner ise, bu banner'ı 1200px genişliğinde ve 80% kalitede WebP olarak kaydedin. Preload linki ekleyin ve sunucu tarafında Brotli sıkıştırması kullanın. Bu adımlar tek başına LCP'yi 4 saniyeden 1.8 saniyeye düşürebilir.
INP (Interaction to Next Paint) Optimizasyonu
INP, kullanıcı bir butona tıkladığında, form doldurduğunda veya menü açtığında sayfanın ne kadar hızlı yanıt verdiğini ölçer. 2024'ten itibaren FID (First Input Delay) yerine kullanılan INP, 200 milisaniyenin altında olmalıdır. INP'nin en büyük düşmanı, ana iş parçacığını (main thread) bloke eden uzun JavaScript görevleridir.
Çözüm olarak, JavaScript dosyalarını bölün (code splitting) ve sadece o sayfa için gerekli olan kodları yükleyin. Üçüncü parti script'leri (Google Analytics, Facebook Pixel, chat widget) geciktirin (defer veya async attribute kullanın). Ana iş parçacığını bloke eden görevleri küçük parçalara ayırın: requestIdleCallback veya scheduler.yield() kullanın. Heavy computation işlemlerini Web Worker'a taşıyın.
React veya Vue gibi framework kullanıyorsanız, render optimizasyonuna dikkat edin. Virtual DOM diff'leme büyük listelerde pahalı olabilir. React.memo, useMemo ve useCallback hook'ları gereksiz render'ları engelleyin. Ayrıca content-visibility: auto CSS özelliği ile ekran dışı elementlerin render'ını geciktirin.
CLS (Cumulative Layout Shift) Optimizasyonu
CLS, sayfa yüklenirken beklenmedik yer değiştirmelerini ölçer. Kullanıcı bir butona tıklamak üzereyken reklamın yüklenip butonu kaydırması, tipik bir CLS sorunudur. İdeal değer 0.1'in altındadır. CLS sorunları genellikle boyutsuz görseller, dinamik yüklenen reklamlar ve web fontlarından kaynaklanır.
Görseller ve videolar için mutlaka width ve height attribute'leri ekleyin. Responsive görsellerde srcset kullanıyorsanız bile, aspect ratio'yu CSS ile koruyun: aspect-ratio: 16/9. Reklam yerleşimleri için mutlaka ayrılmış alanlar (reserved space) oluşturun; reklam yüklenmeden önce boş bir container gösterin.
Web font yüklemesi için font-display: swap kullanın; bu sayede sistem fontu hemen görünür, özel font yüklendikçe değişir. Ancak font swap'ı da CLS yaratır; çözüm olarak size-adjust, ascent-override ve descent-override CSS özellikleri ile sistem fontu ile özel font arasındaki boyut farkını azaltın. Dinamik olarak eklenen içerikler (infinite scroll, AJAX ile yüklenen ürünler) için animasyonlu geçişler kullanın.
TTFB ve Sunucu Yanıt Süresi
Time to First Byte (TTFB), tarayıcının sunucudan ilk byte'ı almasına kadar geçen süredir. TTFB, LCP'nin temelini oluşturur; TTFB yüksekse LCP de yüksek olur. İdeal TTFB 600 milisaniyenin altındadır. TTFB'yi düşürmek için öncelikle hosting altyapınızı gözden geçirin; paylaşımlı hosting yerine VPS veya dedicated sunucu kullanın.
Edge caching kullanın; Cloudflare veya benzeri bir CDN ile statik içerikleri en yakın sunucudan servis edin. Sunucu tarafında Redis veya Memcached ile veritabanı sorgularını önbellekleyin. PHP tabanlı bir siteniz varsa OPcache aktif edin. SSR (Server-Side Rendering) yerine SSG (Static Site Generation) veya ISR (Incremental Static Regeneration) kullanın. Database query'lerini optimize edin; N+1 query probleminden kaçının, gereksiz JOIN'leri azaltın.
Resource Hint'ler ve Preloading
Resource hint'ler, tarayıcıya hangi kaynakların önceden getirilmesi gerektiğini söyler. <link rel="preload">, kritik kaynakları (LCP görseli, ana CSS, font dosyaları) önceden yükler. <link rel="prefetch">, kullanıcının sonraki sayfaya gitme olasılığı olan kaynakları arka planda indirir. <link rel="preconnect">, üçüncü parti domain'lerle (Google Fonts, CDN, analytics) önceden bağlantı kurar ve DNS sorgu süresini kısaltır.
Örnek: Google Fonts kullanıyorsanız, <link rel="preconnect" href="https://fonts.googleapis.com"> ve <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> ekleyin. Ana sayfanızda hero banner'ı preload edin. Bir sonraki sayfa (ürün detay sayfası) muhtemel ise, o sayfanın kritik kaynaklarını prefetch edin. Ancak preload'u aşırı kullanmayın; çok fazla preload, bant genişliğini bölerek ters etki yaratabilir.
Test Araçları ve İzleme
Core Web Vitals'ı düzenli olarak şu araçlarla test edin: PageSpeed Insights (hem lab hem field data), Lighthouse (detaylı rapor), Chrome DevTools Performance paneli (flame chart analizi), Search Console Core Web Vitals raporu (tüm sitenin durumu). Field data (gerçek kullanıcı verileri, CrUX) ile Lab data (test ortamı verileri, Lighthouse) arasındaki farkları anlamak kritiktir.
Field data, gerçek kullanıcıların deneyimini yansıtır ve Google sıralamasında dikkate alınır. Lab data ise geliştirme sürecinde hızlı geri bildirim sağlar. Her ikisini de düzenli takip edin. Özellikle Search Console'daki Core Web Vitals raporu, hangi URL'lerin "İyi", "İyileştirilmeli" veya "Kötü" kategorisinde olduğunu gösterir. Kötü olan URL'leri önceliklendirip tek tek düzeltin.
Core Web Vitals ve SEO İlişkisi
Google, 2021'den beri Core Web Vitals'ı resmi sıralama faktörü olarak kullanıyor. Ancak bu metrikler tek başına sıralama belirlemez; içerik kalitesi, backlink profili ve kullanıcı davranışları hâlâ daha belirleyicidir. Yine de, iki site eşdeğer içerik ve otoriteye sahipse, Core Web Vitals değerleri daha iyi olan site üst sıralarda yer alır.
Bunun ötesinde, hızlı siteler daha iyi dönüşüm oranları sağlar. Amazon'un araştırmasına göre, sayfa yükleme süresindeki her 100 milisaniyelik gecikme, dönüşüm oranını %1 azaltır. Walmart ise, sayfa hızını 1 saniye artırdığında dönüşüm oranını %2 artırdığını bildirdi. Yani Core Web Vitals optimizasyonu, sadece SEO için değil, doğrudan gelir için de yatırımdır.
Sonuç
Core Web Vitals optimizasyonu teknik bir zorunluluk değil, aynı zamanda kullanıcı deneyimi ve dönüşüm oranları için de kritiktir. Hızlı ve stabil bir web sitesi, ziyaretçilerin sitenizde daha uzun kalmasını, daha fazla sayfa gezmesini ve nihayetinde daha fazla işlem yapmasını sağlar. Menderes Dijital olarak, İzmir Menderes'teki işletmelerin Core Web Vitals metriklerini analiz ediyor, teknik sorunları belirliyor ve kapsamlı optimizasyon planları sunuyoruz. Ücretsiz teknik denetim için bize ulaşın.