블로그 팁

구글 서치콘솔에서 CLS 문제:0.25 초과 가 나왔을때 해결하는 방법

작성자 정보

  • 작성자 Becain
  • 작성일

컨텐츠 정보

본문

구글서치 콘솔에서 CLS 문제:0.25 초과가 나오면 초치 하는게 좋습니다. 

조치 하는 방법은 어느정도 HTML 과 CSS 만 알면 쉽게 조치 가능 합니다. 

물론 경우에 따라서 조치가 어려울수도 있을거 같기는 하지만 대부분은 조치가 가능할거 같아요.

 

일단 아래처럼 구글 서치 콘솔에서 CLS 문제가 되는 URL 을 선택해서 

PAGESPEED INSIGHTS 로 해당되는 URL 을 열어 봅니다. 

 

선택 영역_102.png

 

URL 을 열어 보면 아래처럼 항목별로 수치가 나오는데요.

여기에서 CLS 값이 굉장히 낮게 나와서 구글 서치콘솔에 나오는 건데요.

필드 데이터는 그동안 누적치이기 때문에 수정을 해도 바로 적용이 안됩니다. 

 

선택 영역_100.png

 

실험실 데이터를 기준으로 보시며 되는데요. 위 이미지에서 보면 0.373 으로 굉장히 않 좋게 나옵니다. 

그리고 아래쪽에는 블로그 페이지가 어떻게 로드 되는지 보여 주는데요.

여기에서 레이아웃이 시간에 따라 변화가 되는게 보입니다. 

이미지를 로딩 하고나서 텍스트가 밀리는걸 볼수가 있는데요.

 

수정은 이미지 영역의 높이를 고정하면 간단히 해결할수 있는거겠죠.

거기에 맞게 HTML 과 CSS 를 수정을 해줍니다. 

그리고 다시 테스트

 

선택 영역_101.png

 

수정하고 나서 CLS 가 엄청 높게 잘 나오네요 ^^

이렇게 CLS 문제:0.25 초과를 해결을 하시면 됩니다. 

간단하죠 ^^

관련자료

댓글 0
등록된 댓글이 없습니다.
목록

공지글


동영상


최근글


새댓글


포인트 랭킹


COUNT


오늘
109
어제
146
최대
189
전체
21,567