brunch

You can make anything
by writing

C.S.Lewis

by Roy Apr 14. 2024

SEO 마케터라면 반드시 알아야 할 코어 웹 바이탈

#Technical SEO 

SEO를 담당하는 마케터는 주로 콘텐츠에 신경을 많이 쓰게 된다. 


콘텐츠 기획, 작성, 배포 등 SEO에 최적화된 콘텐츠에 집중하는 것이 마케터의 주요 일이기도 하다. 


하지만 SEO는 콘텐츠 외에도 중요한 부분이 있다. 바로 테크니컬 SEO다. 


웹사이트의 테크니컬 SEO가 잘 되고 있는지는 PageSpeed Insights에서 확인이 가능하다. 


PageSpeed Insights에 접속해서 테크니컬 SEO를 체크하고 싶은 웹사이트를 입력하면 분석이 가능하다. 

pagespeed insights


최상단에는 휴대전화와 데스크톱 두개의 탭이 나오는데 각 기기별 테크니컬 SEO를 구분해서 확인이 가능하다. 

pagespeed insights


가장 먼저 나오는 지표는 코어 웹 바이탈(Core Web Vitals)이다. 


구글은 사용자 경험(User Experience)을 아주 중요하게 생각하는데 이때 사용하는 지표가 코어 웹 바이탈(Core Web Vitals)이다. 이는 테크니컬 SEO에서도 중요한 요소이고 구글에서 웹사이트의 성능을 측정하는 핵심 지표다. 


웹 사이트 성능 관련된 부분은 개발적인 요소들이 많아 마케터가 이해하기는 쉽지 않다. 따라서 개념들을 깊게 이해할 필요는 없고 마케터 관점에서 알아야 할 부분만 이해하고 있다면 개발자와 커뮤니케이션하는데 도움이 될 것이다. 


이번 글에서는 테크니컬 SEO 중 구글에서 중요하게 모니터링하는 코어 웹 바이탈에 대해 알아보자. 


코어 웹 바이탈에는 대표적으로 3가지 지표가 있다.   



1. 웹페이지 로딩 속도를 나타내는 Largest Contentful Paint (LCP)


LCP란, 사용자가 처음 페이지로 이동한 시점을 기준으로 표시 영역에 표시되는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 말한다. 즉, 사용자가 웹페이지에 처음 접속할 때 웹페이지의 콘텐츠 중 가장 큰 이미지 또는 텍스트 블록을 화면에 보여주는데 걸리는 시간을 말한다. 


쉽게 말하면, 페이지가 로딩되는 속도라고 생각하면 된다. 웹페이지의 성능이 좋다는 것은 렌더링되는 시간이 적게 걸린다는 뜻이기 때문에 속도시간이 짧을수록 좋은 지표가 된다. 

LCP 지표

구글에서는 지표의 점수를 위와 같이 구분한다. LCP 값이 2.5초 이하는 Good, 2.5초 초과 4초 이하는 Needs Improvement, 그리고 4초 초과일 경우 Poor라고 평가한다. 

LCP 점수


위 그림에 따르면 현재 LCP 값은 2.6초로 개선이 필요한 상황이다. 그럼 어떻게 개선할 수 있을까?


PageSpeed Insights에서 조금 내려가면 성능 쪽에서 어떤 부분이 문제가 있는지 확인이 가능하다. 우측 상단에 "LCP"를 클릭하면 LCP와 관련된 진단만 확인이 가능하다. 

LCP 진단


구글 SEO를 위해 웹사이트 성능을 개선하고 싶다면 위와 같은 내용을 개발자에게 보여주면서 LCP를 개선한다면 테크니컬 SEO가 더 좋아질 것이다. 



2. 페이지 레이아웃이 갑자기 변경되는 현상을 말하는 Cumulative Layout Shift (CLS)


CLS란, 페이지 레이아웃이 예기치 않게 이동하는 현상을 말한다.


예를 들면, 텍스트가 갑자기 움직여 읽는 동안 원래 있던 위치를 잃거나 잘못된 링크나 버튼을 클릭하게 되는 현상을 말한다. 


아래 그림과 같이, 원래는 No, go back 버튼을 클릭하려고 했으나, 갑작스럽게 위 버튼이 내려오면서 잘못된 버튼을 클릭하게 되는 현상을 CLS라고 한다. 

CLS 예시


CLS 지표 


CLS 값이 0.1이하는 Good, 0.1 초과 및 0.25 이하는 Needs Improvement, 그리고 0.25 초과일 경우 Poor라고 평가한다. 

CLS 점수


위 그림에 따르면 현재 CLS 값은 0.01로 개선이 필요한 상황은 아니지만, 만약 점수가 좋지 않을 경우 어떻게 개선할 수 있을까?


PageSpeed Insights에서 조금 내려가면 성능 쪽에서 어떤 부분이 문제가 있는지 확인이 가능하다. 우측 상단에 "CLS"를 클릭하면 CLS와 관련된 진단만 확인이 가능하다. 

CLS 진단



3. 상호작용의 지연시간을 의미하는 Interaction to Next Paint (INP)


INP란, 사용자가 페이지를 방문했을 때 발생하는 상호작용 중 가장 긴 것을 선택하여 페이지의 전반적인 상호작용이 지연된 시간을 말한다. 


쉽게 말하면, 사용자가 페이지에서 상호작용(클릭, 탭 사용 등)할 때 걸리는 시간이라고 생각하면 된다. 예를 들면, 아래 그림에서 "What technology does gShoe use?"라는 질문을 클릭했을 때 얼마나 빨리 답을 보여주는가를 측정하는 지표라고 할 수 있다. 즉, 웹페이지에서 사용자가 어떤 액션(버튼 클릭)을 했을 때, 어떤 결과(내용 보여주기)를 얼마나 빠르게 하는지(상호작용)를 시간 단위로 측정하는 지표가 INP다. 

INP 예시


INP 지표


INP 값이 200ms 이하는 Good, 200ms 초과 및 500ms 이하는 Needs Improvement, 그리고 500ms 초과일 경우 Poor라고 평가한다. 

INP 점수


위 그림에 따르면 현재 INP 값은 611ms로 개선이 필요한 상황이다. 그럼 어떻게 개선할 수 있을까?


PageSpeed Insights에서 조금 내려가면 성능 쪽에서 어떤 부분이 문제가 있는지 확인이 가능하다. 우측 상단에 "TBT"를 클릭하면 INP와 관련된 진단만 확인이 가능하다. TBT는 Total Blocking Time의 약자인데 개발과 관련된 내용이라 자세한 내용은 생략한다. 

INP 진단


참고로, 원래 코어 웹 바이탈의 주요 지표로 FID(First Input Delay)를 사용했었으나, 2024년 3월 이후부터는 INP로 변경되었다.



안정적인 SEO를 위해 체크해야할 코어 웹 바이탈 


구글 SEO에 있어서 가장 중요한 것을 1개만 뽑으라면 사용자 검색의도에 맞는 콘텐츠라고 할 수 있다. 그러나 안정적인 SEO를 위해서는 테크니컬 SEO도 꾸준한 모니터링이 필요하다. 그 중에서도 웹사이트의 성능을 측정하는 코어 웹 바이탈을 잘 관리하는 것이 중요하다. 


그러나, 웹사이트의 성능에 관련된 부분은 웹 개발과 관련이 많아 마케터에게는 어려울 수 있다. 그렇기 때문에 개발적으로 깊게 내용을 알 필요는 없고, 개발자와 소통을 할 수 있을 정도만 알고 있으면 된다. 


코어 웹 바이탈이 무엇인지, 어떤 지표를 봐야하는지, 어떤 문제들이 있어서 개발자에게 어떻게 알려야 할지 정도만 알고 있어도 충분하다고 생각한다.

매거진의 이전글 꾸준한 트래픽을 위한 White Hat SEO 사용법
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari