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

블로그를 하신다면 아마도 검색 유입을 늘리기 위해서 네이버 웹마스터도구와 구글 서치콘솔에 블로그를 등록하고 계실겁니다. 구글 서치콘솔의 경우에는 꾀 다양한 지표로 블로그를 보여 주는데요. 최근에는 핵심적인 웹 지표를 많이 보여주는거 같습니다. 이번 포스팅에서는 구글에서 보여주는 핵심적인 웹 지표 중에서 제가 겪은 문제인 "CLS 문제: 0.25초과(모바일)" 에 대해서 해결 방법을 공유해보려고 합니다. 

구글의 경우에는 핵심적인 웹 지표가 나중에는 검색 순위 반영에 상당히 적용이 될거라고 생각이 됩니다. 가능하면 좋은 점수로 맞춰 놓는게 좋을거 같지만 그것도 생각보다 쉽지는 않네요. 위에 이미지에서 보시는것처럼 제 블로그의 대부분 페이지들이 현재 CLS 문제에 걸려 있습니다. 

CLS 가 뭐지??

그렇다면 CLS 가 뭘까요? CLS 는 Cumulative Layout Shift 의 약자로 얼마나 레이아웃이 변경이 되는지에 대한 항목입니다. 이해가 잘 안되시나요? 아래 페이지에 가보시면 이해가 되실거에요.

web.dev/cls/

Cumulative Layout Shift (CLS)

접속하셔서 이미지를 보시면 바로 이해가 될거라고 생각 됩니다. 만약에 내가 어떤 웹 사이트를 방문을 했고 뭔가 선택을 하려고 하는데 갑자기 이미지가 늦게 표시가 되면서 콘텐츠가 밀려 난다고 생각해 보세요. 그러면 잘못된 내용을 선택을 하거나 버튼을 누르게 될수도 있죠. 

즉, CLS 는 갑자기 바뀌는 레이아웃으로 인해서 잘못된 클릭이나 선택, 컨텐츠를 보는데 방해가 되는지를 측정하는 사용자 중심의 측정 항목이라고 보시면 될거 같습니다. 

그러면 이 문제를 어떻게 해결을 하면 될까요?

CLS 문제 해결방법

해결방법은 수정을 하면 됩니다. 그러면 어떻게 수정을 할까요? 수정을 하려고 한다면 어디가 문제인지 부터 찾아야 겠죠. 보통은 이런 문제는 페이지 첫 화면에서 바뀌는 레이아웃으로 인해서 발생을 하게 됩니다. 

확인을 하는 방법은 아래처럼 구글 서치콘솔에서 해당 문제의 화면에서 "예" 에 보이는 URL 부분을 클릭을 하시면 아래 이미지 처럼 왼쪽에 CLS 문제가 있는 URL 들이 열리게 됩니다. 그리고 제일 첫번쩨 페이지에 대해서 "PAGESPEED INSIGHTS" 를 열수 있는 링크가 있습니다. 

구글 서치 콘솔 CLS 문제

해당 링크를 클릭을 하시면 PAGESPEED INSIGHTS 페이지가 열리고 페이지를 검사를 하게 됩니다. 그리고 아래는 수정전의 제 블로그 페이지중에 하나의 검사 결과 입니다. 

결과 화면중에서 필드 데이터의 경우에는 지금까지 누적치를 보게 되는건데요. 이 부분은 누적치이기 때문에 보실필요 없고, 그아래에 있는 "실험실 데이터" 가 현재 값이라고 보시면 됩니다. 현재 이 페이지의 CLS 값은 0.373 입니다. 

구글 서치콘솔에서는 0.25 이상이면 문제로 표시하는거 같더라구요. 그렇다면 뭐가 문제일까요.. 바로 아래쪽을 보시면 답이 나옵니다.

PAGESPEED INSIGHTS 테스트 모습 (CLS 수정전)

아래쪽에는 시간대별로 로딩되는 화면을 그대로 보여 주는데요. 실제로 스마트폰에서 열어 봤을때는 이렇게 않 보일수도 있습니다. 성능이나 환경에 따라 다를수도 있기 때문인데요. 구글 서치 콘솔의 경우에는 PAGESPEED INSIGHTS 의 값을 기준으로 하는거 같더라구요. 

보시면 1번과 2번 의 차이가 보이시나요? 제 블로그는 현재 본문 앞에 썸네일이 먼저 나오도록 스킨을 만들어 놓았는데요. 썸네일이 나오기전에 텍스트가 먼저 표시가 됩니다. 썸네일의 경우에는 width 100% 에 height 를 auto 로 해놓아서 실제로 썸네일이 들어가기전에는 자리 차지를 않 하거든요.. 그러면서 본문 내용 나오고, 썸네일이 나오면서 레이아웃이 밀리는 현상이 생겼습니다.

그리고 최종적으로 썸네일이 들어가면서 레이아웃이 자리 잡는 형태가 되어 버렸죠. 이것때문에 CLS 값이 늘어났던거죠. 이렇게 해서 PAGESPEED INSIGHTS 에서 문제를 확인할수가 있습니다.

그래서 수정은 어떻게 하면 좋을까요? 모바일 페이지에서는 썸네일 높이를 200 정도로 잡아 버렸습니다. 그러면 미리 공간을 잡고 있기 때문에 레이아웃이 밀리지 않겠죠 ^^

PAGESPEED INSIGHTS 테스트 모습 (CLS 수정후)

수정후에 다시 측정을 한 모습입니다. 높이를 잡아놨기 때문에 레이아웃이 밀리는 현상없이 그대로 유지가 됩니다. 그리고 CLS 값은 0.1 의 아주 좋은 점수를 받았네요. 이렇게 해서 수정을 했다면 구글 서치콘솔에서 수정 결과 확인 버튼을 눌러서 유효성검사를다시 진행을 하면 됩니다. 유효성 검사는 시간이 조금 걸리니 참고 하세요 ^^

이렇게 해서 이번에 제가 겪은 CLS 문제:0.25 초과 해결 하는 방법에 대해서 알아 보았습니다. 구글 서치 콘솔에서 비슷한 문제가 있다면 참고가 되었으면 좋겠습니다. 여기까지 읽어 주셔서 감사합니다. ^^ 도움이 되셨다면 하단에 있는 구독 & 공감 & 댓글 많이 부탁 드려요~