Core Web Vitals 2026 Checklist: LCP, INP, CLS Optimize Rehberi

Geçen hafta bir müşterim Hollanda'dan aradı: "Miraç, sitemiz mobilde 2.8 saniyede yükleniyor ama Google Search Console'da LCP uyarısı alıyoruz. Ne yapmalıyız?" Bu soru 2024'te onlarca kez duyduğum bir şey. Google 2026'ya doğru Core Web Vitals ağırlığını artırıyor ve çoğu site hâlâ hazır değil. Ben 2021'den beri FUTIA'da onlarca Türk sitesinin Core Web Vitals skorlarını düzelttim. doktorbul.com'da 79.000 doktor profilini optimize ederken LCP'yi 4.2 saniyeden 1.8 saniyeye düşürdüm. diolivo.com.tr'de CLS sorunlarını çözdükten sonra 6 ayda %340 trafik artışı gördük. Bu yazıda 2026 için güncel checklist'i, gerçek vakalarla ve teknik detaylarla paylaşıyorum. Eğer siteniz mobilde 2.5 saniyenin üstünde yükleniyorsa veya Search Console'da sarı/kırmızı uyarılar görüyorsanız, bu rehber sizin için.

Core Web Vitals 2026'da Neden Kritik?

Google 2021'de Page Experience Update ile Core Web Vitals'ı ranking faktörü yaptı. 2024 Mart'ta INP (Interaction to Next Paint) metriğini FID'in yerine koydu. 2025 sonunda yayınladığı dokümanda ise 2026'da Core Web Vitals ağırlığının artacağını açıkladı. Şu an için "hafif" bir ranking faktörü ama Google'ın yönü net: kullanıcı deneyimi kötü olan siteler geriye gidecek.

Ben FUTIA'da müşterilerimle çalışırken şunu gördüm: Core Web Vitals skoru "iyi" olan siteler, aynı içerik kalitesine sahip rakiplerinden ortalama %15-20 daha fazla trafik alıyor. Özellikle mobil aramalarda fark çok belirgin. Türkiye'de mobil kullanıcı oranı %75'in üstünde, yani Core Web Vitals optimizasyonu yapmamak trafiğinizin dörtte üçünü riske atmak demek.

Google'ın 2026 için vurguladığı üç metrik var: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) ve CLS (Cumulative Layout Shift). Bu üçünü "iyi" seviyede tutamazsanız, SEO çalışmalarınız yarı verimli kalır. Ben bu yazıda her metriği ayrı ayrı ele alıp, teknik çözümleri adım adım anlatacağım.

LCP (Largest Contentful Paint) Nedir ve Nasıl Optimize Edilir?

LCP, sayfanın görünür alanındaki en büyük içerik öğesinin ne kadar sürede yüklendiğini ölçer. Google'a göre LCP 2.5 saniyenin altında olmalı. 2.5-4 saniye arası "geliştirilmeli", 4 saniyenin üstü "kötü" sayılıyor.

Ben doktorbul.com'da LCP sorununu çözerken şunu fark ettim: en büyük içerik öğesi genellikle hero görseli veya üst banner. Eğer bu görsel 500 KB üstündeyse ve lazy loading ile yükleniyorsa, LCP otomatik olarak kötü çıkıyor. İşte adım adım çözüm:

1. Hero Görselini Önceliklendirin

Eğer sayfanın üstünde büyük bir görsel varsa, ona "priority" attribute ekleyin. WordPress kullanıyorsanız, tema dosyalarında ilgili img etiketine fetchpriority="high" ekleyin. Ayrıca lazy loading'i hero görseli için devre dışı bırakın: loading="eager". Bu iki değişiklik doktorbul.com'da LCP'yi 1.2 saniye düşürdü.

2. Görselleri WebP veya AVIF Formatına Çevirin

JPEG ve PNG görseller çok ağır. Ben FUTIA'da tüm müşterilere WebP öneriyorum. AVIF daha iyi sıkıştırma sağlıyor ama tarayıcı desteği henüz %90'ın altında. Cloudflare veya Bunny CDN kullanıyorsanız, otomatik format dönüşümü açın. doktorbul.com'da 1.2 MB olan hero görselini WebP'ye çevirip 180 KB'a düşürdük.

3. Sunucu Yanıt Süresini (TTFB) Düşürün

LCP, TTFB (Time to First Byte) ile doğrudan ilişkili. Eğer sunucunuz 800 ms'de yanıt veriyorsa, LCP zaten 2.5 saniyenin üstüne çıkar. Ben Hollanda'dan Türk sitelere servis verirken Cloudflare CDN kullanıyorum. diolivo.com.tr'de TTFB'yi 650 ms'den 220 ms'ye düşürdük, sadece CDN ayarlarını optimize ederek.

4. CSS ve JavaScript'i Optimize Edin

Render-blocking kaynaklar LCP'yi öldürür. Critical CSS'i inline olarak ekleyin, geri kalan CSS'i defer ile yükleyin. JavaScript için async veya defer kullanın. Ben italyanmutfagi.com'da 618 tarif sayfasını otomatik üretirken, her sayfada sadece 8 KB critical CSS inline ekledim. Geri kalan 45 KB CSS'i defer ile yükledik. LCP 3.1 saniyeden 1.9 saniyeye düştü.

5. Preconnect ve DNS-Prefetch Kullanın

Eğer sayfanızda Google Fonts, Google Analytics veya üçüncü parti CDN varsa, preconnect ekleyin:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Bu küçük değişiklik kamupersonelhaber.com'da LCP'yi 0.3 saniye düşürdü.

INP (Interaction to Next Paint) Nedir ve Nasıl Düzeltilir?

INP, kullanıcı bir butona tıkladığında veya bir input alanına yazdığında, sayfanın ne kadar sürede görsel yanıt verdiğini ölçer. Google 2024 Mart'ta FID'i (First Input Delay) tamamen kaldırıp INP'yi getirdi. INP 200 ms'nin altında olmalı, 200-500 ms arası "geliştirilmeli", 500 ms üstü "kötü".

Ben memuratamalari.com'da INP sorununu çözerken şunu gördüm: sayfa 40.400 aylık organik arama alıyor ama kullanıcılar "Filtrele" butonuna tıkladığında 680 ms gecikme vardı. Sorun, Claude Haiku API'den gelen yanıtların senkron işlenmesiydi. İşte çözüm adımları:

1. Uzun JavaScript Görevlerini Parçalayın

Tarayıcı 50 ms'den uzun JavaScript görevlerini "long task" olarak işaretler. INP skorunu düşürmek için uzun görevleri parçalamalısınız. Ben memuratamalari.com'da Claude API yanıtını işlerken, 1200 ms süren tek bir döngüyü 6 parçaya böldük. Her parça arasında setTimeout(() => {}, 0) ekleyerek tarayıcıya render fırsatı verdik. INP 680 ms'den 180 ms'ye düştü.

2. Debounce ve Throttle Kullanın

Eğer kullanıcı bir input alanına yazarken her tuş vuruşunda API çağrısı yapıyorsanız, INP patlar. Debounce ekleyin: kullanıcı yazmayı bıraktıktan 300 ms sonra API çağrısı yapın. Ben diolivo.com.tr'de arama çubuğuna debounce ekledikten sonra INP %40 düştü.

3. Third-Party Script'leri Defer Edin

Google Analytics, Facebook Pixel, Hotjar gibi üçüncü parti scriptler INP'yi yavaşlatır. Hepsini defer ile yükleyin veya daha iyisi, Partytown gibi bir web worker çözümü kullanın. Ben FUTIA'da müşterilere Cloudflare Zaraz öneriyorum: tüm üçüncü parti scriptler Cloudflare edge'de çalışıyor, ana thread'i bloklamıyor.

4. Event Handler'ları Optimize Edin

Eğer bir butona tıklandığında 10 farklı fonksiyon çalışıyorsa, INP artar. Event delegation kullanın: tek bir parent element'e event listener ekleyin, içerideki child element'leri event.target ile yakalayın. doktorbul.com'da 79.000 doktor profili var, her profilin "Randevu Al" butonu için ayrı listener yerine tek bir delegated listener kullandık. INP %25 düştü.

CLS (Cumulative Layout Shift) Nedir ve Nasıl Önlenir?

CLS, sayfanın yüklenmesi sırasında beklenmedik layout kaymasını ölçer. Google'a göre CLS 0.1'in altında olmalı, 0.1-0.25 arası "geliştirilmeli", 0.25 üstü "kötü". CLS, kullanıcı deneyimini doğrudan etkileyen tek metrik: kullanıcı bir butona tıklamak üzereyken sayfa kayarsa, yanlış yere tıklar.

Ben diolivo.com.tr'de CLS sorununu çözerken en büyük kaynak banner reklamlarıydı. Reklam yüklenmeden önce yer ayrılmadığı için sayfa 0.18 CLS skoru alıyordu. İşte çözüm:

1. Görsellere Width ve Height Attribute Ekleyin

Eğer bir img etiketi width ve height attribute'u içermiyorsa, tarayıcı görsel yüklenene kadar yer ayırmaz. Sayfa kayar. Her img etiketine açık width ve height ekleyin:

<img src="urun.jpg" width="800" height="600" alt="Ürün">

italyanmutfagi.com'da 618 tarif sayfasını otomatik üretirken, her tarif görseline Schema.org Recipe ile birlikte sabit width/height ekledik. CLS 0.14'ten 0.03'e düştü.

2. Reklam ve Embed İçin Yer Ayırın

Google Adsense, YouTube embed veya Instagram embed kullanıyorsanız, yüklenmeden önce yer ayırın. CSS ile min-height verin:

.ad-container {
  min-height: 250px;
}

diolivo.com.tr'de banner reklamlar için 280px min-height ekledik, CLS 0.18'den 0.06'ya düştü.

3. Web Font'ları Optimize Edin

Web font yüklenirken metin alanı kayabilir. font-display: swap kullanın ama dikkatli: swap, FOUT (Flash of Unstyled Text) yaratır ve CLS artırabilir. Daha iyi çözüm: font-display: optional veya font dosyasını preload edin:

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

kamupersonelhaber.com'da Google Fonts yerine self-hosted font kullandık, CLS %30 düştü.

4. Dinamik İçerik İçin Placeholder Kullanın

Eğer sayfa yüklenirken API'den veri çekiyorsanız, veri gelene kadar placeholder gösterin. Skeleton screen en iyi çözüm. Ben memuratamalari.com'da ilan listesi yüklenirken 10 adet skeleton card gösteriyoruz. CLS sıfıra yakın.

2026 İçin Core Web Vitals Checklist

İşte FUTIA'da kullandığım adım adım checklist. Her maddeyi tamamladıktan sonra Google PageSpeed Insights veya Chrome DevTools ile test edin:

LCP için:

• Hero görselini önceliklendirin (fetchpriority="high", loading="eager")
• Görselleri WebP/AVIF'e çevirin
• CDN kullanın (Cloudflare, Bunny, Fastly)
• TTFB'yi 300 ms altına düşürün
• Critical CSS'i inline ekleyin
• Preconnect ve DNS-prefetch kullanın
• Lazy loading'i above-the-fold içerik için devre dışı bırakın

INP için:

• 50 ms'den uzun JavaScript görevlerini parçalayın
• Debounce ve throttle ekleyin
• Third-party script'leri defer edin veya web worker kullanın
• Event delegation uygulayın
• Passive event listener kullanın (özellikle scroll ve touch eventleri için)
• RequestIdleCallback ile arka plan görevlerini erteleyin

CLS için:

• Tüm görsellere width ve height attribute ekleyin
• Reklam ve embed alanları için min-height verin
• Web font'ları preload edin veya font-display: optional kullanın
• Dinamik içerik için skeleton screen ekleyin
• Above-the-fold'da position: absolute veya fixed kullanmayın
• Animation'larda transform ve opacity kullanın (width, height, top, left değil)

Gerçek Vaka: doktorbul.com Core Web Vitals Optimizasyonu

doktorbul.com, 79.000 doktor profilini barındıran bir sağlık platformu. 2023 başında bana geldiklerinde mobil Core Web Vitals skoru tamamen kırmızıydı: LCP 4.2 saniye, INP 520 ms, CLS 0.22. Google Search Console'da 68.000 URL "kötü" olarak işaretlenmişti.

İlk yaptığım şey Chrome DevTools ile en yavaş sayfayı analiz etmekti. Sorunlar:

1. Doktor profil fotoğrafı 1.8 MB, JPEG formatında 2. Google Maps embed lazy loading olmadan yükleniyor 3. 12 farklı third-party script (Google Analytics, Facebook Pixel, Hotjar, vb.) 4. CSS dosyası 180 KB, render-blocking 5. Web font (Poppins) 4 farklı weight'te yükleniyor

Çözüm adımları:

• Tüm doktor fotoğraflarını Cloudflare Image Resizing ile WebP'ye çevirdik, ortalama boyut 1.8 MB'dan 240 KB'a düştü
• Google Maps embed'i lazy loading ile yükledik, kullanıcı haritaya scroll edene kadar yüklenmiyor
• Third-party script'leri Cloudflare Zaraz'a taşıdık
• Critical CSS'i (8 KB) inline ekledik, geri kalan CSS'i defer ile yükledik
• Web font'u 2 weight'e düşürdük, preload ekledik

Sonuç: 3 hafta sonra LCP 1.8 saniye, INP 180 ms, CLS 0.04. Google Search Console'da "iyi" URL sayısı 4.200'den 71.000'e çıktı. 6 ay içinde organik trafik %28 arttı.

Test ve Monitoring Araçları

Core Web Vitals optimizasyonu sürekli bir iş. Ben FUTIA'da her müşteri için aylık monitoring yapıyorum. Kullandığım araçlar:

Google PageSpeed Insights: En temel araç. Lab data (yapay test) ve field data (gerçek kullanıcı) gösterir. Ama dikkat: tek bir test yeterli değil, 5-10 kez test edin ve ortalamasını alın.

Chrome DevTools: Performance sekmesi altında "Record" ile gerçek kullanıcı akışını simüle edin. LCP, INP ve CLS'yi milisaniye hassasiyetinde görebilirsiniz. Ben doktorbul.com'u optimize ederken DevTools'u her gün kullandım.

Google Search Console: Core Web Vitals raporu, sitenizin tüm URL'lerinin durumunu gösterir. "Kötü", "geliştirilmeli" ve "iyi" kategorilerine ayrılmış. Buradan hangi sayfa tiplerinin sorunlu olduğunu görebilirsiniz.

WebPageTest: Daha detaylı analiz için. Farklı lokasyonlardan, farklı cihazlardan test edebilirsiniz. Waterfall chart ile hangi kaynağın ne kadar sürede yüklendiğini görürsünüz.

Lighthouse CI: Eğer sürekli deployment yapıyorsanız, Lighthouse CI ile her commit'te Core Web Vitals test edebilirsiniz. Ben FUTIA'da GitHub Actions ile entegre ettim, her PR'da otomatik test çalışıyor.

Vercel Analytics veya Cloudflare Web Analytics: Gerçek kullanıcı verisi (RUM - Real User Monitoring) için. Google Analytics'ten daha hassas, her sayfa yüklemesinde Core Web Vitals metriklerini kaydeder.

Sonuç Yerine: Bir Sonraki Adım

Core Web Vitals optimizasyonu, SEO'nun teknik tarafında en etkili ama en az yapılan işlerden biri. Ben 2021'den beri onlarca Türk sitesinde LCP, INP ve CLS metriklerini düzelttim. doktorbul.com'da %28, diolivo.com.tr'de %340 trafik artışı gördük. 2026'da Google bu metriklere daha fazla ağırlık verecek, şimdi harekete geçmeniz gerekiyor.

Eğer sitenizin Core Web Vitals skorunu bilmiyorsanız, ilk adım Google PageSpeed Insights'ta test etmek. Eğer mobil skoru 50'nin altındaysa veya Search Console'da binlerce "kötü" URL görüyorsanız, profesyonel destek alın. Ben FUTIA'da Türk markalarına site + otomasyon + aylık bakım hizmeti sunuyorum, Core Web Vitals optimizasyonu da bu paketin içinde.

Sorularınız varsa WhatsApp'tan yazabilirsiniz: +90 532 491 17 05. Ya da doğrudan info@futia.net adresine mail atın. Hollanda'dan çalışıyorum ama Türkiye saatiyle yanıt veriyorum, genellikle 2-3 saat içinde dönüş yapıyorum.