웹페이지의 일부 애니메이션은 렌더링 파이프라인의 컴포저 단계에서 완전히 처리될 수 있습니다.
합성되지 않은 애니메이션은 더 많은 작업이 필요하며 저가형 휴대전화에서 또는 성능이 높은 작업이 기본 스레드에서 실행 중일 때 잡음이 있음 (부드럽지 않음)이 나타날 수 있습니다.
합성되지 않은 애니메이션은 CLS 알고리즘이 측정하는 요소의 실제 움직임을 초래하므로 페이지의 누적 레이아웃 전환 (CLS)을 증가시킬 수도 있습니다. 이로 인해 다른 요소의 전환이 발생할 수 있습니다. 합성된 애니메이션은 다른 요소가 이동하지 않으므로 CLS에서 제외됩니다. CLS를 줄이면 Lighthouse 성능 점수가 개선됩니다.
배경
HTML, CSS, JavaScript를 픽셀로 변환하는 브라우저의 알고리즘을 총칭하여 렌더링 파이프라인이라고 합니다.
렌더링 파이프라인의 각 단계가 무엇을 의미하는지 이해하지 못해도 됩니다. 지금 이해해야 할 중요한 점은 렌더링 파이프라인의 각 단계에서 브라우저가 이전 작업의 결과를 사용하여 새 데이터를 만든다는 것입니다. 예를 들어 코드가 Layout을 트리거하는 작업을 실행하는 경우 Paint 및 Composite 단계를 다시 실행해야 합니다. 컴포지션되지 않은 애니메이션은 렌더링 파이프라인의 이전 단계 (스타일, 레이아웃 또는 페인트) 중 하나를 트리거하는 모든 애니메이션입니다. 합성되지 않은 애니메이션은 브라우저에 더 많은 작업을 강제하므로 성능이 저하됩니다.
렌더링 파이프라인에 대해 자세히 알아보려면 다음 리소스를 확인하세요.
Lighthouse에서 합성되지 않은 애니메이션을 감지하는 방법
애니메이션을 컴포지션할 수 없는 경우 Chrome은 Lighthouse에서 읽는 DevTools 트레이스에 실패 이유를 보고합니다. Lighthouse는 컴포지션되지 않은 애니메이션이 있는 DOM 노드와 각 애니메이션의 실패 이유를 나열합니다.
애니메이션이 합성되도록 하는 방법
합성기 전용 속성을 사용하고 레이어 수를 관리합니다 및 고성능 애니메이션을 참고하세요.