Web · 6 dk

Next.js projelerinde Core Web Vitals bütçesi

LCP, INP ve CLS hedeflerini tasarım sisteminin kararlarına dönüştürme rehberi.

Yayın: 8 Temmuz 2026 · Güncelleme: 4 Ağustos 2026

LCP, INP ve CLS hedeflerini tasarım sisteminin kararlarına dönüştürme rehberi.

Performansı yayın sonu testi olmaktan çıkarın

Performans bütçesi; sayfa ağırlığı, kritik JavaScript, görsel boyutu ve üçüncü taraf kod için kabul sınırlarını daha tasarım aşamasında tanımlar. Böylece hız, son haftada yapılan bir temizlik işi yerine ürün kararına dönüşür.

Gerçek kullanıcı sinyallerini ayırın

Laboratuvar testi tekrarlanabilirlik sağlar; gerçek kullanıcı verisi ise cihaz, ağ ve etkileşim çeşitliliğini gösterir. LCP, INP ve CLS değerlerini rota, cihaz grubu ve sürüm bazında izleyerek sorunun hangi kullanıcıları etkilediğini bulun.

  • Hero görselinin yükleme önceliği
  • İstemci bileşeni sınırı
  • Font ve layout kararlılığı
  • Üçüncü taraf script bütçesi

Bütçeyi CI sürecine bağlayın

Kritik rotalar için Lighthouse veya eşdeğer sentetik kontroller çalıştırın. Eşik aşımında rapor üretin; ancak tek skora odaklanmak yerine gerçek kullanıcı verisiyle değişimin etkisini birlikte değerlendirin.

Birlikte üretelim

Benzer bir kararı birlikte değerlendirelim.

Hedefinizi anlatın. Size kapsam, yaklaşım ve en doğru ilk adımla dönelim.