CLS: 레이아웃 전환

사용자의 인내심을 테스트하는 스크롤: CLS

읽으려고 하는 텍스트가 갑자기 아래로 스크롤되거나 버튼을 클릭하려는 순간 버튼의 위치가 바뀌는 것보다 더 나쁜 경험은 거의 없습니다. Google은 CLS(누적 레이아웃 변경) 측정항목으로 이러한 불안정성을 측정하고 0.1 미만을 '양호'로 간주합니다.

CLS가 발생하는 이유는 무엇인가요?

• 크기가 지정되지 않은 이미지 및 동영상.
• 글꼴 로딩 지연(FOIT/FOUT 문제).
• 동적으로 추가된 광고 공간 또는 위젯.
• CSS 파일을 늦게 로드하여 스타일이 변경되었습니다.

해결책

• 모든 및 태그에 width 및 height 값을 추가합니다.
• CSS의 aspect-ratio 속성을 사용하여 공간 예약
• 사용 시 글꼴 업로드를 위해 font-display: swap, 대체 글꼴의 크기를 기본 글꼴에 맞춥니다.
• 광고 공간을 위한 고정 높이 컨테이너를 만듭니다.