Hızlı bir web deneyimi yalnızca iyi bir Lighthouse puanı değildir. Kullanıcının içeriğe ne kadar çabuk ulaştığı, etkileşim sırasında arayüzün ne kadar kararlı kaldığı ve düşük donanımlı cihazlarda nasıl davrandığı birlikte değerlendirilmelidir. Nuxt güçlü varsayılanlar sunsa da uygulama kararları performansın gerçek sonucunu belirler.

Optimizasyona başlamadan önce ölçüm yapmak gerekir. En büyük içerik öğesinin ne zaman göründüğünü, sayfa kaymalarını ve kullanıcı etkileşimine verilen gecikmeli yanıtları inceleyin. Gerçek kullanıcı verileri ile geliştirme ortamındaki testleri birlikte kullanmak daha doğru öncelikler belirlemenizi sağlar.

Görselleri doğru boyut ve formatta sunun

Sayfanın en büyük dosyaları çoğunlukla görsellerdir. WebP veya AVIF kullanmak tek başına yeterli değildir; kullanıcının ekranından çok daha büyük dosyalar göndermemek gerekir. Boyut bilgilerini belirtmek sayfa kaymalarını önler, geç yükleme ise ekranın altında kalan içerik için gereksiz ağ kullanımını azaltır.

Web performansı ölçüm paneli
Ölçüm sonuçlarını kullanıcı yolculuğundaki gerçek öneme göre değerlendirin.

İstemciye gönderilen JavaScript miktarını yönetin

Her bileşenin ilk yüklemede çalışması gerekmez. Büyük editörler, haritalar, video oynatıcılar veya yalnızca modal açıldığında kullanılan araçlar dinamik olarak yüklenebilir. Sunucu bileşenleri ve adalar yaklaşımı uygun alanlarda istemci tarafı maliyetini azaltmaya yardımcı olur.

  • İlk ekranda görünmeyen ağır bileşenleri dinamik olarak yükleyin.
  • İhtiyacınız olmayan tüm kütüphaneyi değil kullanılan işlevleri içe aktarın.
  • Veri isteklerini aynı içeriği tekrar çekmeyecek biçimde önbelleğe alın.
  • Üçüncü taraf komut dosyalarını gerekli izin ve etkileşim sonrasına erteleyin.
  • Paket büyüklüğünü düzenli olarak analiz edip beklenmeyen artışları izleyin.
En hızlı kod, kullanıcının cihazına hiç göndermek zorunda olmadığınız koddur.
Akıcı hareket için görsel kalite ve performans arasında denge kurmak gerekir.

Performans bütçesi belirleyin

Ekip olarak kabul edilebilir JavaScript, görsel ve font boyutları için sınırlar belirlemek kararları kolaylaştırır. Yeni bir paket eklendiğinde ya da görsel kalite artırıldığında bu bütçeye etkisi görünür olur. Otomatik testlerde sınırların izlenmesi gerilemeyi erken aşamada yakalar.

Performans tek seferlik bir temizlik çalışması değildir. İçerik, özellik ve üçüncü taraf araçlar büyüdükçe düzenli ölçüm ve gözden geçirme gerekir. En iyi sonuç, teknik metrikleri kullanıcıların gerçekten hissettiği hızla birlikte değerlendiren ekiplerde ortaya çıkar.