Evita las animaciones no compuestas

Las animaciones no compuestas pueden parecer irregulares (es decir, no fluidas) en teléfonos de gama baja o cuando se ejecutan tareas de alto rendimiento en la línea principal. Las animaciones Janky pueden aumentar el cambio de diseño acumulativo (CLS) de su página. Reducir CLS mejorará su puntuación de rendimiento de Lighthouse.

Antecedentes #

Los algoritmos del navegador para convertir HTML, CSS y JavaScript en píxeles se conocen colectivamente como canalización de renderizado.

Está bien si no comprendes lo que significa cada paso de la canalización de renderizado. La clave para entenderlo ahora es que en cada paso de la canalización de renderizado, el navegador usa el resultado de la operación anterior para crear nuevos datos. Por ejemplo, si tu código hace algo que activa Diseño, los pasos Pintura y Composición deben ejecutarse nuevamente. Una animación no compuesta es cualquier animación que activa uno de los pasos anteriores en la canalización de renderizado (Estilo, Diseño o Pintura). Las animaciones no compuestas funcionan peor porque obligan al navegador a trabajar más.

Consulta los siguientes recursos para obtener más información en detalle sobre la canalización de renderizado:

• Una mirada al interior de los navegadores web modernos (parte 3)
• Simplifica la complejidad de la pintura y reduce sus áreas
• Limítate a las propiedades del compositor y gestiona el número de capas

Cómo detecta Lighthouse las animaciones no compuestas #

Cuando una animación no se puede componer, Chrome informa las razones de la falla al seguimiento de DevTools, que es lo que lee Lighthouse. Lighthouse enumera los nodos DOM que tienen animaciones que no fueron compuestas junto con los motivos de falla de cada animación.

Cómo asegurarse de que las animaciones estén compuestas #

Consulta Adherirse a las propiedades exclusivas del compositor y administrar el número de capas y las animaciones de alto rendimiento .

Recursos #

• Código fuente para la auditoría de Evitar animaciones no compuestas
• Limítate a las propiedades exclusivas del compositor y gestiona el número de capas
• Animaciones de alto rendimiento
• Simplifica la complejidad de la pintura y reduce sus áreas
• Una mirada al interior de los navegadores web modernos (parte 3)