Animasyon Temel Web Verilerini (LCP, INP ve CLS) Nasıl Etkiler?
Animasyonlar ve animasyon çalışma zamanlarının LCP, INP ve CLS'yi nasıl etkilediği ve Önemli Web Verileri'ne zarar vermeden hareketi zengin tutmanın pratik yolları.
Ana nokta
Animasyon üç Temel Web Verisinin tümüne zarar verebilir: ağır animasyon dosyaları ve çalışma süreleri LCP'yi geciktirebilir, JavaScript odaklı animasyon ana iş parçacığını engelleyebilir ve INP'yi kötüleştirebilir ve düzen özelliklerini canlandırmak veya animasyonları ayrılmış alan olmadan yüklemek CLS'ye neden olur. Kahraman içeriğini animasyondan bağımsız tutun, çalışma zamanlarını ekranın alt kısmında geç yükleyin, dönüşümü ve opaklığı canlandırın ve her animasyonlu öğe için alan ayırın.
Üç metrik ve hedefleri
Google'ın web.dev'te belgelenen Temel Web Verileri, yüklemeyi (Largest Contentful Paint, 2,5 saniye veya daha kısa sürede iyi), yanıt verebilirliği (Next Paint ile Etkileşim, 200 milisaniye veya daha az iyi) ve görsel stabiliteyi (Kümülatif Düzen Kayması, 0,1 veya daha az iyi) ölçer ve gerçek sayfa yüklemelerinin 75. yüzdelik diliminde ölçülür.
LCP: Kahramanı animasyon için bekletmeyin
Ekrandaki en büyük öğe, çalışma zamanı ve ilk olarak yüklenecek dosya gerektiren bir animasyonsa, LCP her ikisini de bekler. Önce statik bir görüntü veya gerçek metin oluşturun, ardından geliştirin ve animasyon çalışma zamanlarını yalnızca gerektiğinde ekranın yakınındaki veya altındaki içerik için yükleyin.
INP: ana iş parçacığını serbest tutun
INP, sayfanın dokunma ve tıklamalara ne kadar hızlı yanıt verdiğini ölçer. Web.dev, ana iş parçacığı üzerindeki uzun görevlerin girdiye verilen yanıtı geciktirdiğini açıklıyor. Her karede karmaşık JavaScript çalıştıran animasyon veya aynı anda başlayan birçok animasyon tam olarak buna neden olabilir. Basit efektler için dönüşüm ve opaklık üzerinde CSS geçişlerini tercih edin, ekran dışı animasyonları duraklatın ve bir etkileşime yanıt olarak ağır işlere başlamaktan kaçının.
CLS: alanı ayırın ve dönüşümü canlandırın
Web.dev, düzen değişikliklerini tetiklemeden animasyon oluşturmak için CSS transform özelliğinin kullanılmasını önerir: genişliği ve yüksekliği değiştirmek yerine ölçeklendirin, üst veya solu değiştirmek yerine çevirin. Kanvas tabanlı animasyonlar da dahil olmak üzere her animasyonlu öğeye, yüklenmeden önce sabit boyutlar verin, böylece sayfa göründüğünde atlamaz.
Tuval çalışma süreleri
Lottie'in tuval oluşturucusu, Rive ve ExodeUI gibi tuval tabanlı çalışma zamanları, DOM'un dışına çizilir; bu, kare başına düzen çalışmasını önler ancak indirmek ve çalıştırmak için bir çalışma zamanı ekler. Sayfanız için dengeyi ölçün: çalışma zamanını geç yükleyin, tuvali önceden CSS'te boyutlandırın ve orta sınıf telefonlarda test edin.
Hatırlanacak temel ilkeler
- Hedefler: LCP ≤ 2,5 s, INP ≤ 200 ms, 75. yüzdelik dilimde CLS ≤ 0,1
- LCP öğesini bir animasyon çalışma zamanına bağımlı hale getirmeyin
- Etkileşimler sırasında ana konuyu serbest tutun
- Dönüşümü ve opaklığı canlandırın; animasyonlu öğeler için yer ayırın
- Tembel yükleme çalışma süreleri ve orta sınıf telefonlarda test
Sık sorulan sorular
Kaynaklar
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev