구글서치콘솔 CLS 문제: 0.1 초과 해결하는 방법

구글서치콘솔 CLS 문제: 0.1 초과 해결하는 방법

 

구글서치콘솔에서 코어 웹 바이탈 에 아래와 같이 CLS 문제가 떴습니다.

참 다양한 오류들이 보이네요^^;

아래로 스크롤하니 원인이 된 URL 이 표시됩니다.

URL 을 클릭하니 오른쪽에 개선이 필요하다고 나옵니다.

그런데 도대체 뭐 어떻게 하라는 건지는 안 나오는군요;;

아래는 제가 검색하여 알아낸 내용입니다.

 

CLS 란?

 

우선 CLS 가 도대체 뭔지 알아봤습니다.

CLS 는 Cumulative Layout Shift 의 약자로 누적 레이아웃 이동을 의미하는 것으로

웹 페이지를 보는 중에 갑자기 레이아웃이 변경되어 텍스트가 움직여 읽던 부분의 위치가 바뀌는 등의 경우를 의미합니다.

버튼을 클릭하려고 할 때 레이아웃이 변경되면서 누르려는 버튼이 다른 곳에 위치하게 되면

사용자 입장에서는 큰 불편을 겪게 됩니다.

특, CLS 문제는 웹사이트에서 페이지 로딩 중에 발생하는 레이아웃의 변화가

사용자 경험에 부정적인 영향을 주는 것을 의미합니다.

CLS 점수가 0.1을 넘게 되면 사용자 경험이 나쁜 것으로 최적화가 필요하게 됩니다.

 

조치 방법

 

이미지 최적화

제 글을 일단 확인해 보니 큰 이미지가 2개가 있는데 이 이미지가 로등이 늦어지면서 발생될 가능성이

먼저 보였습니다. 그래서 이미지 사이즈를 줄였습니다.

 

애드센스 사이즈 설정

애드센스 광고는 반응형으로 웹페이지 로딩 시 약간의 딜레이가 생겨서 늦게 뜰 때가 있습니다.

이 또한 CLS 에 좋지 않은 점수를 준다고 합니다.

많은 글들에서 이 문제가 가능 큰 원인이라고 합니다.

티스토리 수익 > 애드센스 > 광고설정 - 본문상단 의 수정 버튼을 클릭합니다.

아래와 같은 창이 나오면 반응형을 고정사이즈로 바꿔주면 됩니다.

저 같은 경우는 모바일 페이지가 문제가 되어 모바일 쪽만 300 × 250 으로 고정시켜주었습니다.

PC 까지 적용하려면 728 × 90 으로 적용하면 됩니다.

 

추가조치

상단 광고는 없애는 방법도 있다고 합니다.

일단 저는 위 2가지를 적용했으니 상황을 봐야겠습니다.

 

적용 후 처리 과정도 곧 포스팅하겠습니다.

 

참고

https://web.dev/articles/cls?hl=ko

Cumulative Layout Shift (CLS)  |  Articles  |  web.dev