Web Sitesi Hızlandırma: LCP, INP, CLS

Web sitesi hızı artık tek bir “PageSpeed skoru” ile değil, gerçek kullanıcıların deneyimini ölçen Core Web Vitals metrikleriyle değerlendiriliyor. Bu rehber üç metriği, nasıl ölçüldüklerini, en sık kök nedenleri ve ölçülebilir iyileştirme adımlarını anlatır.

Üç metrik ve iyi eşikler

Değerlendirme, sayfa yüklemelerinin 75. yüzdelik dilimine göre yapılır: kullanıcıların en az %75’i iyi deneyim yaşıyorsa sayfa “iyi” kabul edilir. INP, Mart 2024’te First Input Delay (FID) metriğinin yerini almıştır.

Saha verisi ve laboratuvar verisi

Saha verisi Chrome kullanıcılarından toplanan gerçek deneyimdir (Chrome UX Report); Search Console’daki Core Web Vitals raporu ve PageSpeed Insights’ın üst bölümü bu veriyi gösterir ve 28 günlük kayan pencereyle güncellenir. Laboratuvar verisi Lighthouse gibi araçların sabit cihaz ve ağ koşullarında yaptığı ölçümdür; sorunu teşhis etmek ve değişikliğin etkisini hemen görmek için kullanılır. Doğru yaklaşım: hangi sayfa gruplarında sorun olduğunu saha verisiyle bulmak, nedenini laboratuvarda teşhis etmek, sonucu yine saha verisiyle doğrulamaktır. Kendi gerçek kullanıcı ölçümünüz (RUM) için web-vitals kütüphanesi analitik aracınıza bağlanabilir.

LCP’yi iyileştirmek

LCP dört parçaya ayrılarak incelenir: sunucu yanıt süresi (TTFB), kaynak yükleme gecikmesi, kaynak indirme süresi ve render gecikmesi.

• TTFB: Tam sayfa cache, CDN, PHP-FPM ve veritabanı iyileştirmeleri. Önbelleksiz WordPress sayfası her istekte PHP ve onlarca sorgu çalıştırır; ayrıntılar cache katmanları rehberinde.
• LCP görseli: Tembel yükleme (lazy load) LCP görselinde kapatılmalı, fetchpriority="high" verilmeli, uygun boyut ve modern format (WebP/AVIF) kullanılmalıdır.
• Render engelleyen kaynaklar: Gereksiz CSS ve senkron JavaScript azaltılmalı, kritik CSS önceliklendirilmelidir.
• Yazı tipleri: Kendi sunucunuzdan, alt kümelenmiş ve önceden yüklenmiş fontlar; font-display: swap.

INP’yi iyileştirmek

• Üçüncü taraf etiketleri (sohbet, reklam, ısı haritası) envanterleyin; gereksizleri kaldırın, kalanları etkileşim sonrasına erteleyin.
• 50 ms’den uzun görevleri (long tasks) tarayıcı performans profilinde bulun ve parçalayın.
• Olay işleyicilerinde ağır işleri görsel güncellemeden sonraya bırakın.
• Sayfa oluşturucu ve eklentilerin yüklediği kullanılmayan JavaScript’i kaldırın.

CLS’yi iyileştirmek

• Tüm görsel, video ve iframe öğelerinde genişlik ve yükseklik (veya aspect-ratio) belirtin.
• Çerez bandı, duyuru şeridi ve reklam alanları için önceden yer ayırın.
• Web fontlarının yüklenmesiyle metin boyutunun değişmesini font eşleştirme ayarlarıyla azaltın.
• İçeriği mevcut içeriğin üstüne dinamik olarak eklemeyin.

Ölçülebilir bir iyileştirme süreci

1. Search Console’da zayıf ve iyileştirilmesi gereken URL gruplarını listeleyin.
2. Her grup için temsilci bir sayfada laboratuvar ölçümü ve performans profili alın.
3. Kök nedenleri etki ve maliyete göre önceliklendirin.
4. Değişikliği staging’de ölçün, canlıya alın.
5. Saha verisini 4 hafta boyunca izleyin ve öncesi–sonrası tablosu hazırlayın.

Sık sorulan sorular

Lighthouse skoru düşük ama Search Console’da “iyi” görünüyor, hangisine inanmalıyız?

Search Console gerçek kullanıcı verisini (saha) gösterir ve kullanıcı deneyiminin asıl göstergesidir. Lighthouse sabit koşullarda yapılan bir laboratuvar testidir ve teşhis için kullanılır. Saha verisi iyiyse acil sorun yoktur; laboratuvar bulguları iyileştirme fırsatı gösterir.

Görselleri WebP’ye çevirmek yeterli mi?

Tek başına değil. LCP görseli için doğru boyut, öncelik (fetchpriority=”high”), tembel yüklemeden muaf tutma ve hızlı sunucu yanıtı da gerekir. Ayrıca tüm görsellerde genişlik ve yükseklik belirtilmelidir.

INP’yi en çok ne bozar?

Uzun JavaScript görevleri: ağır üçüncü taraf etiketler, büyük çerçeve paketleri ve tek tıklamada çok iş yapan olay işleyicileri. Gereksiz betiklerin kaldırılması ve uzun işlerin parçalara bölünmesi en etkili müdahalelerdir.

Performansın sıralamaya etkisi sınırlıdır; Google, sayfa deneyimini dikkate aldığını ancak alaka düzeyinin çok daha belirleyici olduğunu belirtir. Asıl kazanım kullanıcı deneyimi ve dönüşümdür. Sitenizi ölçüp iyileştirmek için web performansı ve Core Web Vitals hizmetimizi inceleyebilirsiniz.