사이트/블로그를 운영하다보면, 구글 서치 콘솔-코어 웹 바이탈에서 CLS 문제: 0.1 초과 또는 0.25 초과의 경고알림을 받을 수 있습니다. 특히 구글 애드센스 광고를 삽입하면서부터 이 문제가 쉽게 두드러지기 시작하는 경우가 많습니다.
인터넷을 검색하다보면 심각한 문제라고, 검색엔진의 결과노출에 영향을 줄 수 있다는 것을 쉽게 볼 수있을 것인데, 다만 해결방법으로 너무 복잡하게 설명되어 있어 초보자로 쉽게 조치를 취하기가 어려운 경우가 많겠습니다.
이 글에서는 필자가 CLS 문제: 0.1 초과에 대한 이해 및 해결방법을 정리해보았습니다.
미리 결론부터 얘기하자면, 이미지 사이즈를 잘 조절하여 블로그에 삽입하는 것이 포인트가 되겠습니다.
1. CLS 문제 파악
CLS(Cumulative Layout Shift, 누적 레이아웃 변경)는 웹페이지에서 예상치 못한 시각적 이동(레이아웃 변경)이 발생하는 정도를 측정하는 코어 웹 바이탈(Core Web Vitals) 지표 중 하나입니다.
정의를 보더라도 정확하게 어떤 뜻인지 이해하기 어려울 수 있겠는데, 아래 이해하기 쉽게 설명해봅니다.
1-1. CLS란?
CLS란 간단하게 한마디로 얘기하자면, 웹페이지의 표시/로딩속도를 수치화하여 얘기하는 것입니다.
즉 방문자가 웹페이지 링크를 클릭했을 때, 웹페이지의 모든 내용이 표시되는데 소요되는 시간을 얘기하는 것입니다. 이 시간을 수치화하여 아래와 같은 기준이 있습니다.
✅ CLS 점수 기준:
- 좋음: 0.1 이하
- 개선 필요: 0.1 ~ 0.25
- 나쁨: 0.25 초과
CLS가 0.1를 초과하게 되면 웹페이지의 표시/로딩속도가 느리다는 것이고, 방문자가 불편을 느낄 수 있다는 뜻으로 구글 서치 콘솔-코어 웹 바이탈에서 위 캡쳐와 같은 알림을 띄위게 됩니다.
1-2. CLS가 중요한 이유
웹페이지의 표시/로딩 속도가 느림에 따라 아래와 같은 영향이 있습니다.
- 웹페이지의 표시/로딩속도가 느림
- 표시/로딩이 끝나지 않은 상태에서 방문자가 특정 항목을 클릭
- 클릭하려는 순간 표시/로딩으로 항목의 위치가 변동
- 결과적으로 방문자가 클릭하고자 하는 항목을 클릭하지 못함
- 그래서 방문자가 불편
- 구글이 이런 웹사이트를 싫어함
- 검색결과의 노출순위가 떨어지게 됨
그래서, CLS 문제란 결국 웹페이지의 표시/로딩 속도를 올려주면 해결된다는 것입니다.
2. 웹페이지 표시속도 체크
PageSpeed Insights에서 URL 주소를 입력하여 웹페이지의 표시/로딩속도를 확인할 수 있습니다.
진단항목의 부호의 의미는 아래와 같습니다.
삼각 -> 심각
사각 -> 경고
동그라미 -> 양호
주의해야 할 것은 심각 또는 경고 표시가 나타났다고 무조건 수정 또는 조치를 취해야 하는 것은 아닙니다.
2-1. 타 사이트 확인
PageSpeed Insights에 자신의 블로그 주소를 입력하여 체크해보면, 심각 및 경고 표시가 너무 많아 깜짝 놀랄 것입니다.
다만, 모든 사이트들이 다 똑같다는 것을 아셔야 하겠는데, 네이버나 다음 사이트의 주소를 입력하여 확인해봐도 비슷한 결과 또는 더 심각한 상황이라는 것을 확인할 수 있습니다.
즉 이러한 경고 메시지가 떴다고 무조건 조치를 취해야 하는 것이 아니라는 것입니다.
2-2. 해결방법
CLS 초과 문제를 해결하는 방법을 검색하다보면, 인터넷에서 여러가지 조치들을 확인할 수 있는데, 기본적으로 위 경고 메시지들에 대한 조치라고 보시면 되겠는데, 그러한 조치는 기본적으로 웹페이지의 표시/로딩 속도를 줄여주는 역할이 되겠습니다.
다만, 내용이 복잡하다보니 초보자분들에게는 이해하기 어려운 내용뿐들이고, 왜 그렇게 해야 하는지도 잘 이해할 수 없을 때가 있겠습니다.
2-3. 가장 큰 문제 파악
사실 웹페이지의 표시/로딩 속도에 가장 큰 영향을 주는 것은 바로 이미지 파일입니다.
아시다싶이 웹페이지에서 이미지 파일의 용량이 가장 크기에, 가장 우선 취해야 할 조치가 이미지 파일의 용량을 줄여주는 것입니다.
이미지 용량 외에 다른 원인들도 있는데, CLS에 영향 주는 원인을 정리해보면 아래와 같습니다.
3. CLS에 영향 주는 원인
CLS에 영향을 주는 원인은 여러가지 있습니다. 그 중 가장 크게 영향을 주는 것이 이미지 파일이 되겠습니다.
3-1. 이미지 파일
일반적으로 웹페이지에서 이미지 파일의 용량이 가장 크겠습니다.
그래서 웹페이지의 표시/로딩 속도를 개선하고자 하면, 당연히 가장 먼저 이미지 파일의 용량 및 사이즈를 줄여야 하겠습니다.
3-2. 구글 애드센스 광고
CLS 초과 문제는 구글 애드센스 광고를 삽입 후에 잘 나타나는데, 그 이유는 웹페이지에서 광고를 불러오는 과정에 시간이 많이 걸리기 때문이겠습니다.
그래서 자동광고를 삽입할 경우, 미리 광고가 표시될 공간을 확보하도록 조치를 해두는 것이 좋다는 것이겠습니다.
3-3. 테마 및 플러그인
복잡한 테마일 수록, 웹페이지의 표시/로딩 속도가 느리며, 간단한 테마일 수록 속도가 빠르겠습니다.
또한 플러그인도 많으면 많을 수록, 웹페이지의 표시/로딩 속도에 영향을 주기에, 플러그인도 최소화 하는 것이 좋겠습니다.
3-4. 사용하지 않는 기능 제거
사용하지 않는 CSS 줄이기, 자바스크립트 줄이기 등도 있다지만, 초보분들에게는 어려운 내용이고 이런 것들을 제거하고자 플러그인을 설치한다는 것은 또한 속도를 늘여지게 하는 원인이 될 수도 있습니다.
이러한 부분은 결국 간단한 테마를 사용하고, 쓸때 없는 플러그인을 설치하지 않으면, 애초부터 큰 문제가 되지 않기에, 먼저 다른 조치들을 취해보는 것을 추천해봅니다.
3-5. 지연 로딩(Lazy Load) 최적화
지연 로딩을 설정함에 따라 CLS 초과 문제를 해결할 수 있다고도 하지만, 지연 로딩이 오히려 CLS 초과 문제를 이르킬 수도 있고, SEO에도 안좋은 영향을 가져다줄 수 있기에, 초보분들은 함부로 사용하지 않는 것이 좋겠습니다.
4. CLS 문제 해결
지금 보고 계시는 이 블로그도 CLS 초과 문제를 겪게 되었는데, 필자는 이미지 파일의 용량 및 사이즈를 줄이는 것으로 CLS 초과 문제를 해결하게 되었습니다.
4-1. 프로필 이미지
이 블로그일 경우, 오른쪽 사이드바에 조그마한 프로필 사진이 있습니다.
보이는 이미지 사이즈가 비록 작지만, 용량은 120KB가 넘었고 픽셀은 1280*1280이었습니다.
이 부분 용량을 5KB, 픽셀은 240*240으로 줄였습니다.
이것만으로도 웹페이지의 표시/다운 속도가 달라질 수 있습니다.
4-2. 이미지 및 썸네일
글에 삽입하는 이미지 그리고 썸네일로 사용하는 이미지의 용량과 사이즈도 웹페이지의 표시/로딩 속도에 영향을 주기에, 용량과 사이즈를 줄여주는 것이 필요하겠습니다.
블로그에 삽입하는 이미지의 용량은 200KB이하가 기준이 되겠고, 사이즈는 1200 또는 1280픽셀을 기준으로 하는 것이 좋다고 봅니다.
블로그에 업로드하는 이미지에 관한 더 상세한 내용은 아래 링크를 통해 확인할 수 있습니다.
이렇게 이미지 용량과 사이즈만을 줄여줘도 충분히 웹페이지의 표시/로딩 속도를 개선할 수 있는데, 지금 이 블로그가 바로 이런 방법으로 CLS 초과를 개선한 것입니다.
5. 자동광고 스페이스 확보
구글 애드센스 광고를 삽입하면서부터 CLS문제가 두드러지기 시작하는 경우가 많겠는데, 자동광고를 삽입할 경우 광고가 표시되는 공간을 미리 확보해두는 것은 시도해볼 수 있습니다.
테마 파일 편집기-style.css 파일에 아래 코드를 삽입하면 되겠습니다.
.adsbygoogle {
display: block;
min-height: 250px; /* 기본값 (반응형 광고에 적합) */
width: 100%;
overflow: hidden;
position: relative;
}물론 위와 같은 조치로, 광고가 표시되지 않더라도 광고를 위한 공백공간이 나타날 수 있기에, 가능한 이 방법도 추천하고 싶지 않지만, CLS 문제가 해결되지 않을 때 시도해볼만은 하겠습니다.
6. 마무리
CLS 초과 문제는 확실히 중요한 문제로, 방문자들에게 불편함을 가져다주기도 하고 검색엔진으로부터 검색결과의 노출순위에도 영향을 줄 수 있습니다.
결론적으로 CLS 초과 문제는 웹페이지의 표시/로딩 속도가 포인트이기에, 가능한 웹페이지를 가볍게 운영하는 것이 정답이 되겠습니다.
타 사이트/블로그의 속도를 확인해봐도 알겠는데, 누구나도 기본적으로 겪고 있는 문제들이 되겠고, 그에 대해 우리는 가장 기본적인 것들만 해두어도 충분하겠습니다.
그 기본적인 것이 바로 아래와 같은 두가지가 되겠습니다.
- 이미지 용량과 사이즈를 조절
- 가벼운 테마 및 플러그인 줄이기
위 두가지를 진행하고도 CLS 초과 문제가 해결되지 않는다면, 그때 다시 다른 조치를 취해보면 되겠습니다.
댓글