CLS는 이미 페인트된 가시 콘텐츠가 나중에 움직여 사용자가 보던 것이 밀릴 때 발생합니다. 원인은 거의 항상 공간이 예약되지 않은 채 로드되는 콘텐츠입니다.
transform 대신 레이아웃 속성(top, height)을 애니메이션하는 것.width/height(또는 aspect-ratio)를 설정하여 로드 전에 공간이 예약되게 하세요:<img src="/photo.jpg" width="1200" height="800" alt="..."> <!-- 박스를 예약 -->
.hero { aspect-ratio: 16 / 9; } /* 반응형 미디어의 비율을 예약 */
font-display: optional 또는 swap에 size-adjust/preload를 더해 웹 폰트 도착 시 리플로우 최소화.position: absolute)하거나 아래에서 밀어내세요.transform/opacity로 애니메이션 — 이들은 합성(composite)되어 레이아웃을 트리거하지 않습니다.CLS는 가장 고치기 쉬운 Core Web Vital입니다 — 보통 빠진 크기 몇 개 문제입니다. 면접관은 이를 통해 지원자가 렌더 파이프라인을 이해하는지 시험합니다. 공간을 미리 예약하면 브라우저가 리플로우할 필요가 없어지며, 그것이 transform이 top 애니메이션을 이기는 이유입니다.