구글 서치 콘솔을 점검하던 도중 코어 웹 바이탈 항목에서 생각지도 않게 CLS 문제가 발생했습니다.
그동안 아무 탈 없이 운영해 왔는데 갑자기 겪게 된 CLS 문제는 조금 당황스러우실 수 있습니다.
하지만 문제가 발견되었으니 일단, 해결은 하셔야겠지요?
우선, CLS 문제가 생긴 해당 URL에서 문제의 이유를 확인하신 다음 해결 방법을 찾아서 하나씩 적용해 볼 건데요.
생소한 용어들 때문에 겁나서 작업을 미루어 두셨다면 지금 다시 꺼내셔서 그냥 한번 차례로 해결을 시도해 보시는 것도 좋을 것 같습니다. 어차피 해결하셔야 되잖아요?
그럼, 지금부터 CLS 문제 개선을 위한 방법을 손쉽게 해결하는 과정에 대해서 함께 알아보고 적용해 보도록 하겠습니다.
1. 구글 서치 콘솔에서 CLS 가 무엇인가요
본인의 CLS 문제를 발견하셨다면 대체 이 CLS가 무엇인지 의미 정도는 알고 계셔야겠지요?
CLS는 누적 레이아웃 변경이라는 의미를 가지고 있는데 포스팅한 내 글과 사진의 배치가 막상 화면에서 달라 보이면 이 빈도를 수치로서 보여주게 되는 것을 말합니다.
이런 현상이 왜 발생하는지 보시면,
내 URL에 삽입한 이미지와 광고의 로딩이 느려지면 내가 게시한 글이 먼저 보이다가 늦게 이미지와 광고가 뜨게 되면서 내 게시글이 밀려 보이게 되기 때문입니다.
CLS 지수가 낮으면성능이 우수한 것으로 여기시면 되고, 반대로 CLS 지수가 높게 나타난다면 성능도 낮아 어떤 개선 작업을 진행해 주셔야 한다는 의미가 되겠지요?
2. 구글 서치 콘솔에서 CLS 문제 확인하는 방법
보통은 구글 서치 콘솔을 들어가셔 메뉴에서 코어 웹 바이탈을 클릭하시면 모바일과 데스크톱의 상태가 보입니다.
느린 URL 혹은 개선이 필요한 URL이 몇 개인지 개수도 함께 확인하실 수 있는데 모바일이든, 데스크톱이든 개선이 필요한 URL이 뜬 부분의 보고서 열기를 클릭해 줍니다.
그러면 문제가 있는 URL의 개수와 문제의 개수, 그리고 해당 URL이 문제가 있는 이유를 바로 확인하실 수 있는데요.
저 같은 경우는 보시는 것처럼 모바일 쪽으로 CLS 문제: 0.1 초과로 문제가 확인되는 것을 보실 수 있습니다.
해당 CLS 문제 부분을 클릭해 보시면 URL 그룹에서 문제의 해당 URL이 확인되는 것을 보실 수 있습니다.
문제의 해당 URL을 클릭하시면 오른쪽에 그룹 CLS 지수와 해당 URL 들을 여러 개 확인하실 수 있으니 하나씩 클릭해 보시면서 해당 문제를 해결해 가시면 되는데요.
오른쪽에 개선이 필요한 블로그 중 하나를 클릭해 보시면 URL CLS라는 창이 하나 뜨면서 개발자 자료실이 보이실 텐데 클릭해 들어가시면, 해당 글에 대한 분석 보고서가 나옵니다.
아래로 내려 보시면 ‘다음과 관련된 감사 표시’라는 항목에 CLS라고 보이실 텐데 클릭해 보시면 진단 항목에 발견된 레이아웃의 개수를 확인하실 수 있는데 더 보기를 클릭하시면 해당 이미지 부분이 뜹니다.
그 아래 ‘이미지 요소에 width 및 height가 명시되어 있지 않습니다’라고 표시된 것을 확인하실 수 있는데 역삼각형 더 보기를 누르시면 문제 되는 이미지 요소들을 확인하실 수 있습니다.
저 같은 경우는 예전에 작업했던 섬네일의 크기가 문제가 되었는지 해당 섬네일들이 모두 확인되어 바로 이미지 크기 설정을 위한 작업을 하였습니다.
그리고 시작하기 전에 말씀드리지만,
설정 자체는 문제를 해결해 가는 과정 중의 하나이며, 개인마다 발생하는 문제가 다르기 때문에 설정을 한다고 해서 문제가 곧장 완전하게 해결되지 않으실 수도 있습니다.
그렇지만 내 사이트가 조금 더 나은 상태로 가기 위한 과정의 일부라고 생각해 주시고 본인에게 맞는 부분을 적용하시면 될 것 같습니다.
3. 구글 서치 콘솔에서 CLS 문제 해결 방법
저는 페이지스피드 인사이트에서 성능진단을 하고 CLS 탭을 클릭했더니 Avoid large layout shifts라고 뜨면서 2개의 레이아웃 시프트가 발견되었다고 나오는데 레이아웃 시프트는 이미지 로딩이 느려 화면 레이아웃에 밀리는 현상을 말합니다.
그리고 문제가 된 섬네일의 크기가 요소에서 width=”559″ height=”512″로 확인이 되었는데 미리캔버스에서 크기를 지정하고 제작하는 것과는 별개인가 봅니다.
그러면 CLS 문제를 지금부터 해결해 보도록 할 텐데, 간단한 CSS 설정만으로 CLS 문제를 줄이는 해결 방법을 안내해 드리고자 합니다.
방법은 스킨 편집에서 html 편집으로 들어 가셔서 CSS 탭을 클릭해 들어갑니다.
그다음, post-item.thum img 라는 부분을 찾아보시면 아래 그림처럼 나오는데 여기서 width 및 height 부분을 각각 바꾸어 주셔야 합니다.
구글에서 원하는 크기는 C176 X 120 이라고 되어 있으므로 해당 부분 width : 176px, height : 120px 라고 변경해 주고 무엇 때문에 변경한 것인지 혹시 모르니 알아볼 수 있게 주석도 달아주도록 합니다.
그다음, html 탭을 클릭 후 thumb/C176 x 120을 검색하셔서 찾아보시면 해당 항목을 찾으실 수 있는데
fname 옆에 있는 alt 부분에 width와 height 값이 없는 것이 확인되므로 alt=” “바로 옆에 width와 height 값을 입력해 주고 적용을 눌러줍니다.
적용 후 성능은 조금 향상된 것을 확인할 수 있었는데, 다른 문제 요소들도 보니 이미지 파일 용량을 줄여서 사용하는 것도 성능에 영향을 미치기 때문에 기존 글들도 새로이 작업을 해주었습니다.
해당 사이트 섬네일 뿐만 아니라 모든 이미지 사진 용량과 크기를 줄여주는 작업을 하고 더보기 글들이 너무 많아도 성능에 안 좋다고 하여 몇 개만 남기고 삭제 후 다시 업로드를 해주었는데요.
확실히 이미지 용량과 크기를 줄여주는 작업을 하면 로드 지연되었던 해당 URL은 속도가 훨씬 개선된 것을 확인하실 수 있으실 것입니다.
그리고 성능이 점점 떨어졌었던 이유를 자세히 보니 애드핏 광고가 실려 있어서 해당 URL의 상태가 안 좋았던 것이 확인되어 이 광고를 삭제해 주기로 했는데요.
방법을 찾아보니 애드핏에서 제공한 SDK를 제거하면 된다고 하는데 가입한 적도, 설치한 적도 없는데 이건 무슨 말일까요?
이것은 카카오에서 광고를 강제로 넣고 있는 와중에 가입한 적도 없는 애드핏도 강제로 넣어 사이트에 악영향을 미치고 있는 것이라고 합니다.
그래서 저도 애드핏 광고를 강제로 삭제해 보았는데요.
아래처럼 코드를 그대로 복사하여 티스토리 스킨편집에 html로 들어가셔서 화면 맨 하단으로 스크롤 바를 내려서 </body> 바로 위에 붙여 넣기 했습니다.
그 이후, 코드를 적용한 덕분인 건지 아니면 파일 용량 크기를 줄이는 작업을 해주어서 그런 것인지 모르겠지만 어쨌든 서서히 성능은 좋아지고 있는 것 같습니다.
4. 마치며
지금까지 구글 서치 콘솔 CLS 문제 개선 0.1초 초과 해결 방법에 대해서 안내해 드렸는데요.
생소한 CSS적인 요소들로 인해 많은 시간을 소요하게 되었습니다.
하지만 중간에 이것 말고도 새로이 알게 되어 적용하게 된 사항도 있으니 보람된 시간들이었던 것 같습니다.
오늘도 소중한 정보가 여러분에게 소중하게 쓰이셨기를 바라며 함께 보시면 좋은 글들도 있으니 확인하시고 많은 도움 되셨으면 좋겠습니다.
▼▼▼함께 보시면 좋은 글▼▼▼
♥구글 서치 콘솔 NOINDEX 태그에 의해 제외되었습니다.[이렇게 해결]
♥애드센스 광고 크롤러 오류 간단하게 지금 바로 해결하세요
♥크롬 메모리 최적화-속도 개선 및 성능 향상 위한 설정