Core Web Vitals Optimizasyonu: LCP, INP, CLS Rehberi

Google, kullanıcı deneyimini sıralama faktörü olarak kullanmaya başladığından beri Core Web Vitals (CWV) her web sitesi sahibinin gündeminde. 2024'te Interaction to Next Paint (INP) metriğinin First Input Delay (FID) yerine geçmesiyle birlikte, performans ölçütleri daha da önem kazandı. Bu rehberde, her bir Core Web Vitals metriğini detaylıca açıklayacak, ölçüm araçlarını tanıtacak ve somut iyileştirme tekniklerini paylaşacağı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 metrikler, Google'ın "sayfa deneyimi" sıralama faktörünün temelini oluşturur. İki site içerik kalitesi açısından eşit olduğunda, Core Web Vitals skorları daha iyi olan site avantaj kazanır.

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

Pratik Örnek: Bir müşterimizin sitesinde LCP değeri 4,8 saniyeydi. Hero görseli 2,5 MB boyutunda PNG formatındaydı. WebP formatına çevirip, responsive sizes tanımlayıp, preload ekledikten sonra LCP 1,6 saniyeye düştü.

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üm etkileşimlerin (tıklama, dokunma, klavye girişi) yanıt sürelerini ölçer ve en kötü etkileşimi (en yüksek %98'lik dilim) temel alır. Eski FID metriğinden farklı olarak, sadece ilk etkileşimi değil, tüm etkileşimleri değerlendirir.

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ı:

• DOM node sayısını 1500'ün altında tutun
• 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 her zaman daha değerlidir çünkü Google sıralama için field data kullanır. Ancak lab data geliştirme sürecinde sorunları tespit etmek ve çözmek için vazgeçilmezdir. İkisini birlikte kullanı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:

Otomatik Code Splitting: Her sayfa sadece ihtiyacı olan JavaScript'i yükler. Bu, INP ve LCP'yi doğrudan iyileştirir.

Server-Side Rendering (SSR) / Static Generation (SSG): Sayfalar sunucu tarafında render edilir, bu da LCP'yi önemli ölçüde iyileştirir.

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

Font Optimization: next/font ile font dosyaları build time'da optimize edilir ve CLS önlenir.

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. Performans bütçesi oluşturarak standartlarınızı koruyun:

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

Sonuç

Core Web Vitals optimizasyonu, hem kullanıcı deneyimini iyileştirir hem de Google sıralamalarınızı olumlu etkiler. Teknik bir süreç olsa da, doğru araçlar ve sistematik bir yaklaşımla önemli iyileştirmeler elde edebilirsiniz.

Ö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 web sitenizi hem kullanıcılar hem de Google için optimize edelim. Ücretsiz performans analizi için bizimle iletişime geçin.