Core Web Vitals Optimizasyonu: LCP, INP, CLS Rehberi

Core Web Vitals (CWV), gerçek kullanıcı deneyiminin yükleme, etkileşim ve görsel kararlılık boyutlarını değerlendiren metriklerdir. INP, Mart 2024'te FID'nin yerini aldı. Bu rehberde her metriği, ölçüm araçlarını ve iyileştirme tekniklerini ele alacağız; iyi skorların tek başına sıralama garantisi olmadığını da göz önünde bulunduracağız.

Core Web Vitals Nedir?

Core Web Vitals, Google'ın web sayfalarının kullanıcı deneyimi kalitesini ölçmek için belirlediği üç temel metriktir. Bu metrikler, sayfanın yükleme performansını, etkileşim yanıt süresini ve görsel kararlılığını değerlendirir.

Bu eşikler kullanıcı deneyimini değerlendirmek için önerilir ve mobil ile masaüstünde ayrı ayrı, sayfa yüklemelerinin 75. yüzdelik diliminde ele alınır. Core Web Vitals genel sayfa deneyiminin bir parçasıdır; Google, eşit içerikler arasında otomatik bir "tie-breaker" garantisi yayımlamaz.

LCP (Largest Contentful Paint): Yükleme Hızı

LCP Nedir?

LCP, sayfadaki en büyük görünür içerik öğesinin ne kadar sürede render edildiğini ölçer. Bu öğe genellikle:

• Hero görseli
• Büyük bir metin bloğu
• Video poster görseli
• Background image içeren bir element

LCP'yi Etkileyen Faktörler

1. Sunucu Yanıt Süresi (TTFB)
Sunucunuzun ilk byte'ı gönderme süresi, LCP'yi doğrudan etkiler.

İyileştirme yolları:

• CDN kullanın (Cloudflare, Fastly, AWS CloudFront)
• Sunucu tarafı önbelleğe alma (caching) uygulayın
• Veritabanı sorgularını optimize edin
• HTTP/3 protokolüne geçin

2. Render-Blocking Kaynaklar
CSS ve JavaScript dosyaları sayfanın render edilmesini engelleyebilir.

İyileştirme yolları:

• Kritik CSS'i inline olarak ekleyin
• Kullanılmayan CSS'i temizleyin
• JavaScript dosyalarını defer veya async ile yükleyin
• Kullanılmayan JavaScript'i kaldırın veya code-splitting uygulayın

3. Görsel Optimizasyonu
Büyük görseller LCP'nin en yaygın sorumlusudur.

İyileştirme yolları:

• Next-gen formatlar kullanın (WebP, AVIF)
• Responsive images ile uygun boyutlarda sunun
• Lazy loading uygulayın (ama LCP öğesine değil!)
• Image CDN kullanın (Cloudflare Images, imgix)
• <link rel="preload"> ile LCP görselini önceden yükleyin

Ölçüm notu: Görsel formatı, responsive kaynak seçimi ve önceliklendirme LCP'yi iyileştirebilir. Önce/sonra sonucu paylaşırken aynı URL, cihaz ve ağ profili, test aracı, tekrar sayısı ve medyan/75. yüzdelik değerleri açıklayın. Bu bağlam olmadan anonim bir müşteri sitesine ait kesin saniye farkını vaka sonucu olarak kullanmayın.

LCP İçin Next.js Optimizasyonu

Next.js kullanıyorsanız, next/image komponenti birçok optimizasyonu otomatik yapar:

• Otomatik WebP/AVIF dönüşümü
• Responsive boyutlandırma
• Lazy loading (priority prop ile LCP görseli hariç)
• Placeholder blur

LCP görseli için priority prop'unu eklemeyi unutmayın. Bu, görselin lazy loading'den muaf tutulmasını ve preload edilmesini sağlar.

INP (Interaction to Next Paint): Etkileşim Yanıtı

INP Nedir?

INP, kullanıcının sayfayla yaptığı tıklama, dokunma ve klavye etkileşimlerinin gecikmesini sayfa ömrü boyunca gözlemler ve yüksek gecikmeli etkileşimleri temsil eden bir değer raporlar. Eski FID metriğinden farklı olarak yalnızca ilk etkileşime odaklanmaz.

INP'yi Etkileyen Faktörler

1. Ana Thread (Main Thread) Yoğunluğu
JavaScript'in ana thread'de çalışması, kullanıcı etkileşimlerinin işlenmesini geciktirir.

İyileştirme yolları:

• Uzun görevleri (long tasks) parçalara bölün (requestIdleCallback, setTimeout ile)
• Web Worker'lara yoğun hesaplamaları aktarın
• Gereksiz üçüncü parti scriptleri kaldırın
• requestAnimationFrame ile DOM güncellemelerini optimize edin

2. JavaScript Boyutu ve Yürütme Süresi

İyileştirme yolları:

• Tree shaking ile kullanılmayan kodu temizleyin
• Code splitting ve dynamic import kullanın
• Bundle analizi yapın (webpack-bundle-analyzer)
• Üçüncü parti kütüphaneleri değerlendirin (moment.js yerine date-fns gibi)

3. DOM Boyutu
Büyük DOM ağaçları etkileşim yanıt sürelerini yavaşlatır.

İyileştirme yolları:

• Gereksiz DOM düğümlerini azaltın; evrensel bir düğüm sayısını performans garantisi saymayın
• Gereksiz wrapper elementleri kaldırın
• Virtualization kullanın (uzun listeler için)
• Görünür olmayan içerikleri lazy render edin

INP Test Etme

INP'yi gerçek kullanıcı verileriyle (field data) test etmek kritik önem taşır, çünkü lab ortamında tüm etkileşimleri simüle etmek zordur.

• Chrome DevTools Performance paneli: Etkileşimleri kaydedin ve long task'ları tespit edin
• Web Vitals Chrome Extension: Gerçek zamanlı INP değerini görün
• Google Search Console: Core Web Vitals raporu ile field data inceleyin

CLS (Cumulative Layout Shift): Görsel Kararlılık

CLS Nedir?

CLS, sayfa yüklenirken veya kullanıcı etkileşimi sırasında görsel elementlerin beklenmedik şekilde yer değiştirmesini ölçer. Bir butona tıklamak üzereyken içeriğin kayması ve yanlış yere tıklamanız... İşte CLS bunu ölçüyor.

CLS'ye Neden Olan Yaygın Sorunlar

1. Boyutu Belirtilmemiş Görseller ve Videolar

En yaygın CLS sebebi budur. Görselin boyutları belirtilmediğinde, tarayıcı görseli yükleyene kadar ne kadar yer kaplayacağını bilemez.

Çözüm: Her zaman width ve height attribute'ları ekleyin veya CSS aspect-ratio kullanın.

2. Dinamik Olarak Eklenen İçerikler

Reklam bannerları, cookie bildirimleri, newsletter popup'ları gibi sonradan yüklenen içerikler layout shift'e neden olur.

Çözüm:

• Reklam alanları için sabit boyutlu container'lar oluşturun
• min-height ile alanı önceden ayırın
• Popup ve banner'lar için overlay (üst katman) kullanın, içeriği itmeyin

3. Web Fontlarının Geç Yüklenmesi

Sistem fontu ile web fontunun farklı boyutlarda olması, metin render edildiğinde layout shift'e neden olur (FOUT - Flash of Unstyled Text).

Çözüm:

• font-display: swap yerine font-display: optional kullanmayı değerlendirin
• Font dosyalarını preload edin
• size-adjust ile fallback fontun boyutunu eşleştirin
• Mümkünse sistem fontları kullanın

4. CSS Animasyonları

top, left, width, height gibi layout tetikleyen CSS property'leri animasyonlarda CLS'ye neden olabilir.

Çözüm: Sadece transform ve opacity ile animasyon yapın. Bu property'ler compositor thread'de çalışır ve layout'u etkilemez.

Core Web Vitals Ölçüm Araçları

Lab Data (Laboratuvar Verisi) Araçları

• Google Lighthouse: Chrome DevTools içinde veya CLI olarak çalıştırılabilir. Detaylı performans raporu ve iyileştirme önerileri sunar.
• PageSpeed Insights: Hem lab hem field data gösterir. Google'ın resmi aracı.
• WebPageTest: Farklı lokasyon ve cihazlardan detaylı performans testi. Filmstrip görünümü ile yükleme sürecini adım adım izleyebilirsiniz.

Field Data (Gerçek Kullanıcı Verisi) Araçları

• Google Search Console: Core Web Vitals raporu ile URL bazında durum
• Chrome UX Report (CrUX): Google'ın Chrome kullanıcılarından topladığı gerçek performans verileri
• web-vitals JavaScript kütüphanesi: Kendi sitenize ekleyerek gerçek kullanıcı verilerini toplayabilirsiniz

Hangisi Daha Önemli: Lab mı, Field mı?

Field data gerçek kullanıcıların cihaz ve ağ koşullarını gösterir; lab data ise kontrollü koşullarda sorunları yeniden üretip teşhis etmeye yardımcı olur. Kapsamları farklı olduğu için ikisini birlikte kullanın ve tek bir Lighthouse koşusunu kullanıcı deneyiminin tamamı gibi yorumlamayın.

Next.js ve Modern Framework'lerde CWV Optimizasyonu

Next.js gibi modern framework'ler, Core Web Vitals optimizasyonu için birçok yerleşik özellik sunar:

Code Splitting: Sayfanın ihtiyaç duyduğu istemci kodunu azaltmaya yardımcı olabilir. INP ve LCP etkisini gerçek sayfada ölçün.

Server-Side Rendering (SSR) / Static Generation (SSG): İlk HTML üretimini destekler; LCP etkisi sunucu yanıtı, veri akışı ve istemci koduna bağlıdır.

Image Optimization: next/image komponenti ile otomatik format dönüşümü, boyutlandırma ve lazy loading.

Font Optimization: next/font font yükleme yönetimini kolaylaştırabilir; CLS'nin önlendiği gerçek cihazlarda doğrulanmalıdır.

Script Optimization: next/script ile üçüncü parti scriptlerin yükleme stratejisini kontrol edin.

Maviona olarak projelerimizde Next.js tercih etmemizin en önemli sebeplerinden biri, Core Web Vitals optimizasyonunun framework düzeyinde desteklenmesidir.

Performans Bütçesi Oluşturma

Performans optimizasyonu sürekli bir süreçtir. Aşağıdaki tablo resmi Core Web Vitals eşikleri değil, proje ihtiyaçlarına göre değiştirilmesi gereken örnek bir başlangıç bütçesidir:

CI/CD pipeline'ınıza Lighthouse CI ekleyerek her deploy öncesi performans bütçenizi otomatik kontrol edebilirsiniz.

Sonuç

Core Web Vitals optimizasyonu, ölçülen kullanıcı deneyimi sorunlarını azaltmayı amaçlar. Arama görünürlüğüne katkısı diğer içerik ve sayfa deneyimi unsurlarıyla birlikte değerlendirilir; belirli bir sıralama artışı garanti etmez.

Özetleyecek olursak:

• LCP için görsel optimizasyonu ve sunucu hızına odaklanın
• INP için JavaScript optimizasyonu ve ana thread yönetimine dikkat edin
• CLS için boyut belirtme ve dinamik içerik yönetimi uygulayın

Sitenizin Core Web Vitals skorlarını iyileştirmek mi istiyorsunuz? Maviona'nın SEO ve teknik optimizasyon hizmetleri ile ölçüm ve iyileştirme planı oluşturun. Performans analizi için bizimle iletişime geçin.

Kaynaklar ve yöntem

• web.dev Web Vitals
• Google Search Central SEO Başlangıç Rehberi

Eşikler web.dev'in güncel tanımları ve 75. yüzdelik yaklaşımıyla kontrol edildi. Optimizasyon önerileri önce/sonra lab testi ve mümkün olduğunda gerçek kullanıcı verisiyle doğrulanmalıdır; örnek performans bütçesi resmi eşik veya sonuç garantisi değildir. Kaynaklar Maviona'yı değerlendirmez veya onaylamaz.