블로그 CLS 문제: 0.1 초과(모바일) 오류 해결 방법 추천 및 가이드

반응형

블로그 CLS 문제: 0.1 초과(모바일) 오류 해결 방법 추천 및 가이드

블로그 CLS 문제: 0.1 초과(모바일) 오류 해결 방법 추천 및 가이드

Cumulative Layout Shift(CLS)는 페이지의 요소들이 예기치 않게 이동하면서 사용자 경험에 악영향을 미치는 문제를 말합니다. 모바일 기기에서 CLS가 0.1을 초과하는 문제를 해결하기 위한 다섯 가지 중요한 방법을 소개합니다.


1. 이미지 및 비디오 크기 명시

이미지와 비디오 요소가 로드되면서 레이아웃 이동을 방지하려면 고정된 크기를 명시하는 것이 중요합니다.

 

이미지 크기 명시

이미지 태그에 widthheight 속성을 사용하여 크기를 명시합니다.

<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>
반응형