Birleştirilmemiş animasyonlar, düşük kaliteli telefonlarda veya ana iş parçacığında yüksek performans gerektiren görevler çalışırken çekici (düzgün değil) görünebilir. Sorunsuz animasyonlar, sayfanızın Cumulative Layout Shift (CLS) değerini artırabilir. CLS'yi düşürdüğünüzde Lighthouse Performans puanınız artar.
Arka plan
Tarayıcının HTML, CSS ve JavaScript'i piksellere dönüştürme algoritmaları toplu olarak oluşturma ardışık düzeni olarak bilinir.
Oluşturma ardışık düzenindeki her bir adımın ne anlama geldiğini anlamamanızda bir sorun yoktur. Şu anda anlaşılması gereken en önemli nokta, oluşturma hattının her adımında tarayıcının yeni veriler oluşturmak için önceki işlemin sonucunu kullanmasıdır. Örneğin, kodunuz Layout'u tetikleyen bir şey yaparsa Boya ve Kompozit adımlarının tekrar çalışması gerekir. Birleştirilmemiş animasyon, oluşturma ardışık düzeninde önceki adımlardan (Stil, Düzen veya Boya) birini tetikleyen animasyonlardır. Birleştirilmemiş animasyonlar, tarayıcıyı daha fazla iş yapmaya zorladığı için daha kötü performans gösterir.
Oluşturma ardışık düzeni hakkında ayrıntılı bilgi edinmek için aşağıdaki kaynakları inceleyin:
- Modern web tarayıcılarına yakından bakış (3. bölüm)
- Boya karmaşıklığını basitleştirme ve boya alanlarını azaltma
- Yalnızca birleştirici özelliklere bağlı kalın ve katman sayısını yönetin
Lighthouse, birleştirilmemiş animasyonları nasıl algılar?
Bir animasyon birleştirilemediğinde Chrome, hata nedenlerini Lighthouse tarafından okunan DevTools izlemesine bildirir. Lighthouse, birleştirilmemiş animasyonlara sahip DOM düğümlerini ve her animasyonun hata nedenlerini listeler.
Animasyonların birleştirilmesini sağlama
Yalnızca oluşturucuya özel özelliklere bağlı kalma ve katman sayısını yönetme ile Yüksek performanslı animasyonlar konularına bakın.