Algunas animaciones en las páginas web se pueden controlar por completo en la etapa del compositor de la canalización de renderización.
Las animaciones no compuestas requieren más trabajo y pueden parecer entrecortadas (no fluidas) en teléfonos de gama baja o cuando se ejecutan tareas de alto rendimiento en el subproceso principal.
Las animaciones no compuestas también pueden aumentar el desplazamiento del diseño acumulativo (CLS) de tu página, ya que generan un movimiento real de los elementos que mide el algoritmo de CLS, lo que puede provocar desplazamientos en cadena en otros elementos. Las animaciones compuestas no provocarán que otros elementos se muevan, por lo que se excluyen de la CLS. Reducir el CLS mejorará tu puntuación de rendimiento de Lighthouse.
Información general
Los algoritmos del navegador para convertir HTML, CSS y JavaScript en píxeles se conocen colectivamente como canalización de renderización.
No te preocupes si no entiendes qué significa cada paso de la canalización de renderización. Lo más importante que debes comprender ahora es que, en cada paso de la canalización de renderización, el navegador usa el resultado de la operación anterior para crear datos nuevos. Por ejemplo, si tu código hace algo que activa el diseño, los pasos de pintura y composición deben volver a ejecutarse. Una animación no compuesta es cualquier animación que activa uno de los pasos anteriores de la canalización de renderización (diseño, estilo o pintura). Las animaciones no compuestas tienen un rendimiento inferior porque obligan al navegador a realizar más trabajo.
Consulta los siguientes recursos para obtener información detallada sobre la canalización de renderización:
- Descripción general de los navegadores web modernos (parte 3)
- Simplifica la complejidad de la pintura y reduce las áreas de pintura
- Usa solo propiedades del compositor y administra el recuento de capas
Cómo Lighthouse detecta animaciones no compuestas
Cuando no se puede combinar una animación, Chrome informa los motivos de la falla al registro de DevTools, que es lo que lee Lighthouse. Lighthouse enumera los nodos DOM que tienen animaciones que no se combinaron junto con los motivos de error de cada animación.
Cómo garantizar que las animaciones se combinen
Consulta Usa solo propiedades del compositor y administra la cantidad de capas y Animaciones de alto rendimiento.