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.
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.
