Web Vitals를 개선하는 방법

eunbi·2025년 2월 2일

CS 총정리

목록 보기

2/22

Web Vitals는 웹사이트의 성능을 평가하는 주요 지표로, 사용자 경험(UX)을 향상시키기 위해 반드시 고려해야 한다.
웹페이지가 얼마나 빠르게 로딩되고, 반응성이 좋은지, 레이아웃이 안정적인지를 측정한다.

Google은 3가지 핵심 Web Vitals 지표를 제공하며, 이를 최적화하는 것이 중요하다.

1️⃣ Web Vitals 주요 지표

지표	설명	목표 기준
LCP (Largest Contentful Paint)	페이지의 가장 큰 콘텐츠가 표시되는 시간	2.5초 이하
FID (First Input Delay)	사용자의 첫 상호작용에 대한 응답 시간	100ms 이하
CLS (Cumulative Layout Shift)	화면 요소가 갑자기 이동하는 정도	0.1 이하

2️⃣ LCP (Largest Contentful Paint) 최적화

LCP는 페이지에서 가장 큰 요소(이미지, 텍스트 블록 등)가 렌더링되는 시간을 의미한다.
사용자가 콘텐츠를 빠르게 볼 수 있도록 최적화해야 한다.

✅ LCP 개선 방법

이미지 최적화
- WebP, AVIF와 같은 고효율 이미지 포맷 사용 (JPEG, PNG보다 용량이 작음)
- 이미지 압축 (ImageOptim, Squoosh 활용)
- Next.js 사용 시 <Image /> 컴포넌트를 활용해 자동 최적화
중요 리소스의 Preload
- 주요 이미지나 폰트 등을 미리 로드하여 LCP 요소가 빠르게 표시되도록 한다.
```
<link rel="preload" as="image" href="/hero-image.webp" />
```
서버 응답 시간 개선 (TTFB 최적화)
- SSR(Server Side Rendering) 또는 SSG(Static Site Generation) 적용
- CDN(Content Delivery Network) 활용하여 정적 리소스 빠르게 제공
- API 응답 속도 개선 (DB 최적화, Redis 캐싱 등)
렌더링 차단 리소스 최소화
- CSS 파일을 압축(minify) 및 병합
- JavaScript 코드의 불필요한 블로킹 제거 (defer, async 활용)

📌 적용 예시 (Next.js)

import Image from "next/image";

export default function Hero() {
  return <Image src="/hero-image.webp" width={1200} height={600} priority />;
}

🔹 priority 속성을 추가하면 중요한 이미지를 미리 로드하여 LCP를 개선할 수 있다.

3️⃣ FID (First Input Delay) 최적화

FID는 사용자가 클릭, 스크롤, 입력 등의 첫 인터랙션을 했을 때 브라우저가 응답하는 속도를 측정한다.
JavaScript 실행이 너무 많으면 브라우저가 이벤트를 처리하지 못해 지연될 수 있다.

✅ FID 개선 방법

JavaScript 코드 분할 (Code Splitting)
- Next.js에서는 React.lazy() 또는 import()를 활용하여 필요한 코드만 로드하도록 한다.
```
import dynamic from "next/dynamic";
const HeavyComponent = dynamic(() => import("./HeavyComponent"), { ssr: false });
```
불필요한 JavaScript 제거 (Tree Shaking)
- 사용되지 않는 JS 코드가 포함되지 않도록 Webpack의 Tree Shaking 기능 활용
긴 작업(Task) 최소화
- requestIdleCallback을 활용하여 백그라운드에서 실행할 수 있는 작업을 지연 처리
```
requestIdleCallback(() => {
  expensiveCalculation();
});
```
Web Worker 활용
- 무거운 연산을 별도의 Worker Thread에서 실행하여 메인 스레드가 막히지 않도록 한다.
```
const worker = new Worker("worker.js");
worker.postMessage("start");
```

📌 적용 예시 (Next.js)

export default function Page() {
  return (
    <button onClick={() => import("./analytics").then((mod) => mod.trackEvent())}>
      클릭 이벤트
    </button>
  );
}

🔹 사용자가 버튼을 클릭할 때만 analytics 모듈을 로드하여 FID 최적화

4️⃣ CLS (Cumulative Layout Shift) 최적화

CLS는 페이지 내의 요소가 예상치 못하게 이동하는 정도를 나타낸다.
예를 들어, 이미지 로딩이 느려서 페이지가 갑자기 밀리는 경우가 있다.

✅ CLS 개선 방법

이미지와 광고 요소의 크기 미리 지정
- 이미지나 광고 배너를 로드할 때 크기를 미리 지정하면 레이아웃이 갑작스럽게 변경되지 않는다.
```
<Image src="/example.jpg" width={600} height={400} />
```
동적 콘텐츠 영역 사전 확보
- 예를 들어, 댓글이 로딩될 때 높이를 미리 지정하여 레이아웃 변화를 방지한다.
```
<div style={{ minHeight: "200px" }}>{comments}</div>
```
적절한 font loading 전략 사용
- font-display: swap; 속성을 추가하여 웹폰트가 로드되지 않아도 기본 폰트를 먼저 표시하도록 한다.
```
@font-face {
  font-family: "CustomFont";
  src: url("/fonts/CustomFont.woff2") format("woff2");
  font-display: swap;
}
```
애니메이션을 활용한 자연스러운 전환
- opacity 또는 transform을 활용하여 콘텐츠가 부드럽게 나타나도록 한다.
```
<div style={{ opacity: 0, transition: "opacity 0.3s" }}></div>
```

5️⃣ Web Vitals 최적화 체크리스트

지표	최적화 방법
LCP	✅ 이미지 최적화 (WebP, AVIF) ✅ 중요 리소스 Preload ✅ 서버 응답 속도 개선 (SSR/SSG) ✅ CSS/JS 최적화
FID	✅ JavaScript 코드 분할 ✅ 불필요한 JavaScript 제거 ✅ 긴 작업 최소화 ✅ Web Worker 활용
CLS	✅ 이미지 및 광고 크기 지정 ✅ 동적 콘텐츠 높이 미리 설정 ✅ font-display: swap 적용 ✅ 애니메이션 활용

6️⃣ 실무 적용 예시: Lighthouse & Chrome DevTools 활용

1️⃣ Lighthouse 분석

Chrome DevTools에서 Lighthouse 탭을 열고 성능 분석 실행
LCP, FID, CLS 점수를 확인하고 개선이 필요한 영역을 식별

2️⃣ Web Vitals Extension 활용

Chrome Web Store에서 Web Vitals 확장 프로그램 설치
실시간으로 Web Vitals 점수를 확인하고 최적화 진행

3️⃣ Next.js 성능 최적화

Next.js는 자동으로 코드 스플리팅을 수행하며, next/image, next/script 등을 활용하여 성능을 극대화할 수 있다.

7️⃣ 결론

LCP는 이미지 최적화, 서버 응답 속도 개선을 통해 향상할 수 있다.
FID는 JavaScript 코드 분할, 긴 작업 최소화로 최적화 가능하다.
CLS는 이미지 크기 지정, 폰트 로딩 최적화로 해결할 수 있다.
Lighthouse와 Web Vitals 도구를 활용하여 지속적으로 성능을 모니터링하는 것이 중요하다.

eunbi

이전 포스트

웹 브라우저의 렌더링 방식

다음 포스트