합성되지 않은 애니메이션 피하기

합성되지 않은 애니메이션은 저사양 휴대전화에서 또는 기본 스레드에서 성능이 높은 작업이 실행 중일 때 버벅거림 (부드럽지 않음)으로 표시될 수 있습니다. 버벅거리는 애니메이션은 페이지의 레이아웃 변경 횟수 (CLS)를 증가시킬 수 있습니다. CLS를 낮추면 Lighthouse 성능 점수가 개선됩니다.

배경

HTML, CSS, 자바스크립트를 픽셀로 변환하는 브라우저의 알고리즘을 총칭하여 렌더링 파이프라인이라고 합니다.

렌더링 파이프라인은 JavaScript, 스타일, 레이아웃, 페인트, 합성의 순차적 단계로 구성됩니다.
렌더링 파이프라인

렌더링 파이프라인의 각 단계가 무엇을 의미하는지 이해하지 못해도 괜찮습니다. 지금 알아야 할 핵심은 렌더링 파이프라인의 각 단계에서 브라우저가 이전 작업의 결과를 사용하여 새 데이터를 만든다는 것입니다. 예를 들어 코드에서 레이아웃을 트리거하는 작업이 있으면 페인트 및 복합 단계를 다시 실행해야 합니다. 합성되지 않은 애니메이션은 렌더링 파이프라인의 이전 단계 (스타일, 레이아웃 또는 페인트) 중 하나를 트리거하는 모든 애니메이션입니다. 합성되지 않은 애니메이션은 브라우저가 더 많은 작업을 하도록 강제하므로 성능이 좋지 않습니다.

렌더링 파이프라인에 대해 자세히 알아보려면 다음 리소스를 확인하세요.

Lighthouse에서 합성되지 않은 애니메이션을 감지하는 방법

애니메이션을 구성할 수 없는 경우 Chrome은 Lighthouse에서 읽는 DevTools 트레이스에 실패 이유를 보고합니다. Lighthouse는 각 애니메이션의 실패 원인과 함께 합성되지 않은 애니메이션이 있는 DOM 노드를 나열합니다.

애니메이션이 합성되도록 하는 방법

컴포지터 전용 속성 고수 및 레이어 수 관리고성능 애니메이션을 참고하세요.

자료