Web siteniz görsel olarak ne kadar etkileyici olursa olsun, yavaş yükleniyorsa ziyaretçilerin büyük bölümü sayfanızı kapatıyor. Google'ın araştırmalarına göre, 3 saniyeden uzun süren yüklemelerde kullanıcıların %53'ü siteyi terk ediyor. Üstelik Google artık hız performansını doğrudan sıralama faktörü olarak değerlendiriyor. Bu rehberde, Core Web Vitals metriklerini anlaşılır biçimde açıklıyor ve gerçek sonuç veren optimizasyon tekniklerini adım adım aktarıyoruz.
Core Web Vitals Nedir?
Core Web Vitals, Google'ın 2020'de tanıttığı ve 2021'den itibaren arama sıralamasına dahil ettiği üç temel kullanıcı deneyimi metriğidir. Bu metrikler gerçek kullanıcı verilerinden elde edilir — yani laboratuvar testi değil, gerçek dünya ölçümü.
1. LCP — Largest Contentful Paint (En Büyük İçerik Boyaması)
Sayfadaki en büyük görünür öğenin (genellikle bir hero görseli veya büyük bir başlık) ne kadar sürede ekrana geldiğini ölçer.
- İyi: 2,5 saniye veya altı
- Geliştirme gerekiyor: 2,5–4 saniye
- Kötü: 4 saniyeden uzun
LCP'yi etkileyen başlıca unsurlar: büyük görsel dosyaları, yavaş sunucu yanıt süreleri ve render engelleyen JavaScript/CSS.
2. INP — Interaction to Next Paint (Etkileşimden Sonraki Boyama)
Kullanıcının sayfayla etkileşime girdiğinde (tıklama, dokunma, klavye girişi) sayfanın ne kadar hızlı tepki verdiğini ölçer. 2024'te eski FID metriğinin yerini aldı.
- İyi: 200 ms veya altı
- Geliştirme gerekiyor: 200–500 ms
- Kötü: 500 ms üzeri
Uzun süren JavaScript görevleri, ağır üçüncü taraf scriptler ve verimsiz event handler'lar INP'yi olumsuz etkiler.
3. CLS — Cumulative Layout Shift (Kümülatif Düzen Kayması)
Sayfa yüklenirken öğelerin ne kadar "kayıp" yaptığını ölçer. Okurken metnin yer değiştirmesi, yanlış tıklamalar ve genel sinirlilik hissi bu metriği görünür kılar.
- İyi: 0,1 veya altı
- Geliştirme gerekiyor: 0,1–0,25
- Kötü: 0,25 üzeri
Boyutsuz görseller, dinamik eklenen içerikler ve gecikmeli yüklenen reklamlar CLS'nin başlıca kaynağıdır.
Performansı Nerede Ölçersiniz?
Önce mevcut durumu ölçmeden optimizasyon yapamazsınız. Kullanabileceğiniz araçlar:
Google PageSpeed Insights — URL'yi girerek hem laboratuvar verisini hem de gerçek kullanıcı verisini (CrUX) gösterir. Ücretsiz ve kullanımı kolaydır.
Google Search Console → Core Web Vitals raporu — sitenizin gerçek kullanıcı deneyimini URL gruplarına göre sınıflandırır. Hangi sayfalarda sorun olduğunu doğrudan görürsünüz.
WebPageTest — gelişmiş kullanıcılar için; şelale grafikleri, video karşılaştırmaları ve çok adımlı testler yapılabilir.
Chrome DevTools → Lighthouse — local geliştirme ortamında anlık ölçüm için idealdir.
LCP'yi İyileştirme: Somut Adımlar
Görselleri Modern Formatlara Taşıyın
JPEG ve PNG'yi WebP veya AVIF formatına dönüştürmek dosya boyutunu genellikle %30–50 oranında küçültür, kalite kaybı minimumdur.
``html <picture> <source srcset="hero.avif" type="image/avif" /> <source srcset="hero.webp" type="image/webp" /> <img src="hero.jpg" alt="..." width="1280" height="720" /> </picture> ``
Next.js kullanıyorsanız <Image> bileşeni bu dönüşümü otomatik yapar — ekstra iş gerektirmez.
Hero Görselini Preload Edin
Tarayıcı HTML'yi tarar, görsel etiketi bulduğunda indirmeye başlar. Önceden haber verirseniz LCP süresi düşer:
``html <link rel="preload" as="image" href="/hero.webp" fetchpriority="high" /> ``
Sunucu Yanıt Süresini Kısaltın (TTFB)
LCP başlangıcı, sunucunun ilk baytı göndermesiyle başlar. TTFB'yi iyileştirmek için:
- Statik sayfa üretimi (SSG) veya ISR kullanın — her istekte sıfırdan oluşturma yerine önceden üretilmiş HTML sunun
- CDN (Content Delivery Network) kullanın — içerik kullanıcıya coğrafi olarak yakın sunucudan gelsin
- Sunucu kaynakları yetersizse VDS veya cloud barındırmaya geçin
Kritik CSS'i Satır İçine Alın
Tarayıcı CSS dosyasını indirip işlemeden sayfayı gösteremez. Üst kısmın stillerini doğrudan HTML'e gömmek render süresini kısaltır. Bu işlemi Critical veya Critters gibi araçlar otomatize eder.
INP'yi İyileştirme: JavaScript Yükünü Azaltın
Uzun Görevleri Bölün
50 ms'den uzun süren JavaScript görevleri "uzun görev" sayılır ve kullanıcı etkileşimini bloklar. setTimeout(..., 0) veya scheduler.yield() ile büyük işlemleri parçalayın:
``javascript async function processLargeList(items) { for (let i = 0; i < items.length; i++) { process(items[i]); // Her 50 öğede bir ana iş parçacığına nefes aldırın if (i % 50 === 0) await new Promise(r => setTimeout(r, 0)); } } ``
Gereksiz Üçüncü Taraf Scriptleri Kaldırın
Canlı sohbet widget'ları, reklam ağları, analytics araçları ve sosyal medya butonları ciddi INP maliyeti yaratır. Her ekstra scripti sormak gerekir: "Bu sayfada gerçekten gerekli mi?"
Google Tag Manager varsa düzenli denetim yapın — kullanılmayan etiketleri silin.
React/Next.js'de Kod Bölme Kullanın
``javascript const AgirBilesim = dynamic(() => import('./AgirBilesim'), { ssr: false, loading: () => <div>Yükleniyor…</div>, }); ``
dynamic() ile ağır bileşenleri sadece ihtiyaç duyulduğunda yükleyin. Bu ilk yükleme boyutunu küçültür ve INP'yi olumlu etkiler.
CLS'yi Sıfıra İndirme
Tüm Görsellere Boyut Belirtin
Tarayıcı görselin boyutunu önceden bilirse yer ayırır, görsel gelince kaymaz:
``html <img src="urun.jpg" alt="Ürün görseli" width="800" height="600" /> ``
CSS'deki aspect-ratio de aynı işlevi görür:
``css .kahraman-gorsel { aspect-ratio: 16 / 9; width: 100%; } ``
Fontlarda FOUT/FOIT'i Önleyin
Font yüklenirken metnin yer değiştirmesi ciddi CLS kaynağıdır. font-display: optional veya font-display: swap kullanın ve fontları preload edin:
``html <link rel="preload" href="/fonts/SpaceGrotesk.woff2" as="font" type="font/woff2" crossorigin /> ``
Dinamik İçerik İçin Yer Tutucu Kullanın
API'dan gelen veri geldiğinde layout'u kaydırmaması için sabit yükseklikte bir skeleton/placeholder kullanın:
``css .icerik-alani { min-height: 120px; / İçerik yüklenene kadar yer tutar / } ``
Next.js ile Otomatik Optimizasyonlar
Next.js tabanlı bir web sitesi kullanıyorsanız aşağıdaki özellikler kutudan çıkar çıkmaz çalışır:
| Özellik | Ne Sağlar | |---|---| | <Image> bileşeni | Otomatik WebP/AVIF, lazy loading, boyut özelliği | | <Script strategy="lazyOnload"> | Kritik olmayan scriptleri erteir | | Statik üretim (SSG) | TTFB'yi minimize eder | | Font optimizasyonu | Google Fonts indir, self-host, swap stratejisi | | Otomatik code splitting | Her sayfa yalnızca gerekli JS'i yükler |
Bu özelliklerin manuel yapılandırma gerektiren alternatiflere göre zaman tasarrufu sağladığını ve Core Web Vitals sonuçlarına doğrudan katkısını kurumsal web sitesi maliyeti yazımızda da değindik.
Önceliklendirme: Nereden Başlamalısınız?
Optimizasyon yolculuğuna başlarken en yüksek etkiyi en az çabayla veren adımları tercih edin:
1. Görsel optimizasyonu — çoğu sitede tek başına LCP'yi %30–40 iyileştirir. Büyük JPEG'leri WebP'ye çevirin, boyutlarını belirtin.
2. Kullanılmayan JavaScript'i kaldırın — Chrome DevTools'daki Coverage aracıyla hangi JS kodunun kullanılmadığını görün.
3. Render engelleyen kaynakları azaltın — CSS ve JS'i async/defer ile veya kritik CSS satır içi ile yönetin.
4. Sunucu performansını gözden geçirin — Shared hosting üzerindeyseniz ve TTFB 800 ms üzerindeyse barındırma altyapısı değişikliği düşünün.
5. Üçüncü taraf scriptleri denetleyin — hangi scriptlerin ne kadar ağırlık yarattığını PageSpeed Insights'ın "Üçüncü Taraf Kod" bölümünde görün.
Sonuç: Hız Bir Lüks Değil, Zorunluluk
Core Web Vitals iyileştirmeleri artık isteğe bağlı bir performans çalışması değil; Google sıralaması, kullanıcı memnuniyeti ve dönüşüm oranı için zorunlu bir temel. Tek seferlik bir sprint olarak değil, süregelen bir izleme ve iyileştirme döngüsü olarak yaklaşmak kalıcı sonuç verir.
Sitenizin mevcut Core Web Vitals durumunu bilmek veya profesyonel hız optimizasyonu almak istiyorsanız bizimle iletişime geçin — ücretsiz ön analiz yapıyoruz.