구글 코어 웹 바이탈 개선 사례 - 거북이 미디어 전략 연구소

구글 코어웹 바이탈 개선 사례를 CLS와 INP 중심으로 정리합니다. 저는 이 블로그에서 CLS(Cumulative Layout Shift : 누적 레이아웃 이동)을 개선하고 업무적으로는 INP(Interaction to Next Paint)를 개선했습니다. CLP는 아직 해결 안해서 모르겠습니다. 아는 분이 많긴 하겠지만 코어 웹 바이털에 관심이 있을 일부 독자들을 위해서 공유합니다.

코어 웹 바이탈 개선이 필수적일까?

전통적인 신문사 사이트는 일반적으로 코어 웹 바이탈이 좋아서 판단이 어려움
중소규모 언론사 사이트는 코어 웹 바이털을 개선해주면 불이익은 안받을 수 있을 것으로 판단됨
코어 웹 바이탈을 좋음으로 만드는 작업이 어렵지 않다면 시도해도 손해보진 않을 것임
해외 SEO는 코어 웹 바이탈이 중요하다고 판단하고 있음

코어 웹 바이탈 개선을 위해 필요한 도구

전통적으로 추천되는 라이트하우스와 구글 스피드 인사이트는 너무 많은 정보가 있어서 추천 안함
크롬 개발자 도구에서 성능탭(Performance) 사용. : 무료이면서도 직관적이라 추천드림. 내 컴퓨터의 성능과 서치콘솔의 코어웹바이털 현재 수치와 비교해서 보는 것도 가능.다만, 내 PC의 성능이 평균 이상이거나 평균 이하일 경우에는 왜곡된 데이터가 나올 수도 있음

디버그베어라는 코어웹바이털 등 성능 지표를 측정하는 사이트. 크롬 개발자도구보다 풍부한 데이터를 볼 수 있음. 14일 무료 시험 서비스가 가능해서 구글 아이디로 로그인해서 접속. 가장 좋은건 내 사이트에 코드를 심어두고 실시간 사용자의 점수까지 파악할 수 있다는 것

서치콘솔의 CLS 문제 해결 예제

서치콘솔에서 CLS 문제 모니터링

서치콘솔의 코어웹바이털의 디바이스별로 개선이 필요한 URL, 느린 URL이 많은지를 확인
거북이 미디어 블로그의 경우 24년 12월 29일부터 페이지를 가져오는 중 화면이 갑자기 움직이는 정도를 측정한 값인 CLS가 개선필요하다고 경고가 뜸
2월 중순 4일 정도 CLS가 느림으로 뜨다가 여전히 CLS 개선 필요 경고 유지

거북이 미디어 의 코어웹바이털 중 CLS 문제 발생 및 해결-250305

웹사이트에서의 CLS 문제 발생 원인 찾기

크롬 개발자도구의 성능탭에서 확인한 결과 모바일 최상단의 구글 앵커 광고때문에 화면이 밀리는 현상이 있다는 것을 파악함
크롬 개발자도구의 2번 Layout Shift를 살펴보면 해당 컴퓨터에서 밀림 현상이 일어나는 요소들을 파악해줌
이 요소 중 가장 오래 걸리는 요소를 없애거나 또는 문제 없도록 하는게 필요함(이건 개발자의 영역)

크롬 개발자도구를 통해 코어웹바이털 중 CLS와 INP 문제 요소 파악-250305

거북이 미디어의 경우 CLS 밀림 현상이 구글 애드센스의 상단 앵커광고에서 발생한다는 것을 파악함
여기까지 오면 그 이상은 사실상 개발자에 요청하는게 일반적임

코어웹바이털 중 콘텐츠 이동 현상(CLS)를 가져왔던 구글 애드센스 앵커광고 중 상단 고정 배너

웹사이트에서의 CLS 문제 대처 방안

거북이 미디어의 경우 CLS 밀림 현상이 구글 애드센스의 상단 앵커 광고때문이라는 것을 파악했기 때문에 두 가지 방법을 고민했음
해당 광고를 없애는 방법은 심플하지만 광고 영역 자체를 없애는 건 싫었음. 하루 300원의 광고 수익 감소 가능성도 있었기 때문
구글 애드센스는 사이트 자동 광고 ==> 오버레이 형식==>앵커 광고에서 앵커 광고가 상단과 하단 가장자리에 고정되는 형식이었음
다른 방법이 있는지 확인한 결과 앵커광고에 추가 코드만 넣으면 하단 가장자리에만 고정하는 구글이 추천한 방법이 있다는 것을 파악하고 해당 코드를 적용

애드센스 앵커광고를 하단에만 고정하기 코드

▲ 자동광고 코드 일반 예제
<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"
     crossorigin="anonymous"></script>
</head>

▲자동광고 코드에서 앵커광고를 하단 고정만 사용하고 싶을 경우(data-overlays="bottom"를 자동 광고 코드에 추가)
<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" data-overlays="bottom" crossorigin="anonymous"></script>
</head>

CLS 문제 해결 후 서치콘솔에서 수정결과 확인하기

크롬 개발자 도구 성능(Performance) 탭에서 문제가 해결된 것을 확인
서치콘솔에서 수정결과 확인하기를 누르면 최대 28일 이내에 결과가 나타나게 됨
유효성 검사를 통과하게 되면 문제 해결, 추가적인 이슈가 있다면 처음부터 다시 확인 필요

구글 서치콘솔에서 CLS 수정 확인 버튼과 그 결과값 - 최대 28일 소요 — 구글 서치콘솔에서 CLS 수정 확인 버튼과 그 결과값 – 최대 28일 소요

INP 이슈 해결 사례 – CLS와 비슷해서 약식으로 설명

서치콘솔에서 INP 문제 모니터링 및 해결 방법

INP는 일반적으로 잘 나타나지 않는 현상이라 약식으로 설명
서치콘솔을 통해 일부 사이트에서 INP때문에 사이트에 개선 필요한 url들이 있다는 걸 파악
크롬 개발자 도구를 통해 원인을 찾으려고 했으나 실패
debugbear 사이트를 통해 일부 자바스크립트가 INP 시간을 지연하는 것으로 파악
챗GPT를 통해 해당 자바스크립트 코드 내에 INP를 지연하는 요소를 파악했고 해당 요소를 개발자에 수정해달라고 요청
서치콘솔에서 검토 요청 신청한 후 유효성 검사 통과함

(끝)