Web performansı ve Core Web Vitals: nereden başlanır?

Üç metrik ne ölçüyor?

• LCP (Largest Contentful Paint): sayfanın ana içeriğinin ne kadar sürede göründüğü. İyi: 2,5 saniye ve altı.
• INP (Interaction to Next Paint): kullanıcı etkileşimlerine sayfanın ne kadar hızlı yanıt verdiği. İyi: 200 milisaniye ve altı.
• CLS (Cumulative Layout Shift): sayfa yüklenirken öğelerin beklenmedik biçimde kayması. İyi: 0,1 ve altı.

Değerlendirme, gerçek kullanıcıların %75'lik dilimine göre yapılır; yani yalnızca hızlı bir bilgisayarda yapılan test yeterli değildir.

Önce ölçün

Laboratuvar araçları (Lighthouse gibi) sorunları bulmaya yardım eder; gerçek kullanıcı verisi (CrUX, PageSpeed Insights'taki alan verisi) ise Google'ın gördüğü sonuçtur. İkisini birlikte izleyin ve değişikliklerin etkisini ölçerek ilerleyin.

LCP'yi iyileştirmek

• Ana görseli doğru boyutta ve modern biçimde (ör. WebP/AVIF) sunun.
• Ana içeriğin önüne geçen büyük JavaScript ve CSS dosyalarını azaltın ya da erteleyin.
• Sunucu yanıt süresini kısaltın; mümkünse sayfayı önbellekten sunun.
• Ana içeriğin ilk HTML'de gelmesini sağlayın; tarayıcıda sonradan oluşturulan içerik gecikir.

INP'yi iyileştirmek

• Uzun süren JavaScript görevlerini parçalayın.
• Etkileşimde gereksiz yeniden çizimlerden kaçının.
• Üçüncü taraf betikleri sınırlayın; her ek betik yanıt süresini etkileyebilir.

CLS'yi iyileştirmek

• Görsel ve videolara genişlik ile yükseklik tanımlayın.
• Reklam ve gömülü içerik için yer ayırın.
• Yazı tipi yüklenirken içeriğin kaymasını önlemek için yedek yazı tipini ve görüntüleme stratejisini dikkatle seçin.

Hız bütçesi belirleyin

Performans, bir kez yapılıp biten bir iş değildir. Sayfa başına toplam dosya boyutu ve betik sayısı için bir üst sınır belirlemek, yeni özellik eklenirken hızın sessizce kötüleşmesini önler.

Sonuç

VeriSet A.Ş., modern web uygulamalarını performans ve erişilebilirlik hedefleriyle birlikte geliştirir. Daha fazla bilgi için web platformları çalışma alanı sayfamıza bakabilirsiniz.