구글 서치 콘솔 CLS 문제 해결 방법
구글 서치 콘솔의 핵심적인 웹 지표 부분을 보면 사이트의 페이지 별로 속도에 문제가 있는 페이지를 확인할 수 있다.
물론 절대적인 지표라고 볼 수는 없지만 어쨌든 느린 URL이나 개선이 필요한 URL에 나타난 페이지들은 확인해보고 가능한 부분은 수정하는 것이 좋은데 어느 날 확인해보니 9월 중순을 기점으로 속도를 측정하는 기준에 변경이 있었는지 블로그의 거의 모든 페이지들이 CLS 문제로 개선이 필요한 URL이 되어있었다.
구글 서치 콘솔 CLS 문제 해결 방법(0.1 초과 데스크톱)
1. CLS는 무엇인가?
CLS(Cumulative Layout Shift)는 누적 레이아웃 변경이라고 하는데 웹페이지를 보는 사용자에게 예상치 못한 화면 변환이 나타나는 빈도를 수치로 정량화한 것이라고 보면 된다.
이미지가 상단에 배치되어 있고, 텍스트가 하단에 배치되어 있는 웹페이지로 예를 들어보자.
페이지를 처음 열면 보통은 텍스트가 먼저 나타나기 때문에 상단에 배치되게 된다.
하지만 페이지의 기본 레이아웃은 텍스트보다 사진을 상단으로 배치 때문에 이미지가 나타나면서 텍스트는 아래로 밀리게 될텐데 이런 식으로 레이아웃의 변경 발생하게 되면 CLS 수치가 올라간다고 보면 되는 것이다.
2. 해결 방법.
해결방법은 두 가지정도가 되지 않을까 한다.
이미지나 광고를 배치하는 경우 미리 높이 값을 할당하여 사용자가 예상치 못한 레이아웃의 변경이 없도록 하는 것과 페이지에 이미지와 광고가 모두 나타날 때까지 로딩을 표시하는 것이다.
블로그나 웹사이트의 레이아웃이 다르고 레이아웃을 구성한 각각의 이유가 있을 테니 CLS문제가 발생하면 원하는 방법으로 문제를 해결하는 것이 좋지 않을까 한다.
이 블로그는 되도록 심플하게 디자인했다고 생각하고 애드센스 광고가 나오지 않는 경우에도 공간을 차지하고 있었기 때문에 CLS가 어디서 발생하는지 바로 찾지 못했다.
하지만 아무리 생각해도 의심이 되는 부분은 상단광고 밖에 없었기 때문에 상단 광고에 고정된 높이 값을 추가해봤는데 의외로 CLS 문제를 해결할 수 있었다.
|
<ins class="adsbygoogle" |
3. 페이지 속도 확인.
문제가 되는 부분을 수정했다면 CLS 값을 확인해보는 것이 좋은데 확인은 구글의 PageSpeed Insights를 이용하는 것이 좋다.
속도 확인 방법은 아래의 링크로 접속하여 확인하고 싶은 웹페이지의 주소를 입력하고 분석을 누르면 된다.
그 외
CLS는 어디까지나 사용자가 예상치 못한 레이아웃이 변경됐을 경우 올라가는 수치로 특정 버튼을 클릭했을 때 레이아웃이 변경되는 경우는 해당되지 않으니 참고하면 도움이 되지 않을까 한다.