Core Web Vitals Skoru Nasıl İyileştirilir? Teknik Sayfa Hızı Optimizasyonu

Google’ın sıralama algoritmasındaki en acımasız metrikleri (LCP, INP, CLS) yeşil alana taşımanın ve milisaniyeleri e-ticaret cirosuna dönüştürmenin teknik yolları.

Dijital pazarlama dünyasında yıllarca süregelen bir yanılgı vardır: “Sitemin masaüstünde çok hızlı açıldığını görüyorum, o halde SEO açısından bir problemim yok.” Oysa Google botları sitenizi sizin ofisteki fiber internetinizle değil; metroda seyahat eden, 3G bağlantıya sahip ve eski model bir akıllı telefon kullanan ortalama bir kullanıcının gözünden değerlendirir. Sitenizin teknik performansı artık sadece bir “yazılımcı problemi” değil, doğrudan pazarlama bütçenizi ve e-ticaret cironuzu eriten bir işletme sorunudur.

Google, kullanıcı deneyimini (UX) ölçümlemek için geleneksel “Sayfa Yüklenme Süresi” (Page Load Time) metriğini tamamen terk ederek yerine çok daha karmaşık ve acımasız bir algoritma seti getirdi: Core Web Vitals (Önemli Web Verileri). Arama motoru sonuç sayfalarında (SERP) zirveyi hedefliyorsanız, PageSpeed Insights raporunuzdaki o kırmızı ve sarı uyarıları mutlaka “Yeşil” alana taşımak zorundasınız.

Core Web Vitals Felsefesi: Hız Değil, Deneyim

Geçmişte sunucu yanıt süresi (TTFB) veya DOM’un yüklenme hızı SEO için yeterliydi. Ancak Google, kullanıcıların sitenin arka planında dönen kodlarla ilgilenmediğini fark etti. Kullanıcı; “Görmek istediğim görsel ne zaman ekrana gelecek?”, “Butona bastığımda site neden donuyor?” ve “Yazıyı okurken sayfa neden aniden aşağı kaydı?” gibi sorunlarla boğuşuyordu. Core Web Vitals, tam olarak bu üç kullanıcı hayal kırıklığını matematiksel olarak ölçen üç temel metrikten oluşur.

Largest Contentful Paint (LCP): En Büyük İçeriğin Boyanması

LCP, sayfanızın açılış ekranında (Above the Fold) yer alan en büyük metin bloğunun veya görselin kullanıcının ekranında tamamen belirdiği anı ölçer. Google, harika bir kullanıcı deneyimi için LCP süresinin 2.5 saniyenin altında olmasını şart koşar.

LCP skorunu çökerten en büyük düşmanlar; devasa boyuttaki kahraman (Hero) görselleri, yavaş sunucu yanıt süreleri ve görselin yüklenmesini engelleyen render-blocking (oluşturmayı engelleyen) CSS/JavaScript dosyalarıdır.

LCP optimizasyonu için uygulanması gereken kritik müdahaleler şunlardır:

• Kritik Görseli Önceden Yükleyin (Preload): Sayfanın en tepesindeki ana görselin `head` etiketleri arasında “ komutuyla tarayıcıya öncelikli olarak tanıtılması gerekir.
• Lazy Loading Tuzağına Düşmeyin: Resimleri tembel yüklemek (Lazy Load) ekranın alt kısımları için harikadır. Ancak en üstteki LCP görselinize `loading=”lazy”` niteliği eklerseniz, tarayıcı onu bilerek geciktirir ve LCP skorunuz felakete dönüşür.
• CDN Stratejisi: Sunucunuz İstanbul’da olabilir, ancak müşteriniz sitenize Berlin’den giriyorsa LCP süresi fiziksel mesafe yüzünden uzar. Cloudflare veya Fastly gibi bir CDN (İçerik Dağıtım Ağı) kullanarak statik varlıklarınızı kullanıcıya en yakın veri merkezinden servis edin.

Interaction to Next Paint (INP): Etkileşime Yanıt Süresi

Eskiden kullanılan FID (First Input Delay) metriğinin yerini alan INP, sitenizin “canlılığına” ve “tepkiselliğine” odaklanır. Kullanıcı sepete ekle butonuna bastığında, bir akordeon menüyü açtığında veya bir pop-up’ı kapatmaya çalıştığında sitenin donup donmadığını ölçer. Başarılı bir INP skoru için bu gecikmenin 200 milisaniyenin altında olması gerekir.

Kötü bir INP skorunun tek bir suçlusu vardır: Ana iş parçacığını (Main Thread) meşgul eden aşırı ağır JavaScript dosyaları. Tarayıcı 2 MB’lık bir analiz scriptini çalıştırmakla meşgulken, kullanıcı butona bassa bile tarayıcı bu isteğe yanıt veremez.

INP’yi iyileştirmek için, kullanılmayan JS kodlarını kaldırmalı, üçüncü taraf (Third-party) scriptleri (Örn: Chatbotlar, Hotjar, Facebook Pixel) Google Tag Manager üzerinden gecikmeli (delay) veya tetikleyiciye bağlı olarak yüklemelisiniz. Modern web mimarisinde JavaScript dosyalarını sayfanın sonunda `defer` veya `async` etiketleriyle çağırmak artık bir tercih değil, zorunluluktur.

Cumulative Layout Shift (CLS): Kümülatif Düzen Kayması

Sayfada bir makale okurken aniden üstte bir reklamın yüklenmesiyle metnin aşağı kayması ve sizin yanlış bir yere tıklamanız… İnternetteki en sinir bozucu deneyim olan bu durumu Google, CLS metriği ile cezalandırır. İyi bir deneyim için CLS puanınızın 0.1’in altında olması şarttır.

CLS sorunlarını çözmek teknik olarak en basit olanıdır, ancak genellikle gözden kaçar:

• Width ve Height Nitelikleri: Sitenize eklediğiniz her görsele ve iframe’e (YouTube videosu vb.) CSS yüklenmeden önce bile ne kadar alan kaplayacağını belirten `width` ve `height` değerlerini mutlaka HTML içine yazın. Böylece tarayıcı, görsel henüz yüklenmese bile o boşluğu rezerve eder ve kayma yaşanmaz.
• Dinamik Reklam Alanları: AdSense veya diğer banner reklamları kullanıyorsanız, reklamın yükleneceği div kapsayıcısına (container) CSS ile minimum bir yükseklik (min-height) atayın. Reklam geç yüklense dahi etrafındaki metinleri itmeyecektir.
• Web Fontları Taktikleri: Özel fontlarınız (Google Fonts) yüklenene kadar tarayıcının geçici bir sistem fontu göstermesi (FOUT) boyut uyuşmazlığına yol açar. CSS dosyanızda `@font-face` tanımına `font-display: swap;` ekleyerek bu kaymaları minimize edebilirsiniz.

Yeni Nesil Görsel Formatları: WebP ve AVIF

Eski JPEG ve PNG formatları web için artık birer tarih öncesi kalıntıdır. Tüm görsellerinizi kalite kaybı olmadan sıkıştıran yeni nesil WebP (ortalama %30 daha küçük) veya AVIF (ortalama %50 daha küçük) formatlarına geçirmek, LCP sürenizi anında saniyelerce geri çekecektir. Siteniz WordPress tabanlıysa, bu dönüşümü otomatik yapan eklentilerle sunucu yükünüzü anında hafifletebilirsiniz. (Sağdaki aracı kullanarak JPEG/PNG yükünüzü WebP’ye geçirmenin tasarrufunu hesaplayabilirsiniz).

Core Web Vitals optimizasyonu bir kerelik yapılan bir temizlik değil, web sitenizin kod altyapısına yerleşmesi gereken bir kültürdür. E-ticaret sitenize eklediğiniz her yeni özellik, her pazarlama scripti ve her görsel bu üç metriğe doğrudan etki eder. Rakipleriniz reklam bütçelerini artırarak sıralama kazanmaya çalışırken, siz sayfa hızınızı optimize ederek hem organik sıralamanızı (SEO) domine edebilir hem de mevcut trafiğinizden elde ettiğiniz dönüşüm (Ciro) oranlarını katlayabilirsiniz.