Tech Notes

vercel 의 speedInsignts?

miracle-tech 2026. 4. 15. 17:06
728x90
반응형

Vercel을 Upgrade 하려다보니 $10 가 더 option 으로 붙어있는 걸 발견했다.

이게 뭐지? 하다가 나도 모르게 이전에 성능 측정 도구를 서비스 내에 심어놓고 있었던 것을 발견했다.

Upgrade 하기전에 꼭! 체크해보자

Vercel SpeedInsights란 무엇인가 

Next.js 프로젝트를 Vercel에 배포하다 보면 아래와 같은 코드를 접하게 된다.

import { SpeedInsights } from '@vercel/speed-insights/react';

그리고 일반적으로 루트 레이아웃이나 앱 컴포넌트에 다음과 같이 추가한다.

<SpeedInsights />

이 기능은 이름 때문에 성능을 “개선”하는 것으로 오해하기 쉽지만, 실제로는 성능을 “측정”하는 도구다.

 

vercel CLI 로 init을 하거나 Enable Analytics 같은 버튼을 클릭하면 자동으로 코드가 추가되니 주의하자.

단, Analytics 는 무료이며 방문자 수, 페이지 조회, 간단한 트래픽 분석을 해줘서 남겨도 되지만

SpeedInsights 는 Web Vitals 성능 측정으로 Pro Plan으로 Upgrade시 $10가 추가되니 잘 보고 판단할 것.

SpeedInsights 개요

Vercel에서 제공하는 Speed Insights는
웹 애플리케이션의 성능을 실제 사용자 기준으로 측정하는 Real User Monitoring(RUM) 도구다.

애플리케이션에 컴포넌트를 추가하면 사용자 환경에서 발생하는 성능 데이터를 수집하고, 이를 Vercel 대시보드에서 확인할 수 있다.

수집되는 주요 지표

Speed Insights는 Web Vitals 기반의 핵심 지표를 수집한다.

  • FCP (First Contentful Paint)
    화면에 첫 콘텐츠가 표시되는 시점
  • LCP (Largest Contentful Paint)
    주요 콘텐츠가 렌더링되는 시점
  • TTFB (Time to First Byte)
    서버 응답 속도
  • INP (Interaction to Next Paint)
    사용자 인터랙션 반응 속도
  • CLS (Cumulative Layout Shift)
    레이아웃 안정성

이 지표들은 실제 사용자 환경에서 수집되며, 성능 병목을 분석하는 데 활용된다.

동작 방식

<SpeedInsights />

해당 컴포넌트는 클라이언트 환경에서 실행되며 다음과 같은 흐름으로 동작한다.

  1. 브라우저에서 사용자 성능 데이터를 수집
  2. 수집된 데이터를 Vercel로 전송
  3. Vercel 대시보드에서 시각화

즉, 코드 한 줄로 RUM 환경이 구성되는 구조다.

비용 구조

Speed Insights는 기본 기능이 아니라 유료 옵션이다.

  • Vercel Pro 플랜 기준
  • 월 약 $10 추가 과금

다음 코드가 포함되어 있는 경우:

import { SpeedInsights } from '@vercel/speed-insights/react';

해당 프로젝트는 Speed Insights 사용 상태로 인식되며, 과금 대상이 된다.

도입이 적절하지 않은 시점

도입이 적절하지 않은 시점

다음과 같은 단계에서는 도입 필요성이 낮다.

  • MVP 개발 단계
  • 트래픽이 거의 없는 초기 서비스
  • 기능 검증이 우선인 경우
  • 수익화 이전 단계

이 시기에는 성능 최적화보다 기능 구현과 시장 검증이 더 중요하다.

도입이 적절한 시점

다음 조건에서는 도입을 고려할 수 있다.

  • 일정 수준 이상의 트래픽 확보
  • 사용자 경험 저하 이슈 발생
  • 페이지 속도에 따른 이탈률 증가
  • 전환율 개선이 필요한 단계

이 경우 실제 사용자 기반 데이터가 성능 개선에 유의미한 근거가 된다.

제거 방법

Speed Insights를 완전히 비활성화하려면 다음 단계를 모두 수행해야 한다.

1. 코드 제거

import { SpeedInsights } from '@vercel/speed-insights/react';

<SpeedInsights />

2. 패키지 제거

npm uninstall @vercel/speed-insights

또는

yarn remove @vercel/speed-insights

3. 재배포

Vercel은 코드 상태를 기준으로 기능 활성화 여부를 판단하므로,
변경 후 반드시 재배포가 필요하다.

결론

  • Speed Insights는 성능 개선 도구가 아니라 성능 측정 도구다
  • 코드 한 줄로 활성화되며 추가 비용이 발생한다
  • 초기 단계에서는 불필요할 수 있다
  • 트래픽과 사용자 경험 개선이 필요한 시점에 도입하는 것이 적절하다
728x90