Web sayfalarındaki bazı animasyonlar tamamen oluşturma ardışık düzeninin oluşturucu aşamasında işlenebilir.
Birleştirilmemiş animasyonlar daha fazla çalışma gerektirir ve düşük kaliteli telefonlarda veya ana iş parçacığında performans açısından yoğun görevler yürütüldüğünde kalitesiz (sürükleyici olmayan) görünebilir.
Birleştirilmemiş animasyonlar, CLS algoritmasının ölçtüğü öğelerin gerçek hareketine neden olduklarından sayfanızın kümülatif düzen kaymasını (CLS) de artırabilir. Bu da diğer öğelerde de kaymalara neden olabilir. Birleştirilmiş animasyonlar diğer öğelerin kaymasına neden olmaz ve bu nedenle CLS'den hariç tutulur. CLS'yi düşürmek, Lighthouse performans puanınızı iyileştirir.
Arka plan
Tarayıcının HTML, CSS ve JavaScript'i piksele dönüştürme algoritmaları toplu olarak oluşturma ardışık düzeni olarak bilinir.
Oluşturma ardışık düzeninin her adımını anlamasanız da sorun olmaz. Şu anda anlaşılması gereken en önemli nokta, tarayıcıda oluşturma ardışık düzeninin her adımında yeni veri oluşturmak için önceki işlemin sonucunun kullanıldığıdır. Örneğin, kodunuzda düzeni tetikleyen bir işlem yapılıyorsa boyama ve birleştirme adımlarının tekrar çalıştırılması gerekir. Birleştirilmemiş animasyon, oluşturma ardışık düzenindeki önceki adımlardan birini (Stil, Düzen veya Boya) tetikleyen tüm animasyonlardır. Kompozit olmayan animasyonlar, tarayıcıyı daha fazla çalışmaya 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 kaynaklara göz atın:
- Modern web tarayıcılarına yakından bakış (3. bölüm)
- Boya karmaşıklığını basitleştirin ve boya alanlarını azaltın
- Yalnızca birleştirici özelliklerini kullanın ve katman sayısını yönetin
Lighthouse, birleştirilmemiş animasyonları nasıl algılar?
Bir animasyon birleştirilemediğinde Chrome, hata nedenlerini DevTools izlemesine bildirir. Lighthouse da bu izlemeyi okur. Lighthouse, birleştirilmemiş animasyonlara sahip DOM düğümlerini ve her animasyon için hata nedenlerini listeler.
Animasyonların birleştirilmesini sağlama
Yalnızca birleştirici özelliklerini kullanın ve katman sayısını yönetin ve Yüksek performanslı animasyonlar başlıklı makaleleri inceleyin.