Build with Gemini, our largest and most capable AI model. Get an API key.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

웹 바이탈 라이브러리를 사용하여 웹페이지의 코어 웹 바이탈 측정

1. 시작하기 전에

이 Codelab에서는 web-vitals 자바스크립트 라이브러리를 사용하여 웹페이지의 코어 웹 바이탈을 측정하는 방법을 알아봅니다.

코어 웹 바이탈을 측정하여 모바일 및 데스크톱 기기를 기준으로 분류된 페이지 로드의 75번째 백분위수에 해당하는 것이 좋습니다.

핵심 성능 보고서에는 다음 세 가지 측정항목이 포함되어 있으며, 이 측정항목은 모든 웹페이지에 적용되며 사용자 환경에 관한 중요한 정보를 제공합니다.

최대 콘텐츠 렌더링 시간 (LCP). 로드 성능을 측정하며, 페이지 로드가 시작된 후 2.5초 이내에 발생해야 합니다.
첫 입력 지연 (FID). 상호작용을 측정하며 100밀리초 이내에 발생해야 합니다.
누적 레이아웃 변경 (CLS) 시각적 안정성을 측정하며 0.1 사이여야 합니다.

기본 요건

실행할 작업

웹페이지에 web-vitals 라이브러리를 추가합니다.
Chrome 개발자 도구에서 웹페이지 및 핵심 성능 보고서를 측정합니다.
선택사항: 웹페이지의 핵심 성능 보고서를 Google 애널리틱스에 보고합니다.

필요한 항목

Sublime Text 또는 Visual Studio Code 등 원하는 텍스트 편집기
Chrome 기반 웹브라우저 (예: Chrome 또는 Microsoft Edge)는 Chromium 기반 웹브라우저가 필요한 이유에 대해 자세히 알아보려면 브라우저 지원을 참고하세요.

2. 웹페이지에 web-itals 라이브러리 추가

텍스트 편집기에서 web-vitals-test.html 파일을 만든 다음 파일에 이 HTML 코드를 입력합니다.

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

이 코드는 이 Codelab에 사용하는 웹페이지를 만듭니다.

HTML 코드에서 두 번째 <p> 요소 뒤에 있는 <body> 요소에서 다음 모듈 스크립트를 입력하고 파일을 저장합니다.

web-vitals-test.html

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>

이 모듈 스크립트는 콘텐츠 전송 네트워크에서 web-vitals 라이브러리를 로드합니다. 이제 파일이 다음 코드 스니펫과 같이 표시됩니다.

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>
</body>
</html>

모든 최신 브라우저는 모듈 스크립트를 지원합니다. 이 스크립트는 핵심 성능 보고서를 측정하는 데 필요한 API와 같은 새로운 API만 사용하는 코드에 적합합니다. 모듈 또는 Core Web Vitals API를 지원하지 않는 브라우저에서는 이 스크립트 로드를 시도하지 않습니다.

3. Chrome 개발자 도구에서 웹페이지 및 핵심 성능 보고서 측정

웹브라우저에서 저장된 파일을 엽니다.
웹페이지를 마우스 오른쪽 버튼으로 클릭한 다음 대화상자에서 검사를 클릭합니다.
Chrome 개발자 도구 창에서 콘솔 탭을 클릭한 후 콘솔 설정 &gt, 로그 보존을 선택합니다. 이 설정을 사용하면 웹페이지를 새로고침할 때 로그가 지속됩니다.

네트워크 탭을 클릭한 다음 제한 드롭다운 메뉴의 확장 화살표를 클릭하고 느린 3G를 선택합니다. 이 설정은 느린 네트워크 연결을 시뮬레이션합니다.

제한 드롭다운 메뉴에서 느린 3G 설정이 선택된 네트워크 탭

콘솔 탭으로 다시 이동한 다음 웹페이지의 아무 곳이나 클릭합니다. LCP 및 FID 측정항목은 콘솔 탭에 출력됩니다.

LCP 및 FID 측정항목이 출력된 Console 탭

웹페이지를 새로고침합니다. CLS 측정항목은 콘솔 탭에 출력됩니다.

CLS 측정항목이 출력된 콘솔 탭

네트워크 탭으로 돌아가서 제한 드롭다운 메뉴의 확장 화살표를 클릭하고 Fast 3G를 선택합니다. 이 설정은 빠른 네트워크 연결을 시뮬레이션합니다.
콘솔 탭으로 돌아가서 웹페이지의 아무 곳이나 클릭합니다.LCP 및 FID 측정항목은 콘솔 탭에 다시 인쇄되지만 이전보다 개선되었습니다.

LCP 및 FID 측정항목이 표시된 Console 탭은 다시 인쇄됩니다.

웹페이지를 새로고침합니다. CLS 측정항목은 콘솔 탭에 다시 인쇄되지만 이전보다 개선되었습니다.

CLS 측정항목 이후의 Console 탭이 다시 인쇄됩니다.

4. 선택사항: 웹페이지의 핵심 성능 보고서를 Google 애널리틱스에 보고

모듈 스크립트의 import 문 뒤에 있는 web-vitals-test.html 파일에 이 sendToGoogleAnalytics() 함수를 입력한 후 파일을 저장합니다.

web-vitals-test.html

function sendToGoogleAnalytics({name, delta, id}) {
  // Assumes the global `gtag()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/gtagjs
  gtag('event', name, {
    event_category: 'Web Vitals',
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
    // The `id` value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    event_label: id,
    // Use a non-interaction event to avoid affecting bounce rate.
    non_interaction: true,
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);

이 코드는 코어 웹 바이탈을 Google 애널리틱스로 전송하며, 이를 통해 상위 이벤트 보고서에서 확인할 수 있습니다.

Google 애널리틱스의 상위 이벤트 보고서

이제 파일이 다음 코드 스니펫과 같이 표시됩니다.

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  function sendToGoogleAnalytics({name, delta, id}) {
    // Assumes the global `gtag()` function exists, see:
    // https://developers.google.com/analytics/devguides/collection/gtagjs
    gtag('event', name, {
      event_category: 'Web Vitals',
      // Google Analytics metrics must be integers, so the value is rounded.
      // For CLS the value is first multiplied by 1000 for greater precision
      // (note: increase the multiplier for greater precision if needed).
      value: Math.round(name === 'CLS' ? delta * 1000 : delta),
      // The `id` value will be unique to the current page load. When sending
      // multiple values from the same page (e.g. for CLS), Google Analytics can
      // compute a total by grouping on this ID (note: requires `eventLabel` to
      // be a dimension in your report).
      event_label: id,
      // Use a non-interaction event to avoid affecting bounce rate.
      non_interaction: true,
    });
  }

  getCLS(sendToGoogleAnalytics);
  getFID(sendToGoogleAnalytics);
  getLCP(sendToGoogleAnalytics);
</script>
</body>
</html>

5. 축하합니다

수고하셨습니다. web-vitals 라이브러리를 사용하여 웹페이지의 코어 웹 바이탈을 측정하고 보고하는 방법을 알아봤습니다.

자세히 알아보기

웹 바이탈