합성되지 않은 애니메이션은 저사양 휴대전화에서 또는 기본 스레드에서 성능이 높은 작업이 실행 중일 때 버벅거림 (부드럽지 않음)으로 표시될 수 있습니다. 버벅거리는 애니메이션은 페이지의 레이아웃 변경 횟수 (CLS)를 증가시킬 수 있습니다. CLS를 낮추면 Lighthouse 성능 점수가 개선됩니다.
배경
HTML, CSS, 자바스크립트를 픽셀로 변환하는 브라우저의 알고리즘을 총칭하여 렌더링 파이프라인이라고 합니다.
렌더링 파이프라인의 각 단계가 무엇을 의미하는지 이해하지 못해도 괜찮습니다. 지금 알아야 할 핵심은 렌더링 파이프라인의 각 단계에서 브라우저가 이전 작업의 결과를 사용하여 새 데이터를 만든다는 것입니다. 예를 들어 코드에서 레이아웃을 트리거하는 작업이 있으면 페인트 및 복합 단계를 다시 실행해야 합니다. 합성되지 않은 애니메이션은 렌더링 파이프라인의 이전 단계 (스타일, 레이아웃 또는 페인트) 중 하나를 트리거하는 모든 애니메이션입니다. 합성되지 않은 애니메이션은 브라우저가 더 많은 작업을 하도록 강제하므로 성능이 좋지 않습니다.
렌더링 파이프라인에 대해 자세히 알아보려면 다음 리소스를 확인하세요.
Lighthouse에서 합성되지 않은 애니메이션을 감지하는 방법
애니메이션을 구성할 수 없는 경우 Chrome은 Lighthouse에서 읽는 DevTools 트레이스에 실패 이유를 보고합니다. Lighthouse는 각 애니메이션의 실패 원인과 함께 합성되지 않은 애니메이션이 있는 DOM 노드를 나열합니다.
애니메이션이 합성되도록 하는 방법
컴포지터 전용 속성 고수 및 레이어 수 관리 및 고성능 애니메이션을 참고하세요.