로그
에루라보
블로그 작업노트 20: 구글 콘솔 서치 코어 웹 바이탈 점수 개선 완료
18 views as of January 16, 2025.
으아아! 드디어!
3주전부터 계속 문제가 발생했던 코어 웹 바이탈의 CLS 문제가 해결되었다!!
문제 발생
때는 바야흐로 12월말, 이리저리 광고 코드를 옮기면서 광고가 뜨지 않았을때 이것저것 시도했던 때였다.
그때는 그냥 간단하게 광고가 안뜨면 해당영역을 없애는 스크립트를 짜서 블로그를 깔끔하게 보이게 하고 싶어서 손댄 코드가 이렇게 큰 파장을 불러올 줄 몰랐다.
코어 웹 바이탈
크롬 브라우저를 이용해 Lighthouse 기능으로 코어 웹 바이탈 검사하기 | 에루라보
요즘 SEO를 위해 웹사이트를 최적화 하다보면 여러 보조지표가 눈에 보인다.예전엔 단순히 페이지 로딩속도, 메타데이터 정도만 확인하는게 검색엔진 최적화였지만, 그런 조건을 만족하는 피싱사이트가 많아지자 검...
https://erulabo.com/269
코어 웹 바이탈은 위 포스팅에서도 볼 수 있듯이 웹사이트의 성능과 쾌적함을 나타내는 지표 중 하나로, 구글은 이 코어 웹 바이탈 점수가 낮으면 SEO 방면에서도 불이익이 있을 정도이다.
쉽게말해 "코어 웹 바이탈 점수가 낮다 = 사용자가 쓰기 힘든 사이트다" 라는 기준으로 판단하나보다.
각각의 지표는 여러 상태를 나타내는데, 나같은경우는 광고 레이아웃을 만지다가 구글 콘솔 서치로부터 웹 사이트에 전반적으로 CLS가 0.1을 초과하는 개선사항이 탐지가 되었다.
그전까진 항상 좋은 점수를 유지했었는데 말이다.
그래서 CLS 점수에 대해 알아보니 로드가 시작된 이후 레이아웃이 얼마나 변동했는지를 나타내는 지표라고하고, 이는 페이지가 로딩됨에 따라서 레이아웃의 변동이 있어서는 안된다라는 제한사항을 가지고 있다고한다.
CLS에 대한 이야기
이게 뭔 대수냐 싶었는데, 관련 문서를 찾아보니 CLS는 사용자에게 의도치 않은 액션을 유도할 수 있다고 해서 꽤나 엄격하게 다루는 문제라는걸 알게 되었다.
초기화면에서 얼마나 레이아웃이 변동되었는지를 수치화 한게 CLSCumulative Layout Shift (CLS) | Articles | web.dev
이 게시물에서는 레이아웃 변경 횟수 (CLS) 측정항목을 소개하고 이를 측정하는 방법을 설명합니다.
https://web.dev/articles/cls?hl=ko
해당 문제에 대한 자세한 내용은 위 링크에서 확인 할 수 있다.
그럼 내 사이트에서 이런 문제가 발생하는 이유가 무엇인가 했더니, 본문 상단에 뜨는 광고 코드의 유무때문에 그만큼 레이아웃이 변동된다는 사실을 알게 되었다.
그래서 해당 광고영역의 높이를 강제로 잡아두고, 로드가 안되었을때도 영역을 먹고 있을 수 있도록 관련 스크립트를 조정했다.
그리고 폰트의 로딩으로도 줄높이에따른 밀림현상이 발생할 수 있다고해서 폰트도 로컬 호스팅에 올려놔 로드를 최적화 했다.
문제 해결!
그렇게 작업을 하고 구글 콘솔 서치에 문제 해결 요청을 넣어두고 2주정도 기다리고 나니...
드디어 해결 되었다!!
이제 다시 내 블로그는 코어 웹 바이탈에 문제가없는 페이지로 전면 인식된다!
이 문제를 해결하려고 정말 여러가지를 알아보면서 새로 알게된것도 있고, 기술적으로도 이거저거를 많이 시도해봐서 나름 재미있었긴 했다.
하지만 다시는 보고싶지않은 ^^;
#블로그 #SEO
0
개의 댓글
에루라보 콜렉션의 다른 글
로그 카테고리의 다른 글
01/14
블로그 작업노트 19: 관리자단 변경 및 자잘한 UI 수정
오랜(?)만에 쓰는 작업노트.작업이 반복되면서 점점 완성형으로 다가가기때문에 작업건이 사라져서 이제는 리뉴얼이나 기능추가...
01/14
GTX-A 타보고 난 후 쓰는 짧은 리뷰
이걸 리뷰라고 말해야할진 모르겠지만, 말그대로 후기 남기는거니까... GTX-A 운정중앙역 - 서울역 노선 개통24년도 12월 27일,...
01/13
12주차 그림 결산
벌써 그림 연습을 시작한지 3달이 넘게 되었다.이렇게 지속적으로 그림을 그릴 수 있는 환경이 되어 여러모로 감사하고, 꾸준히...
