Las animaciones no compuestas pueden parecer con bloqueos (no fluidas) en teléfonos de gama baja o cuando se ejecutan tareas de alto rendimiento en el subproceso principal. Las animaciones con bloqueos pueden aumentar el Cambio de diseño acumulado (CLS) de tu página. Reducir el CLS mejorará la 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 hay problema si no entiendes qué significa cada paso de la canalización de renderización. El aspecto clave 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 realiza una acción que activa el diseño, los pasos de pintura y compuestos deben volver a ejecutarse. Una animación no compuesta es cualquier animación que activa uno de los pasos anteriores en la canalización de renderización (Estilo, Diseño o Pintura). Las animaciones no compuestas tienen un peor rendimiento porque fuerzan al navegador a realizar más trabajo.
Consulta los siguientes recursos para obtener más información sobre la canalización de renderización en profundidad:
- Dentro de los navegadores web modernos (parte 3)
- Simplifica la complejidad de la pintura y reduce las áreas de pintura
- Limítate solo a las propiedades del compositor y administra el recuento de capas
Cómo Lighthouse detecta animaciones no compuestas
Cuando no se puede componer una animación, Chrome informa los motivos de la falla al seguimiento de Herramientas para desarrolladores, que es lo que lee Lighthouse. Lighthouse enumera los nodos del DOM que tienen animaciones que no estaban compuestas, junto con los motivos de la falla para cada animación.
Cómo asegurarse de que las animaciones estén compuestas
Consulta Limítate solo a las propiedades del compositor y administra el recuento de capas y Animaciones de alto rendimiento.