📚 Reference

• 공식 문서 1

📜 Chapter

FCP (First Contentful Paint)

‣

‣

LCP (Largest Contentful Paint)

INP (Interaction to Next Paint)

TBT (Total Blocking Time)

‣

Layout shift

• Layout shift
• 레이아웃 시프트
• 페이지 로딩 중이나 실행 중에 기존 요소의 위치가 예기치 않게 변경되는 현상
• Core Web Vitals 지표 중 하나인 CLS (Cumulative Layout Shift)로 측정

문제인 이유

• 사용자 경험 저하: 클릭하려던 버튼이 갑자기 움직여 오클릭 유발
• SEO 영향: 구글 검색 랭킹 평가에 포함

주요 원인

• 이미지/광고가 로딩되면서 크기 지정이 안 돼 공간을 밀어냄
• 웹폰트 교체 시 텍스트 폭 변경
• 비동기 데이터 로딩 시 기존 레이아웃 재배치

예방 방법

• 이미지·비디오 태그에 width/height 명시