시각적 변화량 최적화 - ChoDragon9/posts GitHub Wiki

Cumulative Layout Shift (CLS)

  • 항상 이미지 및 동영상 요소에 크기 속성을 포함
  • CSS 가로, 세로 비율 상자와 같은 항목으로 필요한 공간을 잡는다.
  • 사용자 상호 작용에 대한 응답을 제외하고는 기존 컨텐츠 위에 컨텐츠를 삽입하지 않는다. 이렇게하면 레이아웃 이동이 예상된다.
  • 레이아웃 변경을 트리거하는 속성의 애니메이션보다 transform 애니메이션으로 적용한다.