Web sitesi hız optimizasyonu ve Core Web Vitals (revizyon #9)

Bu, sayfanın #9 numaralı revizyonudur (, Castiel, Yayında). Güncel sürüme git

LCP, INP ve CLS eşik değerleri; önbellekleme, görsel optimizasyonu, CDN, PHP OPcache ve veritabanı gibi en etkili hızlandırma adımları.

Sayfa hızı hem kullanıcı deneyimini hem de arama motoru görünürlüğünü etkiler. Google, gerçek kullanıcı deneyimini Core Web Vitals adı verilen üç metrikle ölçer.

Core Web Vitals eşikleri​

MetrikNe ölçer?"İyi" eşik
LCP (Largest Contentful Paint)Sayfadaki en büyük içeriğin görünme süresi≤ 2,5 saniye
INP (Interaction to Next Paint)Tıklama/dokunmalara tepki süresi≤ 200 ms
CLS (Cumulative Layout Shift)Sayfa yüklenirken içeriğin kayması≤ 0,1
Değerler, ziyaretlerin %75'lik dilimine göre değerlendirilir. INP, 2024'te FID'nin yerini almıştır.

En etkili adımlar​

  1. Sayfa önbelleği: WordPress'te LiteSpeed Cache, WP Rocket veya sunucu tarafı (Nginx FastCGI cache, Varnish) önbellek kullanın. Dinamik sayfaların her istekte yeniden üretilmesi en büyük yavaşlık sebebidir.
  2. Görseller: Görselleri gösterildikleri boyutta sunun, WebP/AVIF formatına dönüştürün, ekran dışındakilere loading="lazy" ekleyin. LCP görseline lazy load uygulamayın; gerekirse fetchpriority="high" kullanın.
  3. Boyut belirtin: Görsel, video ve reklam alanlarına genişlik/yükseklik vererek CLS'yi önleyin.
  4. JavaScript'i azaltın: Kullanılmayan eklenti ve betikleri kaldırın, üçüncü taraf betikleri (sohbet, reklam, analiz) erteleyin. INP'yi en çok ağır JavaScript bozar.
  5. CDN: Statik dosyaları ziyaretçiye yakın noktalardan sunmak gecikmeyi azaltır.
  6. Sunucu tarafı: Güncel PHP sürümü, OPcache açık, HTTP/2 veya HTTP/3, Brotli/Gzip sıkıştırma. Nesne önbelleği (Redis/Memcached) veritabanı yükünü azaltır.
  7. Veritabanı: Yavaş sorguları tespit edin, gereksiz revizyon/transient kayıtlarını temizleyin, doğru indeksleri kullanın.
  8. Yazı tipleri: Az sayıda yazı tipi ağırlığı kullanın, font-display: swap ekleyin ve mümkünse kendi sunucunuzda barındırın.

Ölçüm​

  • PageSpeed Insights: Hem laboratuvar testi hem de (yeterli trafik varsa) gerçek kullanıcı verisini gösterir.
  • Search Console → Core Web Vitals raporu: Sitenizdeki sorunlu URL gruplarını listeler.
  • Tarayıcı geliştirici araçları (Lighthouse, Performance sekmesi): Sorunun kaynağını ayrıntılı incelemek için.
Tek bir testin puanına takılmayın; değişiklik öncesi ve sonrası aynı koşullarda birkaç ölçüm alıp karşılaştırın.
Farkı gör
Geri
En Üst