구글 서치 콘솔에서 내 블로그 웹 페이지에 CLS 문제가 있다고 한다

저는 제 블로그에 구글 서치 콘솔을 연동해서 사용하고 있습니다. 한 달에 두 세번씩 구글 서치 콘솔을 종종 들어가보곤 하는데, 최근에 구글 서치 콘솔에서 확인한 결과 2022년 8월 8일을 기점으로 제 블로그에서 "개선이 필요한 URL"이 갑자기 많아졌다는 것을 알게 되었습니다. 원래는 대부분의 페이지가 "빠른 URL"이었는데, 갑자기 8월 8일부터 거의 모든 URL이 "개선이 필요한 URL"이라는 평가를 받았습니다. 모바일과 데스크톱 환경 모두에서요. 

 

 

그 날짜에 제가 블로그 스킨을 바꾼 것도 아니라, 왜 이렇게 된 것인지 정확히 이해는 안 되지만, 아마 구글 서치 콘솔에서 사이트를 평가하는 기준/알고리즘이 변경된 것이 아닌가 싶습니다. 혹시 이런 현상을 발견하신 분들은 댓글로 공유해주시면 감사하겠습니다. 

 

보고서를 열어보니 "CLS 문제: 0.1 초과"가 문제라고 명시되어 있습니다. 

 

 

그래서 먼저 CLS가 무엇인지 찾아봤습니다. CLS에 대해 구글링해보니 좋은 문서가 있어서 링크를 아래 공유해드립니다. 

 

https://web.dev/cls/

Cumulative Layout Shift(누적 레이아웃 이동, CLS)

 

CLS (cumulative layout shift, 누적 레이아웃 이동)

CLS는 우선 cumulative layout shift의 약자입니다. 누적 레이아웃 이동이라고 번역되어 있네요. 링크 안에 관련된 CLS를 설명하는 영상을 보면 바로 이해가 되는데, 간단하게 여기서 말로 풀자면 다음과 같습니다.

 

종종 어떤 사이트를 이용하다 보면, 인터넷 속도가 느린 환경에서는 광고나 이미지 파일, html 요소 등이 다른 요소들에 비해 늦게 나오면서 페이지의 레이아웃/구조가 바뀌곤 합니다. 원래는 휴대폰에서 상단에 보였던 요소가 위에 광고가 뒤늦게 보여지면서 갑자기 밑으로 밀려나곤 하는 것이죠. 이렇게 레이아웃이 이동되면 생기는 문제 중 하나는 사용자가 느끼기에 약간 정신사나운 것 뿐만 아니라, 어떤 버튼을 클릭했는데 그 사이 레이아웃이 변경되면서 다른 버튼이 클릭되거나, 광고가 클릭되거나 합니다. 굉장히 짜증나는 상황이죠. 최악의 경우에는 금액을 지불하게 되는 버튼을 의도치 않게 클릭하게 될 수도 있습니다.

 

이 CLS 점수는 0.1 이하여야 사용자들이 만족할 만한 페이지 경험을 제공할 수 있다고 합니다. 웹 페이지의 속도를 측정할 수 있는 사이트인 https://pagespeed.web.dev/ 에서 제 블로그의 한 페이지 URL을 넣고 속도를 측정해보니, CLS 점수가 0.234로 0.1보다 높게 나오는 상태입니다. 

 

 

이것을 낮게 만들기 위한 방법은 조금 연구 해봐야 할 것 같습니다. 가장 의심되는 것들은 광고와 용량이 큰 이미지 파일들인데, 해결 방법을 찾게 되면 그때 또 공유하도록 하겠습니다.

 

그런데 이 사이트에서 진단해준 내용을 봐서는 CLS말고도 개선할 수 있는 항목들이 꽤 있는 것 같습니다. 하나씩 공부해보고 해결할 수 있는 것은 해결해봐야 겠습니다.