“구글은 어떻게 페이지의 품질을 평가할까?” SEO 전략을 세우는 데 중요한 구글의 품질 평가 요소 중 한 축을 담당하는 코어 웹 바이탈에 대해 알아본다.
■ 사용자 경험을 측정하는 척도인 코어 웹 바이탈(Core Web Vital)
구글은 사용자 경험을 향상하고자 노력한다. 이를 수치로 측정하기 위해 2021냔 5월에 발표한 개념이 바로 코어 웹 바이탈이다. 웹 바이탈은 크게 3가지 요소로 나뉜다. 바로 로딩 시간(loading performance), 상호작용(interactivity), 시각적 안정성(visual stability)이다. 아래 이미지에 측정 항목과 척도가 요약되어 있다. 하나씩 알아보도록 하자.
■ 콘텐츠가 포함된 최대 페인트(LCP, Largest Contentful Pain)
로딩 성능을 측정하는 LCP는 사용자가 페이지에 접속했을 때(정확히 말하자면 URL을 요청한 시점부터) 페이지 내에서 가장 큰 콘텐츠 요소를 렌더링하는 데 걸린 시간을 의미한다. Largest Contentful, 즉 가장 큰 요소는 보통 이미지나 동영상이다.
페이지를 누르자마자 로딩이 오래 걸리면 , 기다리지 않고 그냥 꺼버린 경험은 누구에게나 있을 것이다. 이전에도 load, DOMCOntentLoaded와 같은 척도가 있었지만 이는 사용자가 화면에서 보는 것과 같지 않을 수 있었기 때문에 LCP가 조금 더 정확하게 이를 측정하는 방법이라고 한다. 구글은 LCP를 2.5초 이내를 권장한다. LCP는 이렇게 사용자 경험에도 중요하고, 검색 순위에도 중요해졌다.
LCP를 확인할 때는 서버 응답 시간이 느리지 않은지, Java나 CSS가 렌더링을 블록하진 않는지, 리소스(특히 이미지와 동영상) 로딩이 느린지, 클라이언트 쪽 렌더링이 어떤지 확인해야 한다. LCP가 고려하는 요소는 <img> 요소, <svg> 내부의 <image>, <video>, url() 함수를 통해 로드된 이미지가 있는 요소, 텍스트 하위 요소를 포함하는 블록 수준이다.
LCP가 계산되는 자세한 사항은 다음 링크를 참조하길 바란다. https://web.dev/lcp/
■ 첫 입력 지연(FID, First Input Delay)
사용자가 페이지의 링크를 클릭하거나 버튼을 클릭하는 등의 상호작용을 처음했을 때부터 브라우저가 이에 반응할 때까지의 시간을 의미한다. 구글은 FID 200밀리초 이내를 권장한다.
그러나 블로그처럼 특별한 JavaScript 이벤트가 없는 경우에는 어떻게 될까? 따라서 단순히 FID의 숫자를 보는 것은 부적절하다. 모든 사용자가 페이지와 상호작용하지 않기 때문에 사용자마다 FID 값이 다를 수 있고, 모든 웹사이트가 상호작용 요소를 넣지 않기 때문이다.
따라서 FID를 분석할 때는 분포를 위주로 살펴봐야 한다. 코어 웹 바이탈에서는 보통 백분위를 볼 때 75%를 기준하지만 FID에서는 95~99번째 백분위를 확인하는 것을 추천한다.
FID에 영향을 미치는 것은 긴 태스크, JavaScript의 실행 시간, JavaScript의 번들, 렌더 블로킹 등이 있다. 관련해서 자세한 내용은 다음 링크를 참조하길 바란다. https://web.dev/fid/
■ 누적 레이아웃 변경(CLS, Cumulative Layout Shift)
CLS는 어떤 콘텐츠를 읽다가 링크를 클릭하려고 한 순간, 갑자기 광고나 다른 요소가 나오며 원하지 않은 요소를 클릭하는 속임수를 방지하기 위한 척도다. 구글은 0.1 미만을 권장한다.
레이아웃에 변화를 주는 광고나 쿠키 배너, 크기가 지정되지 않은 이미지, 동적으로 삽입되는 콘텐츠, FOIT(Flash of invisible text) 방식의 웹 폰트나 FOUT(Flash of unstyled text) 방식의 웹 폰트 사용을 자제해야 한다. CLS를 개선하기 위해서는 이미지와 동영상에 size 속성을 부여하고, 기존 콘텐츠 위에 콘텐츠를 삽입하지 말아야 한다. 자세한 사항은 다음 링크에 있다. https://web.dev/cls/
■ 코어 웹 바이탈 측정 도구
웹 바이탈을 측정할 수 있는 도구는 많다. 다음의 도구를 참고하면 된다.
