[애드센스] 코어 웹 바이탈(core web vitals) 확인 및 문제 해결하기

[GUIDE] EAST SUNNY 발행일 : 2023-05-06

구글 애드센스를 운영하면 구글에 있어서 알쏭달쏭한 사항들이 많이 있는데요. 그중에서도 가장 중요하지만 파악하기 어려운 코어 웹 바이탈에 대하여 알아보겠습니다. 본인 페이지를 점검해 보고 문제가 있으면 해결하는 시간을 가져 봅시다.

코어 웹 바이탈 이란?

구글에서는 21년 5월부터 웹 페이지 검색 지표에 코어 웹 바이탈 항목을 반영하겠다고 밝혔었는데요. 구글에서 검색 유입이 이루어지기 위해서는 구글 SEO를 최대한 반영해야 한다는 말을 많이 들어 보셨을 거예요.

구글 SEO를 반영하는 것과 반영하지 않는 것은 큰 차이가 있습니다. 저번에 설명드렸던 Alt 텍스트의 삽입이나 첨부할 사진의 편집, h태그의 사용은 기본 중에 기본이니 아래의 링크를 클릭하여 글을 참고해 주시고 작성할 블로그에 꼭 반영해 보세요.

[Alt 텍스트 삽입 및 첨부할 사진 편집] / [올바른 h태그의 사용]

오늘은 코어 웹 바이탈에 대해서 알아보고 본인의 페이지를 점검해 보는 시간을 갖도록 해보겠습니다.

1. 코어 웹 바이탈

전 세계를 대상으로 하는 구글은 하루에도 수천, 수억 가지의 정보들이 생성되고 삭제되기 때문에 아무래도 자신들만의 좋은 정보를 선별하는 기준이나 로직이 필요했을 겁니다. 그중에 한 가지로 코어 웹 바이탈을 사용하고 있는 것인데요.

코어 웹 바이탈을 한 문장으로 정의해 보면 "페이지가 빠르게 로드되고 상호 작용 및 시각적 안정성 요소를 갖추었는가?"라고 할 수 있습니다. 그에 맞게 코어 웹 바이탈은 크게 LCP, FID, CLS로 3가지 요소로 나누어 측정 되게 됩니다.

2. 코어 웹 바이탈 측정 항목

(1) Largest Contentful Paint(LCP)

LCP를 한 문장으로 요약해 보면 "웹 페이지에서 가장 큰 부분을 로드하는 데 걸리는 시간 측정"이라고 할 수 있는데요. 즉 페이지의 로딩 성능을 평가하는 부분입니다. 구글의 가이드라인에서는 측정값이 2.5초 미만인 경우에 양호로 표기하여 줍니다. 2.5초에서 이상부터는 개선이 요구됩니다.

이 항목은 페이지 전체의 로딩 성능을 평가하는 것은 아니고, 사용자가 우리의 블로그를 클릭하였을 때 첫 화면에 나오는 화면 외의 부분의 속도를 측정하는 값이기 때문에 이 항목을 개선하기 위해서는 레이아웃의 구조를 개선할 필요가 있습니다.

글을 작성할 때, 중요한 콘텐츠를 상단에 배치하고, 크기가 큰 동영상이나 고해상도의 사진의 경우에는 다운로드를 할 수 있는 파일로 첨부하거나, 다른 링크 페이지를 통해 개선할 수 있습니다.

(2) First Input Delay(FID)

FID를 한 문장으로 요약해 보면 "사용자와 웹 페이지와의 상호작용 시 걸리는 시간 측정"이라고 할 수 있는데요. 쉽게 말해 웹페이지의 응답성을 나타냅니다. 이 부분은 코드와 연관도가 매우 높습니다. 고급자의 경우가 아니면 코드를 개선하기는 쉽지 않은데요. 티스토리에서 기본으로 제공되는 스킨들은 코드가 상당 부분 이미 최적화되어 있기 때문에 잘 알지 못하면 코드를 변경하는 것을 지양하시는 편이 좋겠습니다.

블로그에 글을 쓰거나, 사진을 첨부하거나, 티스토리에서 제공하는 지도를 첨부하거나 하는 행위들 모두가 코드를 사용하는 것이기 때문에, 공유하는 모든 것들을 컨트롤할 필요가 있습니다. 예를 들어 티스토리에서 제공하는 다음 지도를 직접 첨부해 주는 기능은 상당 부분 코드를 잡아먹기 때문에 비효율적일 수 있겠죠. 차라리 사진을 캡처하여 용량을 편집한 다음에 올리는 방법이 좋을 것 같습니다. 이와 같은 맥락으로 첨부하는 사진의 용량을 편집하는 것이 얼마나 중요한지 다시 한번 인지할 수 있겠습니다. 위에 공유한 "첨부할 사진 편집"글을 반드시 숙지하여 주시기 바랍니다.

(3) Cumulative Layout Shift(CLS)

CLS를 한 문장으로 요약해 보면 "페이지 스크롤 시 레이아웃의 변화 양을 측정"이라고 할 수 있는데요. 쉽게 말해 시각적 안정성을 나타냅니다. 느린 화면에서 강제로 스크롤을 내리다가 아래의 페이지가 변형되거나 변동되어 원하지 않는 곳을 클릭하는 경험을 해보셨을 겁니다.

이러한 페이지에는 CLS점수는 상당히 저하됩니다. 특히 과도한 애니메이션이나 용량이 큰 비디오를 넣을 때 페이지가 느려지기 때문에 스크롤하는 과정에서 아래 화면의 변형을 불러일으키기 쉬우니 주의하셔야 합니다. 또한 전반적으로 페이지가 무겁지 않게 글을 작성하셔야 합니다.

코어 웹 바이탈 점검

코어웹 바이탈을 확인하기 위해서는 구글 써치 콘솔에 접속하셔야 합니다. 접속 후 어느 정도의 데이터가 쌓이면 아래 실험란에서 "페이지 경험", "코어 웹 바이탈", "모바일 사용 편의성", "HTTPS"의 메뉴가 나오는데요. 이것들이 모두 구글에서 중점적으로 보는 지표들입니다.

오늘 점검해 볼 사항은 그중에서도 코어 웹 바이탈인데요. 제 블로그를 예를 들어보면, 현재 데스크톱에서의 검색은 모두 100%로 양호한데 모바일에서 아주 안 좋은 수치를 보이고 있죠.

그중에서도 저는 한 개의 글이 CLS 0.1을 초과하고 있기 때문에 그와 유사한 그룹 169개가 함께 안 좋은 영향을 받고 있는 상황입니다. 하지만 막상 문제 되는 페이지를 접속했을 때 저는 특별한 원인을 찾지 못했어요. 왜냐하면 저는 모든 코드가 정상적으로 반영된 스킨을 사용하고 있고, 고정으로 서식에 설정해 두고 항상 같은 형태로 글을 작성하고 있기 때문이죠.

구글에서는 가끔 이해할 수 없는 형태의 오류 메시지를 보내기 때문에 "나는 잘못한 것이 없다."라고 생각해서 "그냥 방치해 두자"하고 2달 이상을 방치했었는데요. 인터넷을 찾아보니 자연스럽게 다음번 크롤링 때 문제가 해결되었다고 인식해 주는 경우도 있지만 저의 경우에는 전혀 변함이 없었죠. 그래서 제가 어떻게 해결했냐! 지금부터 방법을 공유해 드립니다.

코어 웹 바이털 해결 방법

일전에 "광고 크롤러 오류가 있으며, 이 때문에 수익 손실이 발생할 수 있습니다."에러를 해결하는 글을 작성했었는데, 위의 해결방법은 이때와 똑같습니다. 위에서 처럼 문제가 되는 페이지를 먼저 찾은 뒤 크롤링 액세스 기능을 통해서 구글에 직접적으로 요청하는 방법을 사용했습니다.

구글 써치 콘솔에서 내 페이지의 색인을 대기열에 추가시키는 방식이 아닌, 구글 애드센스 홈페이지에서 애드센스에 내 티스토리 계정의 로그인 아이디와 비번을 공유해 주어, 즉시, 직접적으로 크롤링 액세스 권한을 부여하여 주는 것입니다.

디테일한 방법을 아래 링크에 공유드렸으니 확인해 보시길 바랍니다.

구글에 직접적으로 크롤링 액세스 요청하기

위의 방법으로 진행하시면, 당일에 개선이 필요하다는 유효성 검사를 통과하고, 대략 2일 정도 후부터는 코어 웹 바이탈의 항목이 개선되는 것을 확인 하 실 수 있습니다. 즉, 구글에서 유입이 늘어나게 되는 것이죠.

오늘은 상당히 어려운 부분에 대해서 말씀을 드렸는데요. 구글은 알면 알수록 미궁에 빠지는 녀석이라는 생각도 듭니다. 하지만 장기적으로 꾸준한 연금형 수익화를 이루기 위해서는 반드시 구글이란 녀석을 잡아야 합니다. 모두 힘들지만 서로 좋은 정보를 공유하며 윈윈 하는 블로거가 됩시다. 감사합니다.

[같이 보면 좋은 글! 해당 글을 클릭해 주세요. ✦‿✦ / ]

[애드센스] 코어 웹 바이탈(core web vitals) 확인 및 문제 해결하기

[구글 애드센스] "광고 크롤러 오류가 있으며, 이 때문에 수익 손실이 발생할 수 있습니다." 문제 해결 하기

티스토리 블로그 키워드 잡는 법(사이트 이용한 실전)

구글 애널리틱스 맞춤 보고서 사용하기(실전으로 분석과 앞으로의 방향 설정)

티스토리 블로그 글 네이버에 노출시키는 방법

[티스토리 애드센스] 첨부 사진의 용량 관리와 Alt텍스트 실제로 적용해 보기

[구글 노출] 티스토리 h태그(SEO)를 올바로 사용하고 있는지 점검해 보세요.

좋은 주제 선정하여 티스토리로 수익 내기(애드센스 승인부터 수익까지)

블랙키위, 키워드 조회 및 분석 사이트

[애드센스] 블로그의 내 글, 검색 포털 크롤링에 어필하기(구글 써치콘솔, 네이버 써치어드바이저, 빙 웹마스터 툴)

[애드센스] "사이트 다운" 관련 거절 시 확인 사항 및 해결 방법