애니메이션이 핵심 웹 바이탈(LCP, INP 및 CLS)에 미치는 영향
애니메이션 및 애니메이션 런타임이 LCP, INP 및 CLS에 미치는 영향과 핵심 웹 바이탈을 손상시키지 않고 모션을 풍부하게 유지하는 실용적인 방법입니다.
핵심 포인트
애니메이션은 세 가지 핵심 웹 바이탈 모두에 해를 끼칠 수 있습니다. 무거운 애니메이션 파일과 런타임은 LCP를 지연시킬 수 있고, JavaScript 구동 애니메이션은 메인 스레드를 차단하고 INP를 악화시킬 수 있으며, 레이아웃 속성에 애니메이션을 적용하거나 예약된 공간 없이 애니메이션을 로드하면 CLS가 발생합니다. 히어로 콘텐츠를 애니메이션과 독립적으로 유지하고, 스크롤 없이 볼 수 있는 부분 아래에 지연 로드 런타임을 유지하고, 변형 및 불투명도에 애니메이션을 적용하고, 모든 애니메이션 요소를 위한 공간을 예약합니다.
세 가지 지표와 그 목표
web.dev에 문서화된 Google의 핵심 웹 바이탈은 로딩(콘텐츠가 포함된 최대 페인트, 2.5초 이하에 적합), 응답성(다음 페인트에 대한 상호작용, 200밀리초 이하에 좋음) 및 시각적 안정성(누적 레이아웃 변경, 0.1 이하에 좋음)을 측정하며 실제 페이지 로드의 75번째 백분위수에서 측정됩니다.
LCP: 영웅이 애니메이션을 기다리게 하지 마세요
화면에서 가장 큰 요소가 먼저 로드할 런타임과 파일이 필요한 애니메이션인 경우 LCP는 두 가지를 모두 기다립니다. 먼저 정적 이미지나 실제 텍스트를 렌더링한 다음 이를 강화하고 필요할 때 접힌 부분이나 아래에 있는 콘텐츠에 대해서만 애니메이션 런타임을 로드합니다.
INP: 메인 스레드를 자유롭게 유지
INP는 탭과 클릭에 페이지가 얼마나 빨리 반응하는지를 측정합니다. Web.dev는 메인 스레드의 긴 작업이 입력에 대한 응답을 지연시킨다고 설명합니다. 모든 프레임에서 복잡한 JavaScript를 실행하는 애니메이션이나 한 번에 시작되는 많은 애니메이션이 바로 그러한 원인이 될 수 있습니다. 간단한 효과를 위해 변환 및 불투명도에 대한 CSS 전환을 선호하고, 화면 밖의 애니메이션을 일시 중지하고, 상호 작용에 대한 응답으로 무거운 작업을 시작하지 마십시오.
CLS: 공간 예약 및 애니메이션 변환
Web.dev는 레이아웃 전환을 트리거하지 않고 애니메이션을 적용하려면 CSS 변환 속성을 사용할 것을 권장합니다. 너비와 높이를 변경하는 대신 크기를 조정하고 위쪽이나 왼쪽을 변경하는 대신 변환합니다. 캔버스 기반 애니메이션을 포함한 모든 애니메이션 요소에 로드 전에 고정 크기를 지정하여 페이지가 나타날 때 페이지가 점프하지 않도록 하세요.
캔버스 런타임
Lottie의 캔버스 렌더러, Rive 및 ExodeUI와 같은 캔버스 기반 런타임은 DOM 외부에서 그려지므로 프레임당 레이아웃 작업이 필요하지 않지만 다운로드 및 실행을 위한 런타임이 추가됩니다. 페이지의 장단점을 측정하세요. 런타임 지연 로드, CSS에서 캔버스 크기 조정, 중급 휴대폰에서 테스트 등이 가능합니다.
기억할 핵심 원칙
- 목표: 75번째 백분위수에서 LCP 2.5s, INP 200ms, CLS 0.1
- LCP 요소를 애니메이션 런타임에 종속시키지 마십시오.
- 상호작용 중에 메인 스레드를 자유롭게 유지하세요
- 변형 및 불투명도에 애니메이션을 적용합니다. 애니메이션 요소를 위한 공간 확보
- 지연 로드 런타임 및 중급 전화기에서 테스트
자주 묻는 질문
출처
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev