PERFORMANS
Animasyonları kaldırmadan performansı artırmak
Sorun çoğu zaman hareketin varlığı değil; görünmeyen sahnelerin de sürekli çalışmasıdır.
Bu içerik teknoloji seçimi için bir değerlendirme çerçevesidir. Projeye özel kapsam ve teknik doğrulamanın yerini tutmaz.
Önce ölçün
Aynı cihaz ve ekran boyutunda başlangıç, kaydırma ve etkileşimi ayrı inceleyin. Dosya boyutunun küçülmesi değerli olabilir; fakat bu tek başına gerçek cihaz akıcılığı veya Core Web Vitals sonucu değildir.
Görünmeyen sahneye bütçe harcamayın
Hero ekrandan çıktığında parçacık çizimini durdurmak, sekme gizliyken döngüyü askıya almak ve yalnız ilgili sahneleri güncellemek iyi bir başlangıçtır. Hareketi azaltma tercihi, içeriği kaybetmeden uygulanmalıdır.
Çizim ve yerleşimi ayırın
Boyut ve konum ölçümlerini her karede tekrarlamayın. Sabit ölçümleri yeniden boyutlandırma sırasında önbelleğe alın. Uygun hareketlerde transform ve opacity kullanın; her öğeye sürekli will-change eklemek yerine gerektiği yerde uygulayın.
Görseller ve başlangıç yükü
İlk ekrandaki önemli görsel ile aşağıdaki görseller aynı öncelikte değildir. Gerçek gösterim ölçüsüne uygun görseller, sabit en-boy oranı ve gecikmeli yükleme kullanın. Büyük veriyi HTML içine tekrar tekrar gömmek yerine önbelleğe alınabilir dosyalara ayırın.
Kabul koşulu
Animasyon kapalıyken de bütün içerik ve bağlantılar çalışmalı. Performans düzeltmesinden sonra kart sırası, menü kapatma, geri gezinme ve mobil dokunma davranışını yeniden test edin. Hız adına işlev kaybını başarı olarak saymayın.
Örnek bütçe: aynı sahne, daha az gereksiz iş
Bir açılışta hareketli parçacıklar, metin geçişi ve üç proje önizlemesi olduğunu düşünün. Buradaki ilk tercihimiz sahneyi kaldırmak değildir. Kullanıcı aşağı indikten sonra hâlâ parçacık çizilip çizilmediğini, sekme görünmezken döngünün çalışıp çalışmadığını ve bir fare hareketinin kaç hesaplama başlattığını inceleriz.
Bir iyileştirme kaydına “daha akıcı oldu” yazmak yerine neyin değiştiğini koyun: görünmeyen sahnede çizim döngüsü durdu, olay dinleyicisi sayfa değişiminde kaldırıldı, kullanılmayan büyük görsel ilk açılıştan çıkarıldı. Bunlar uygulanmış değişikliklerdir; gerçek cihazdaki sonuca ilişkin ölçüm değildir. Aynı animasyonun önceki ve sonraki sürümünü aynı cihazda, aynı ağ ve aynı hareket tercihleriyle karşılaştırmak gerekir.
Animasyon kabulünü görsel kabulden ayırmayın
Optimizasyon sırasında kart çıkışının zamanı, metnin sırası veya menünün kapanış davranışı değiştiyse yalnız teknik puanın iyileşmesi yeterli değildir. Kullanıcının onayladığı hareket korunmalı; azaltılmış hareket modu ise bilinçli bir alternatif olarak tasarlanmalıdır. Ana içerik bir animasyonun son karesine ulaşmadan tamamen erişilemez kalmamalıdır.
Kontrol listenize uzun sayfada aşağı-yukarı gezinmeyi, menüyü tekrar açmayı, ekranı yeniden boyutlandırmayı ve sekmeye geri dönmeyi ekleyin. Bazı hatalar ilk açılışta değil, aynı sahne ikinci kez kurulduğunda görünür. Görsellerin boyutlarını önceden ayırın ve okunabilir metinleri yalnız canvas içinde tutmayın. Bu yazı belirli bir site için Lighthouse veya Core Web Vitals sonucu vermez; sayı paylaşılacaksa kullanılan koşullar ve ölçüm kaydı da paylaşılmalıdır.