CLS(Cumulative Layout Shift) 이해 및 수정하는 방법

 

 

CLS(Cumulative Layout Shift) 이해 및 수정

 

1. CLS란 무엇입니까?

CLS는 누적 레이아웃 이동을 나타냅니다.

웹페이지를 로드할 때 발생할 수 있는 예상치 못한 레이아웃 변경을 설명하는 데

사용되는 용어입니다.

책을 읽고 있는데 갑자기 페이지가 이리저리 뛰어다닌다고 상상해 보세요.

이것이 바로 우리가 웹사이트에서 피하고 싶은 것입니다.

 

2. CLS가 왜 문제인가?

상황이 예기치 않게 진행되면 웹사이트를 방문하는

사람들에게 혼란스럽고 실망스러울 수 있습니다.

Google은 웹사이트를 즐겁게 사용할 수 있도록 하기 위해

CLS를 개선하기 위해 할 수 있는 일이 있는지 알려줍니다.

CLS(누적 레이아웃 이동)를 개선하는 방법

▶ "대규모 레이아웃 변경 피하기 - 요소 발견됨"

위와 같이 내가  받은 메시지는 내 웹 사이트에서 너무 많이 움직일 수 있는

문제 항목이 있다는 것을 알려주는 것입니다.

 

▶ CLS(누적 레이아웃 변경)를 개선하려면 웹페이지의 다양한 요소를

최적화하여 예상치 못한 레이아웃 변경을 방지해야 합니다.

 

▶ CLS를 개선하기 위해 HTML에서 집중할 수 있는 몇 가지

일반적인 요소와 사례는 다음과 같습니다.

어떻게 해결할 수 있는지 살펴보겠습니다!

 

1. 이미지 CLS :

  ▶ 문제: 크기가 없는 이미지는 로드 시 이동이 발생할 수 있습니다.

  ▶ 해결책:

     이미지 태그에 width및 속성을 추가하세요 .height

     반응형 이미지의 경우 CSS를 사용하여 을 max-width100%로 설정하세요.

 

    <img src="your-image.jpg" alt="Description" width="300" height="200">

 

단계별 가이드:

**1. ** Google PageSpeed ​​Insights를 확인하세요.

Google PageSpeed ​​Insights 로 이동합니다 .

웹사이트 주소(URL)를 입력하고 '분석'을 클릭하세요.

 

**2. ** 레이아웃 변화를 일으키는 요소 식별:

"대규모 레이아웃 변경 방지 - 9개 요소 발견"이라는 부분을 찾으세요.
문제를 일으키는 요소들입니다.

**삼. ** 각 요소 조사:

자세한 내용을 보려면 제안을 클릭하세요.
"크기가 없는 이미지" 또는 "글꼴 문제"와 같은 내용이 표시될 수 있습니다.
이들 각각은 레이아웃 변화에 기여할 수 있습니다.

**4. ** 이미지 문제 해결:

웹사이트의 모든 이미지에 지정된 크기가 있는지 확인하세요.
이는 웹 사이트에 그림의 크기를 정확하게 알려주는 것을 의미합니다.
이는 브라우저가 이미지에 적합한 공간을 예약하는 데 도움이 됩니다.

**5. ** 주소 글꼴 문제:

글꼴 문제가 있는 경우 글꼴을 로드하는 데 시간이 걸리기 때문일 수 있습니다.
시스템 글꼴을 사용하거나 대체 글꼴을 지정하는 것을 고려해 보세요.
이렇게 하면 특수 글꼴을 사용하는 데 시간이 좀 걸리더라도
그 자리에 읽을 수 있는 내용이 남아 있습니다.