코어 웹 바이탈(CWV)이란?

코어 웹 바이탈(CWV)이란?

핵심 웹 바이탈(CWV)은 세 가지 웹 성능 지표의 집합입니다. Google 검색 엔진에서는 이 세 가지 지표를 측정하여 검색 결과에 표시할 페이지를 결정하는 데 반영합니다. 즉, 검색 엔진 최적화(SEO) 실무자는 해당 페이지의 순위를 높이기 위한 전체적인 전략의 일환으로 웹 페이지의 핵심 웹 바이탈을 최적화해야 합니다.

CWV는 다음과 같습니다.

1. 로딩 속도를 측정하는 최대로 의미 있는 페인트(LCP)
2. 페이지 상호 작용성을 측정하는 첫 번째 입력 지연(FID)
3. 시각적 안정성을 측정하는 누적 레이아웃 변경(CLS)

Google 페이지 경험 업데이트란?

페이지 로딩 시간은 오랫동안 SEO의 중요한 부분이었지만, Google에서는 CWV가 2021년 중반에 순위 알고리즘의 일부가 될 것이라고 2020년에 발표했습니다.이를 Google 페이지 경험 업데이트라고 합니다.

Google은 발표에서 페이지의 검색 순위를 결정하는 데 도움이 되는 페이지 경험 신호에 CWV가 반영될 것이라고 밝혔습니다. 기타 페이지 경험 요소로는 HTTPS 보안, 모바일 친화성, 방해가 되는 삽입 광고(팝업 등)의 유무 등이 있습니다. 이 업데이트의 목표는 긍정적인 사용자 경험을 제공하는 웹 페이지에 보상을 제공하는 것이었습니다.

핵심 웹 바이탈은 SEO에 어떤 영향을 미칠까요?

모든 검색 엔진은 웹 크롤러 또는 웹 스파이더라고 하는 봇을 사용하여 웹 사이트를 분석합니다.이러한 봇은 각 웹 사이트의 콘텐츠가 무엇인지 판단하고 검색 쿼리에 대한 응답으로 해당 웹 사이트가 표시되어야 하는 시기를 결정하는 데 도움을 줍니다.웹 성능은 Google 봇이 확인하는 웹 사이트의 측면 중 하나입니다.

Google은 순위 알고리즘을 대부분 비밀에 부치고 있으므로 LCP, FID, CLS가 SEO에 얼마나 영향을 미치는지는 정확히 알 수 없습니다. 하지만 CWV는 SEO에 상당한 영향을 미칩니다. 많은 업계 관계자들이 웹 사이트의 CWV 변경에 따른 검색 순위의 향상 또는 하락을 보여주는 사례 연구를 수행했습니다.

이는 실제로는 어떻게 작동할까요?Google에서 검색 쿼리 "ARPANET이란?"에 대한 검색 결과 상단에 웹 사이트 A와 웹 사이트 B를 표시할지 여부를 선택해야 한다고 가정해 보겠습니다. 웹 사이트 A와 웹 사이트 B는 모두 인터넷 역사에 대한 사실을 제공하는 것으로 높은 평판을 얻고 있으며, ARPANET이라는 주제에 대해 비슷하게 상세한 정보를 제공합니다.다른 모든 조건이 동일하다면, 웹 사이트 A가 웹 사이트 B보다 로딩 속도가 빠르고 응답 속도가 빠르며 로딩 시간이 짧다면, 두 웹 사이트가 비슷한 수준의 정보를 제공하더라도 Google의 알고리즘은 웹 사이트 A를 검색 결과 상단에 표시하기로 결정할 수 있습니다.

(검색 엔진 순위는 이 예시에서 설명하는 것보다 더 복잡하며 웹 사이트가 검색에 표시되는 위치에 영향을 미치는 요소는 수십 가지에 이릅니다.)

Google에서 웹 성능을 순위 결정에 반영하는 이유는?

Google과 같은 검색 엔진은 검색자에게 가장 관련성 높은 정보를 최대한 빨리 제공하기를 원합니다. 로딩 시간이 지연되면 사용자가 불만을 느끼는 반면, 페이지 로딩이 빠르면 사용자가 다시 방문할 확률이 높아집니다. 현재 영어권 검색 시장의 대부분은 Google에서 차지하고 있지만, 사용자 환경이 좋지 않으면 검색자가 정보를 얻기 위해 다른 출처로 눈을 돌릴 수 있습니다.

비슷한 이유로 DuckDuckGo, Bing 등 다른 검색 엔진도 웹 성능을 고려할 수 있지만, Google과 마찬가지로 페이지 순위 알고리즘이 어떻게 작동하는지는 확실하게 알려져 있지 않습니다.

최대로 의미 있는 페인트(LCP)란?

최대로 의미 있는 페인트는 일반적으로 이미지 또는 텍스트 블록과 같은 웹 페이지의 가장 큰 부분을 로드하는 데 걸리는 시간을 측정합니다.

Google의 가이드라인에서는 2.5초 미만인 경우 LCP 측정값을 '양호'로 분류합니다. 하지만 빠르면 빠를수록 좋습니다.

LCP는 전체 웹 페이지를 로드하는 데 걸리는 시간을 측정하지는 않지만, 웹 페이지가 얼마나 빠르게 로드되고 있는지를 나타내는 좋은 벤치마크를 제공합니다. 일반적으로 웹 페이지에서 가장 큰 요소는 메인 콘텐츠이므로 페이지가 로드되는 시간은 사용자가 페이지가 로드되었다고 인식하는 시간과 잘 맞물려 있는 경우가 많습니다.

이전 버전의 LCP 지표는 페이지의 주요 콘텐츠가 표시되는 시점을 측정하는 첫 번째 의미 있는 페인트(FMP)입니다. Google에서는 이 지표가 신뢰할 수 없다는 사실을 발견하고 일부 보고 도구에서 해당 지표를 삭제했습니다.

첫 입력 지연(FID)이란?

첫 번째 입력 지연(FID)은 사용자가 웹 페이지와 처음으로 상호 작용을 시도한 후 웹 페이지가 응답할 때까지의 시간을 측정한 값입니다. 즉, FID는 사용자가 화면을 처음 클릭하고 무언가를 실행할 수 있는 속도를 정량화합니다. Google의 가이드라인에 따르면 '양호한' FID는 100밀리초 이하입니다.

FID의 예로, Alan이 "구두 닦는 법"이라는 제목의 웹 페이지를 방문한다고 가정해 보겠습니다. 그는 구두약 사진 모음을 보고 오른쪽 화살표를 클릭하여 다음 사진으로 이동합니다. FID는 화살표를 클릭한 시점부터 다음 사진이 로드되기 시작할 때까지 경과한 시간입니다.

FID는 요청된 이벤트가 실제로 발생하는 데 걸리는 시간, 즉 Alan의 브라우저가 다음 사진 로딩을 완료하는 데 걸리는 시간을 측정하지 않습니다. FID는 요청 시점과 요청이 이행되기 시작하는 시점 사이의 시간만 측정합니다.

FID는 "현장 지표", 즉 가상이나 "실험실"이 아닌 실제 사용자를 관찰하여 측정한 수치라는 점에 유의하세요.

일부 "실험실 지표"로는 총 차단 시간(TBT) 및 인터랙티브 시간(TTI)이 있습니다. TBT는 첫 번째 의미 있는 페인트(FCP)와 TTI 사이의 경과 시간을 측정합니다. FCP는 로딩이 시작되는 시점과 사용자 화면에 항목이 로드되는 시점 사이의 시간을 측정합니다. 이름에서 알 수 있듯이 TTI는 항목이 로드된 것으로 표시되는 데 걸리는 시간과 사용자가 실제로 해당 항목과 상호 작용할 수 있는 시점 사이의 시간을 측정합니다.

누적 레이아웃 이동(CLS)이란?

CLS는 웹 페이지가 로드될 때 "주변에서 얼마나 많이 이동하는지" 측정합니다. 특히 페이지 레이아웃에서 가장 큰 "버스트" 변화를 측정합니다. Google의 가이드라인에 따르면 '양호한' CLS 측정값은 0.1 이하입니다.

레이아웃 이동은 페이지 콘텐츠가 원래 표시된 위치에서 위나 아래나 다른 방향으로 이동하는 것을 말합니다. 이 메트릭의 맥락에서 버스트는 서로 1초 이내에 발생하는 레이아웃 이동 그룹을 의미합니다. 버스트는 최대 5초까지 가능하며 레이아웃 이동 횟수에 제한 없이 포함될 수 있습니다.

Alan이 "구두 닦는 법" 페이지를 로드한 후 오른쪽 화살표를 클릭하여 사진 모음에서 다음 이미지를 확인하려고 한다고 가정해 보겠습니다. 그러나 이미지 모음이 갑자기 페이지 아래로 이동하고 Alan은 이미지 모음 위에 로드되는 텍스트를 클릭하게 됩니다. 웹 페이지가 모두 동시에 로드되지 않아 웹 페이지가 이동했고, Alan은 혼란스러워합니다.

이러한 웹 페이지는 CLS 점수가 낮을 가능성이 큽니다. 사진 모음이 수십 또는 수백 픽셀씩 아래로 이동하면서 꽤 많이 움직였습니다.

CLS 측정 방법

Google에서는 다음 공식을 사용하여 CLS 점수를 계산합니다.

영향 비율 * 거리 비율 = 레이아웃 이동 점수

• 영향 비율은 레이아웃 이동이 발생할 때 변경되는 화면의 백분율입니다.
• 거리 비율은 요소가 화면에서 얼마나 멀리 이동하는지 측정하며, 화면의 백분율로도 표시됩니다.

400픽셀 높이의 화면에 웹 페이지가 로드된 후 새 요소가 로드될 때 해당 픽셀 중 200픽셀이 이동하는 경우 영향 비율은 200/400, 즉 50%입니다. 새 요소가 다른 요소를 50픽셀 아래로 이동한 경우 거리 비율은 50/400, 즉 12.5%입니다.

레이아웃 이동 점수를 계산하려면 이 두 백분율을 소수점으로 작성한 다음 함께 곱합니다.

0.50 * 0.125 = 0.0625

웹 페이지의 이동량이 가장 많은 경우 웹 페이지의 CLS 점수는 0.0625입니다.

웹 페이지가 로드될 때 전혀 이동하지 않는 것이 가장 이상적이지만, 이 정도면 괜찮은 점수입니다. 전문가들은 웹 페이지의 CLS 점수가 0.10 이하일 것을 권장합니다.

핵심 웹 바이탈 측정 방법

CWV를 확인하는 데 사용할 수 있는 도구는 여러 가지가 있습니다. 다음은 모두 Google에서 직접 제공하는 제품입니다.

• Chrome UX 보고서(CrUX)는 Chrome 사용자가 보고한 현장 데이터를 제공하여 사이트 소유자에게 실제 사용자가 웹 사이트를 어떻게 경험하는지에 대한 데이터를 제공합니다.
• Google Lighthouse는 CWV에 대한 실험실 지표를 제공하는 무료 도구입니다.이 제품은 성능, SEO, 접근성 등을 개선하기 위한 실행 가능한 인사이트를 제공합니다.
• Google PageSpeed Insights는 CrUX와 Lighthouse의 기능을 결합하여 CWV 및 기타 웹 바이탈에 대한 현장 및 실험실 데이터를 모두 제공합니다.사용자는 PageSpeed Insights를 사용하여 소유 여부와 관계없이 웹 사이트의 성능을 확인할 수 있습니다.다음은 PageSpeed Insights 보고서의 예시입니다.
• Google Search Console은 부분적으로 CrUX 필드 데이터를 기반으로 하며 URL 또는 URL 그룹별로 CWV 성능 데이터를 제공합니다.

핵심 웹 바이탈을 개선하는 방법

LCP를 개선하는 방법

• 콘텐츠 전송 네트워크(CDN) 사용: CDN은 전 세계 곳곳에 콘텐츠를 캐시하여 콘텐츠가 사용자에게 더 빨리 도달하도록 합니다.
• 이미지 최적화: 이미지는 페이지에서 가장 큰 요소인 경우가 많습니다.이미지 파일 크기를 줄이면 이미지 로드 시간을 단축하는 데 도움이 될 수 있습니다.
• 지연 로딩 구현: 지연 로딩에서는 웹 사이트 리소스가 사용자가 필요로 할 때만 로드됩니다.이 기능은 웹 사이트 로딩을 어느 정도 효율적으로 만들어 주지만, 연구 결과에 따르면 이 기능을 과도하게 사용하면 LCP가 낮아진다고 합니다.이러한 이유로 Google에서는 지연 로딩 이미지를 '접는 부분 아래', 즉 사용자가 스크롤해야 볼 수 있는 웹 페이지 부분으로 제한할 것을 권장합니다.

FID 개선 방법

• JavaScript 함수 크기 줄이기: 코드가 많은 동적 웹 페이지는 브라우저에서 코드를 실행하기 전에 모든 코드가 로드될 때까지 기다려야 하므로 입력 지연이 발생할 수 있습니다.JavaScript 최소화를 사용하면 이 프로세스를 더 빠르게 진행할 수 있습니다.
• 정적 웹 페이지 구축: 정적 HTML 웹 페이지가 동적 페이지보다 훨씬 빠르게 로드되며, 특히 CDN을 통해 배포할 경우 더욱 그렇습니다.정적 사이트 생성기 또는 정적 콘텐츠를 강조하는 개발 철학인 Jamstack에 대해 자세히 알아보세요.
• 불필요한 타사 도구와 스크립트를 제거합니다.
웹 사이트에 추가 도구를 로드하면 성능이 느려질 수도 있습니다. 웹 사이트에서 타사 도구의 양을 줄이면 일반적으로 FID 및 웹 사이트 속도를 향상시킬 수 있습니다.

CLS 개선 방법

• 타사 페이지 요소 최소화: 페이지의 타사 요소는 페이지의 나머지 부분과 비교하여 별도의 위치에서 로드됩니다.이 때문에 페이지가 로드될 때 페이지의 레이아웃이 변경되어 약간 다른 시간에 로드될 수 있습니다.이러한 타사 요소의 사용을 최소화하면 결과적으로 레이아웃 이동 횟수가 줄어듭니다.
• 임베디드 콘텐츠를 위한 공간 예약: 광고와 같은 많은 타사 요소는 웹 사이트의 기능이나 비즈니스 모델에 필수적이며 제거할 수 없습니다.개발자는 브라우저가 실제 요소를 가져오기 전에 이러한 요소가 로드될 수 있도록 웹 페이지에 공간을 예약할 수 있습니다.
• 이미지가 최적의 크기로 로드되는지 확인: 이것은 일반적인 이미지 최적화와는 약간 다른 프로세스입니다.데스크톱 컴퓨터, 태블릿, 스마트폰은 모두 화면 크기가 다르므로 조금씩 다른 크기의 이미지가 필요합니다.브라우저가 데스크톱에 최적화된 큰 이미지를 먼저 로드한 다음 사용 중인 장치가 스마트폰이므로 모바일에 최적화된 이미지를 가져와야 하는 경우, 크기가 다른 이미지가 로드될 때 페이지의 콘텐츠가 이리저리 이동할 수 있습니다.
• 이미지 및 비디오의 높이와 너비 포함: 높이 및 너비 속성은 이미지 또는 비디오가 로드되기 전에 해당 공간을 예약할 수 있도록 브라우저에 이미지의 크기를 알려줍니다.우리의 HTML5 동영상 문서에서 동영상의 경우에 이를 어떻게 수행하는지 자세한 내용을 확인할 수 있습니다.
• CSS 가로 세로 비율 상자 사용: 개발자가 가로 세로 비율을 사용하여 페이지 요소의 공간을 보존하는 데 사용할 수 있는 여러 CSS 기법이 있습니다(여기에서 자세히 알아보기).

다른 어떤 성능 지표가 중요할까요?

CWV는 Google에서 SEO 실무자에게 우선순위를 두어야 한다고 말한 지표이지만, 웹 바이탈만 존재하는 것은 아닙니다.첫 번째 의미 있는 페인트(FCP), DOMContentLoaded(DCL), 인터랙티브 시간(TTI), 첫 번째 바이트 시간(TTFB)은 SEO에 동일한 정도로 영향을 미치지는 않지만, 개발자가 CWV에 영향을 미치는 문제를 식별하는 데 도움이 될 수 있습니다.

(TTFB는 그 자체로는 특별히 유용한 메트릭이 아닙니다. 그러나 개발자가 수정해야 하는 추가 문제를 나타낼 수 있습니다.)

Cloudflare가 CWV를 개선하는 데 도움이 되는 방법

Cloudflare에서는 CWV를 높이는 데 도움이 되는 다양한 서비스를 제공합니다.

• Cloudflare의 콘텐츠 전송 네트워크(CDN)는 125여 개 국가 335개 이상의 도시에 걸쳐 있는 전역 네트워크에서 정적 및 동적 콘텐츠를 캐시합니다. 이를 통해 웹 사이트 로딩 속도가 빨라지는데, 이는 세 가지 CWV 모두 이점을 제공합니다.
• Cloudflare Images는 이미지를 압축하고 웹 사이트 로딩 속도를 더욱 향상할 수 있는 크기 조정 기능을 제공하며, 특히 LCP의 경우 더욱 그렇습니다.
• Cloudflare Zaraz는 클라우드에서 타사 리소스를 로드하고 브라우저에서 벗어나 FID, CLS 등의 메트릭을 개선합니다.