반응형
블로그 CLS 문제: 0.1 초과(모바일) 오류 해결 방법 추천 및 가이드
Cumulative Layout Shift(CLS)는 페이지의 요소들이 예기치 않게 이동하면서 사용자 경험에 악영향을 미치는 문제를 말합니다. 모바일 기기에서 CLS가 0.1을 초과하는 문제를 해결하기 위한 다섯 가지 중요한 방법을 소개합니다.
1. 이미지 및 비디오 크기 명시
이미지와 비디오 요소가 로드되면서 레이아웃 이동을 방지하려면 고정된 크기를 명시하는 것이 중요합니다.
이미지 크기 명시
이미지 태그에 width
와 height
속성을 사용하여 크기를 명시합니다.
<img src="image.jpg" width="600" height="400" alt="Description">
비디오 크기 명시
비디오 태그에 width와 height 속성을 사용하여 크기를 명시합니다.
<video width="800" height="450" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
2. 동적 콘텐츠 예약 공간 확보
광고 배너나 비동기식으로 로드되는 콘텐츠는 미리 공간을 확보하여 레이아웃 이동을 방지해야 합니다.
예약 공간 확보
광고 배너와 같은 동적 콘텐츠의 경우, 미리 공간을 확보해둡니다.
<div style="width: 300px; height: 250px;">
<!-- 광고 배너 -->
</div>
Placeholder 사용
비동기식 콘텐츠 로드 전에 Placeholder를 사용하여 공간을 확보합니다.
<div style="width: 100%; height: 200px; background-color: #f0f0f0;">
<!-- 로드 중인 콘텐츠를 위한 Placeholder -->
</div>
3. 웹 폰트 로딩 최적화
웹 폰트 로딩 시 FOUT(Flash of Unstyled Text)나 FOIT(Flash of Invisible Text)를 방지하여 레이아웃 이동을 줄입니다.
Font Display 속성 사용
웹 폰트를 로드할 때 font-display 속성을 사용하여 텍스트 가시성을 보장합니다.
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: swap;
}
폰트 최적화
웹 폰트 로드를 지연시키거나 중요하지 않은 폰트를 비동기적으로 로드합니다.
<link rel="stylesheet" href="path/to/font.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="path/to/font.css"></noscript>
반응형