티스토리 뷰

웹기술

[CWV] Core Web Vitals 특징과 간단한 예제

제로빈 2024. 11. 20. 10:57

코어 웹 바이탈(Core Web Vitals)은 웹사이트의 사용자 경험을 측정하는 핵심 지표로, LCP, FID, CLS와 같은 지표를 측정하고 화면에 표시할 수 있습니다. CWV의 특징과 간단한 예제를 소개하겠습니다.

1. CWV 특징

Core Web Vitals는 다음의 세 가지 주요 지표를 포함합니다.

  • LCP (Largest Contentful Paint):
    • 페이지에서 가장 큰 콘텐츠가 로드되는 시간입니다.
    • 페이지 로딩의 '시각적' 측면을 측정하며, 페이지가 로드되는 동안 가장 중요한 콘텐츠가 사용자에게 보이는 속도를 나타냅니다.
    • 좋은 점수: 2.5초 이하
    • 주요 목표: 페이지가 빠르게 로드되어 사용자가 빠르게 주요 콘텐츠를 볼 수 있도록 하는 것입니다.
  • FID (First Input Delay):
    • 사용자가 페이지에서 처음 상호작용을 시작할 때, 그 상호작용이 브라우저에서 반응하기까지 걸리는 시간입니다.
    • 인터랙티브성 측정으로, 사용자가 클릭하거나 스크롤할 때 즉각적인 반응을 제공하는 것이 중요합니다.
    • 좋은 점수: 100ms 이하
    • 주요 목표: 페이지가 사용자의 입력에 즉각적으로 반응할 수 있도록 최적화하는 것입니다.
  • CLS (Cumulative Layout Shift):
    • 페이지 로딩 중에 콘텐츠가 예상치 않게 이동한 정도를 측정합니다. 이는 레이아웃이 갑자기 변할 때 발생하며, 사용자 경험을 방해할 수 있습니다.
    • 좋은 점수: 0.1 이하
    • 주요 목표: 페이지가 로딩 중에 콘텐츠의 위치가 갑자기 바뀌지 않도록 하는 것입니다.

 

2. 예제

구글의 web-vitals 라이브러리를 사용하였습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Core Web Vitals Checker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .vital {
      margin: 10px 0;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background: #f9f9f9;
      display: flex;
      justify-content: space-between;
    }
    .vital span {
      font-weight: bold;
    }
  </style>
  <!-- 최신 web-vitals 라이브러리 로드 -->
  <script src="https://unpkg.com/web-vitals@3/dist/web-vitals.iife.js"></script>
</head>
<body>
  <h1>Core Web Vitals Checker</h1>
  <div id="vitals">
    <div class="vital" id="lcp">
      <span>LCP:</span> <span id="lcp-value">Measuring...</span>
    </div>
    <div class="vital" id="fid">
      <span>FID:</span> <span id="fid-value">Measuring...</span>
    </div>
    <div class="vital" id="cls">
      <span>CLS:</span> <span id="cls-value">Measuring...</span>
    </div>
  </div>

  <script>
    // Core Web Vitals 측정
    webVitals.getLCP((metric) => {
      document.getElementById('lcp-value').textContent = metric.value.toFixed(2) + ' ms';
    });

    webVitals.getFID((metric) => {
      document.getElementById('fid-value').textContent = metric.value.toFixed(2) + ' ms';
    });

    webVitals.getCLS((metric) => {
      document.getElementById('cls-value').textContent = metric.value.toFixed(3);
    });
  </script>
</body>
</html>
  • HTML 구조
    • h1 태그로 "Core Web Vitals Checker"라는 제목을 표시합니다.
    • 각 지표(LCP, FID, CLS)에 대해 div를 만들어 측정 값을 표시할 자리를 준비합니다. 각 항목은 span 요소로 표시됩니다.
  • Web Vitals 라이브러리
    • web-vitals 라이브러리를 로드합니다. 이 라이브러리는 Core Web Vitals 지표를 쉽게 측정할 수 있는 API를 제공합니다.
  • 지표 측정 및 표시
    • webVitals.getLCP()와 webVitals.getFID(), webVitals.getCLS()를 사용하여 각각의 지표 값을 측정합니다.
    • 측정된 값은 metric.value에서 가져와 toFixed()로 소수점을 정리하고, 페이지의 해당 위치에 값을 업데이트합니다.
    • 예를 들어, LCP 값은 밀리초 단위로 표시되며 FID와 CLS도 각기 다른 방식으로 표시됩니다.

 

3. 실행

  • Core Web Vitals는 사용자 경험을 측정하는 중요한 지표들입니다. 이 값들이 우수한 성과를 나타내면, 페이지가 빠르고 상호작용이 원활하며 안정적인 사용자 경험을 제공한다고 할 수 있습니다.

 

감사합니다.

'웹기술' 카테고리의 다른 글

[브라우저] 크롬 브라우저의 JIT 컴파일러  (2) 2025.02.07
[다크모드] 다크 모드 소개 및 간단한 예제  (0) 2024.11.25
[시네마틱 스크롤링] Cinematic Scrolling 특징과 간단한 예제  (2) 2024.11.15
[JAM 스택] JAM Stack 특징과 간단한 예제  (2) 2024.11.14
[TFJS] TensorFlowJS 특징과 간단한 예제  (5) 2024.11.13
최근에 올라온 글
Total
Today
Yesterday