Core Web Vitals optimizasyonu; Google’ın kullanıcı deneyimini ölçümlemek için kullandığı En Büyük İçerikli Boyama (LCP), Sonraki Boyamayla Etkileşim (INP) ve Kümülatif Düzen Kayması (CLS) metriklerinin teknik olarak ideal değerlere getirilmesi işlemidir. Başarılı bir Core Web Vitals optimizasyonu için sunucu yanıt süreleri (TTFB) düşürülmeli, kritiğin dışındaki JavaScript ve CSS dosyaları ertelenmeli, görsellere eksiksiz boyut bilgileri eklenmeli ve ana iş parçacığı (main thread) yükü minimize edilmelidir. Bu metriklerin “İyi” eşikte tutulması, Google arama sonuçlarında doğrudan sıralama avantajı sağlar.

Google’ın Sayfa Deneyimi (Page Experience) güncellemesiyle birlikte web sitelerinin teknik performansı artık lüks değil, organik sıralamada kalıcı olmanın temel şartıdır. Kullanıcılar 3 saniyeden geç açılan ya da yüklenirken ögeleri sağa sola kayan siteleri anında terk etmektedir. Bu durum sıçrama oranını (bounce rate) artırırken, Google algoritmalarının sitenizin kalitesini düşürmesine sebep olur. Bu kapsamlı rehberde, web sitenizi teknik olarak nasıl optimize edeceğinizi, INP ve LCP hatalarını nasıl gidereceğinizi adım adım öğreneceksiniz.

Temel Gereksinimler ve Analiz Araçları

Teknik müdahalelere geçmeden önce web sitenizin mevcut durumunu tam olarak teşhis etmeniz gerekir. Performans sorunlarını tespit etmek ve yapılan optimizasyonların etkisini ölçmek için şu araçlara ihtiyacınız vardır:

  • Google Search Console (Web Vitals Raporu): Sitenizi ziyaret eden gerçek kullanıcıların (CrUX verileri) yaşadığı performans sorunlarını sayfa bazlı gruplandırarak sunar. Başlangıç noktanız burası olmalıdır.
  • Google PageSpeed Insights: Hem gerçek kullanıcı verilerini (Field Data) hem de simüle edilmiş laboratuvar verilerini (Lab Data) gösteren temel analiz aracıdır.
  • WebPageTest: Farklı lokasyonlardan, farklı cihaz ve bağlantı hızlarından derinlemesine şelale (waterfall) analizi yapmanızı sağlar. Sorunlu JavaScript dosyalarını bulmak için mükemmeldir.
  • Chrome DevTools (Performance Tabı): Özellikle yetersiz etkileşim performansı (INP) sunan uzun görevleri (Long Tasks) ve bellek sızıntılarını anlık incelemek için kullanılır.
  • Erişim Yetkileri: Sitenizin FTP/cPanel erişimi, CDN paneli (Cloudflare vb.) ve kullandığınız içerik yönetim sisteminin (WordPress, Shopify vb.) yönetici yetkileri.

Adım Adım Core Web Vitals Optimizasyonu Rehberi

Core Web Vitals optimizasyonunu üç temel ana başlık üzerinden yönetmek gerekir. Aşağıdaki adımları sırasıyla uygulayarak sitenizin yeşil bölgeye (90+ puan) geçmesini sağlayabilirsiniz.

  1. LCP (Largest Contentful Paint) Optimizasyonu: En Büyük Görsel Ögeyi Hızlandırın

    LCP, sayfanın ana içeriğinin (genellikle hero görseli veya ana başlık) ekranda ne kadar sürede belirdiğini ölçer. İdeal LCP süresi 2.5 saniyenin altında olmalıdır.

    • LCP Görselini Preload Edin: Sayfadaki en büyük görselin taranmasını beklemeden yüklenmesi için HTML `` bölümüne `` kodunu ekleyin.
    • LCP Görselinde Lazy Load Kullanmayın: En sık yapılan hata, ana LCP görseline `loading=”lazy”` özniteliği vermektir. LCP görselinde lazy loading kesinlikle iptal edilmelidir.
    • Fetch Priority Tanımlayın: Önemli görsele `fetchpriority=”high”` özniteliği ekleyerek tarayıcının bu ögeye öncelik vermesini sağlayın.
    • Görselleri WebP/AVIF Formatına Dönüştürün: PNG veya JPEG formatındaki ağır görselleri kayıpsız sıkıştırma yöntemleriyle WebP veya AVIF formatına çevirin.
    • Sunucu Yanıt Süresini (TTFB) Düşürün: Sunucu yanıt süresi 800ms üzerinde ise en iyi önbellekleme bile LCP’yi kurtaramaz. Redis/Memcached önbellekleme kullanın, PHP sürümünüzü güncelleyin ve kaliteli bir NVMe SSD sunucuya geçin.
  2. INP (Interaction to Next Paint) Optimizasyonu: Kullanıcı Etkileşim Hızını Artırın

    INP, kullanıcının sayfadaki bir butona tıklaması, bir menüyü açması veya forma yazması ile tarayıcının bir sonraki kareyi ekrana çizmesi arasında geçen süredir. İdeal değer 200 ms altında olmalıdır.

    • Uzun Görevleri (Long Tasks) Bölün: 50 milisaniyeden uzun süren JavaScript iş parçacıklarını `requestAnimationFrame` veya `setTimeout` kullanarak küçük parçalara ayırın.
    • Kullanılmayan JavaScript ve CSS Dosyalarını Temizleyin: Sitenize yük bindiren, kullanılmayan tema ve eklenti kodlarını tespit edip temizleyin. Gerekirse sayfa bazlı kod yükleme (code splitting) uygulayın.
    • Üçüncü Taraf Komut Dosyalarını Ertelenmiş Yükleyin: Google Tag Manager, Facebook Pixel, Chat eklentileri gibi dış kaynaklı JS kodlarını `async` veya `defer` öznitelikleriyle yükleyin. Mümkünse bu kodları Cloudflare Zaraz gibi araçlarla server-side çalıştırın.
    • DOM Ağacı Derinliğini Azaltın: Aşırı karmaşık ve derin HTML yapıları (1500’den fazla DOM ögesi) tarayıcının yeniden işleme (reflow) süresini uzatır. Sayfa tasarımlarınızı sadeleştirin.
  3. CLS (Cumulative Layout Shift) Optimizasyonu: Görsel Kaymaları Önleyin

    Sayfa yüklenirken ögelerin aniden yer değiştirmesi kullanıcının yanlış yere tıklamasına sebep olur. İdeal CLS değeri 0.1’in altında olmalıdır.

    • Görsel ve Videolara Boyut Verin: Bütün `` ve `
    • Ağır Font Yüklemelerini Düzenleyin: Özel fontlar yüklenirken yazının kaymasını veya geç görünmesini engellemek için CSS `@font-face` kuralına `font-display: swap;` ekleyin.
    • Dinamik Reklam ve Banner Alanlarını Sabitleyin: Sayfaya sonradan yüklenecek olan Google Adsense reklam alanları veya bildirim çubukları için önceden sabit bir min-height (minimum yükseklik) kapsayıcı alanı belirleyin.

Püf Noktaları ve Yapılan Kritik Hatalar

Core Web Vitals çalışmalarında genellikle gözden kaçan ve yapılan emekleri boşa çıkaran teknik detaylar şunlardır:

Kritik Uyarı: Masaüstü performans skorunun 95+ olması sitenizin SEO açısından güvenli olduğu anlamına gelmez. Google, indeksleme ve sıralamada Mobile-First Indexing prensibini uygular. Bu nedenle tüm optimizasyonlarınızı mobil cihazları ve yavaş mobil bağlantıları (4G/3G) baz alarak yapmalısınız.

  • Sadece Laboratuvar Verilerine Odaklanmak: PageSpeed üzerindeki anlık test sonuçları laboratuvar verisidir. Google sıralamada son 28 günlük gerçek kullanıcı deneyimini temsil eden CrUX verilerini dikkate alır. Yaptığınız değişikliklerin Search Console’a yansıması 2-4 hafta sürebilir.
  • Aşırı Eklenti Kullanarak Hızlanmaya Çalışmak: WordPress gibi sistemlerde performans artırmak için üst üste 4-5 farklı önbellek ve optimizasyon eklentisi kurmak, çakışmalara ve ana iş parçacığının kilitlenmesine neden olur. Tek bir güçlü optimizasyon aracı (örneğin WP Rocket veya LiteSpeed Cache) yeterlidir.
  • CDN Konfigürasyon Hataları: Cloudflare veya QUIC.cloud gibi CDN sistemlerini kurup sayfaları statik olarak önbelleğe almamak yapılan en yaygın hatadır. Edge Caching ayarlarının doğru yapılandırıldığından emin olun.

Sıkça Sorulan Sorular (FAQ)

Core Web Vitals skorları doğrudan bir sıralama faktörü müdür?

Evet, Google Core Web Vitals metriklerini resmi olarak Sayfa Deneyimi sinyallerinin bir parçası ve doğrudan bir sıralama faktörü olarak kullanmaktadır. Aynı kalitede içeriğe sahip iki siteden Core Web Vitals performansı üstün olan site arama sonuçlarında avantaj elde eder.

INP skoru (Interaction to Next Paint) nedir, FID’den farkı ne?

INP, Mart 2024 itibarıyla FID (First Input Delay) metriğinin yerini almıştır. FID sadece kullanıcının sayfadaki *ilk* etkileşim süresini ölçerken; INP, kullanıcının sayfada geçirdiği tüm süre boyunca gerçekleştirdiği *tüm* etkileşimlerin (tıklama, yazma, dokunma) en yavaş olanını ölçer. Bu yüzden tespiti ve çözümü daha karmaşıktır.

Görselleri WebP yapmak tek başına LCP sorununu çözer mi?

Hayır, tek başına yeterli değildir. Görseli WebP formatına çevirip boyutunu küçültmek harika bir adımdır ancak bu görsel doğru boyutlandırılmadıysa, sunucu yanıt süreniz (TTFB) yavaşsa veya tarayıcı görseli yüklemek için kritik CSS/JS dosyalarının bitmesini bekliyorsa LCP skoru yine zayıf kalacaktır.

PageSpeed Insights puanımın 100 olması şart mı?

Hayır, 100 tam puan almak bir zorunluluk değildir. Google için kritik olan, skorların “Yeşil Bölge” içerisinde yer almasıdır. Yani LCP’nin 2.5 sn altında, INP’nin 200 ms altında ve CLS’nin 0.1 altında olması yeterlidir. Puanı 90’dan 100’e getirmek için harcanan aşırı teknik çaba bazen sitenin işlevselliğini bozabilir.

Bir Cevap Yazın