Harika bir web sitesi sadece iyi görünmekle kalmamalı, aynı zamanda şimşek hızında yüklenmeli ve kararlı bir yapıya sahip olmalıdır. Google’ın Core Web Vitals (Önemli Web Verileri) güncellemesinden bu yana, LCP (Largest Contentful Paint) ve CLS (Cumulative Layout Shift) değerleri, SEO sıralamalarınız ve kullanıcı deneyiminiz (UX) için hayati önem taşıyor.

İşte 2025 standartlarına uygun, SEO dostu, kapsamlı ve uygulanabilir Web Sitesi Hızlandırma ve Core Web Vitals İyileştirme Rehberi.

Web Sitesi Hızlandırma Rehberi: LCP ve CLS Değerleri Nasıl İyileştirilir?

Bir web sitesine girdiğinizi ve tam bir butona tıklayacakken sayfanın kaydığını, yanlışlıkla bir reklama tıkladığınızı hayal edin. Ya da ana görselin yüklenmesi için saniyelerce boş bir ekrana baktığınızı... Bu deneyimler kullanıcıları kaçırır. Google da bunu bildiği için LCP ve CLS metriklerini birer sıralama faktörü olarak kullanıyor.

Bu rehberde, teknik jargonun içinde kaybolmadan, bu değerleri nasıl yeşil bölgeye (başarılı seviyeye) taşıyacağınızı adım adım inceleyeceğiz.

Bölüm 1: LCP (Largest Contentful Paint) Nedir ve Nasıl İyileştirilir?

LCP (En Büyük İçerikli Boyama), bir web sayfasının yüklenme hızını kullanıcının bakış açısından ölçen en önemli metriktir. Sayfanın tamamının yüklenmesini değil, ekranda görünen en büyük içerik parçasının (genellikle bir görsel, video veya büyük bir metin bloğu) ne kadar sürede görünür hale geldiğini ölçer.

  • İyi LCP Skoru: 2.5 saniye veya daha az.
  • İyileştirilmesi Gereken: 2.5 - 4.0 saniye.
  • Kötü LCP Skoru: 4.0 saniyeden fazla.

LCP Değerini İyileştirmek İçin 5 Altın Kural

LCP sorunu yaşıyorsanız, suçlu genellikle büyük görseller, yavaş sunucu yanıt süreleri veya oluşturmayı engelleyen JavaScript/CSS dosyalarıdır.

1. LCP Görselini Optimize Edin ve Önceliklendirin

Sayfanın en büyük öğesi genellikle "Hero" alanındaki görseldir.

  • Yeni Nesil Formatlar: JPG veya PNG yerine WebP veya AVIF formatlarını kullanın. Bu formatlar kaliteyi bozmadan dosya boyutunu %50-70 oranında düşürür.
  • Lazy Loading Hatası: LCP görseline (sayfanın en üstündeki ana görsele) asla "lazy loading" (tembel yükleme) uygulamayın. Bu, tarayıcının o görseli yüklemeyi ertelemesine ve LCP süresinin uzamasına neden olur.
  • Preload (Ön Yükleme): LCP görselinin HTML kodunda öncelikli yüklenmesi için <link rel="preload"> etiketini veya fetchpriority="high" özniteliğini kullanın.

2. Sunucu Yanıt Süresini (TTFB) Düşürün

Sunucunuz yavaşsa, sitenizin ne kadar optimize edildiğinin bir önemi kalmaz.

  • Kaliteli Hosting: Paylaşımlı ve yavaş bir hosting kullanıyorsanız, bulut sunucu (Cloud) veya VPS seçeneklerine geçin.
  • CDN Kullanımı: Cloudflare gibi bir İçerik Dağıtım Ağı (CDN) kullanın. Bu, sitenizin dosyalarını ziyaretçiye en yakın sunucudan göndererek gecikmeyi azaltır.
  • Önbellekleme (Caching): Sunucu tarafı önbellekleme (Redis, Varnish vb.) ve WordPress kullanıyorsanız WP Rocket veya LiteSpeed Cache gibi eklentilerle sayfa oluşturma süresini milisaniyelere düşürün.

3. Oluşturmayı Engelleyen (Render-Blocking) Kaynakları Kaldırın

Tarayıcı HTML'i okurken bir CSS veya JS dosyasına rastlarsa, okumayı bırakıp o dosyayı indirmeye çalışır. Bu da LCP'yi geciktirir.

  • CSS Minifikasyonu: CSS dosyalarınızdaki boşlukları ve gereksiz kodları silin.
  • Kritik CSS: Sadece ekranın üst kısmında (above the fold) görünen alanın CSS kodlarını satır içi (inline) olarak ekleyin, geri kalanını asenkron yükleyin.
  • JavaScript Erteleme: Kritik olmayan JS dosyalarına defer veya async etiketi ekleyerek sayfa yüklenirken arka planda inmesini sağlayın.

Bölüm 2: CLS (Cumulative Layout Shift) Nedir ve Nasıl İyileştirilir?

CLS (Kümülatif Düzen Kayması), görsel kararlılığı ölçer. Sayfa yüklenirken öğelerin yer değiştirip değiştirmediğini kontrol eder. Beklenmedik kaymalar, kullanıcıların yanlış yere tıklamasına neden olur ve bu durum Google tarafından cezalandırılır.

  • İyi CLS Skoru: 0.1 veya daha az.
  • İyileştirilmesi Gereken: 0.1 - 0.25.
  • Kötü CLS Skoru: 0.25'ten fazla.

CLS Değerini Sıfıra Yaklaştırmak İçin İpuçları

CLS sorunlarının %90'ı, boyutları belirtilmemiş görseller ve sonradan yüklenen reklam/font dosyalarından kaynaklanır.

1. Görseller ve Videolar İçin Boyut Belirtin

Tarayıcı bir görseli indirmeden önce onun sayfada ne kadar yer kaplayacağını bilmezse, görsel indiğinde metni aşağıya iter. Bu da kaymaya (Shift) neden olur.

  • Çözüm: Tüm img ve video etiketlerine mutlaka width (genişlik) ve height (yükseklik) değerlerini ekleyin.
  • CSS Aspect Ratio: Modern CSS ile aspect-ratio özelliğini kullanarak kutuların yerini önceden rezerve edebilirsiniz.

2. Reklam ve Gömülü İçerikler (Embeds) İçin Yer Ayırın

Sitenizde Google AdSense veya banner reklamlar varsa, bunlar genellikle içerikten sonra yüklenir ve içeriği aniden aşağı iter.

  • Çözüm: Reklamın geleceği alan için CSS ile sabit bir yükseklik (min-height) tanımlayın. Örneğin, 250px yüksekliğinde bir reklam gelecekse, o alana boş bir div koyun ve yüksekliğini 250px olarak ayarlayın. Böylece reklam yüklendiğinde sayfa kaymaz, sadece boşluk dolar.

3. Web Fontlarını Optimize Edin (FOIT ve FOUT Sorunu)

Özel fontlar (Google Fonts vb.) geç yüklendiğinde, tarayıcı önce varsayılan bir font gösterir, sonra özel font yüklendiğinde metnin boyutu değişir ve sayfa kayar.

  • Font-Display: Swap: CSS dosyanızda font tanımlarken font-display: swap; özelliğini kullanın. Bu özellik, font yüklenene kadar sistem fontunu gösterir ancak metnin kapladığı alanın benzer olmasını sağlar (veya optional kullanarak kaymayı tamamen engelleyebilirsiniz).
  • Font Preloading: Sadece çok kritik fontları (başlık fontu gibi) önceden yükleyin.

Bölüm 3: Özet ve Kullanılacak Araçlar

Hızlandırma çalışmalarınızı test etmek için aşağıdaki araçları düzenli olarak kullanmalısınız:

  1. Google PageSpeed Insights: LCP ve CLS değerlerinizi hem mobil hem de masaüstü için analiz eder.
  2. Google Search Console: "Önemli Web Verileri" raporu altında sitenizdeki hangi URL'lerin sorunlu olduğunu toplu halde gösterir.
  3. Chrome Geliştirici Araçları (Lighthouse): Sitenizi geliştirirken anlık testler yapmanızı sağlar.

Sonuç: Hız Sadece Bir Skor Değildir

Web sitenizi hızlandırmak ve Core Web Vitals (LCP & CLS) değerlerini iyileştirmek, sadece Google’ın gözüne girmek için yapılan teknik bir çalışma değildir. Bu, ziyaretçilerinize "Zamanınıza ve deneyiminize saygı duyuyorum" demenin dijital yoludur.

Hızlı yüklenen (Düşük LCP) ve stabil duran (Düşük CLS) bir web sitesi, daha yüksek dönüşüm oranları, daha düşük hemen çıkma oranları ve daha mutlu kullanıcılar demektir.

Sitenizi bugün analiz edin ve yukarıdaki adımları uygulayarak farkı görün!