웹페이지 성능 측정 방법: React와 다양한 도구 활용하기
웹페이지 성능을 측정하는 다양한 방법이 있습니다. 단순히 개발자의 컴퓨터에서 확인하는 방법부터 원격 서버에서 확인하는 방법까지 다양합니다. 이번 글에서는 웹페이지의 성능을 객관적으로 확인할 수 있는 여러 지표와 도구에 대해 알아보겠습니다.
웹 성능 지표
Core Web Vitals
Core Web Vitals는 웹 페이지의 사용자 경험을 평가하기 위한 중요한 지표들로 구성됩니다. 주요 지표는 다음과 같습니다:
- CLS (Cumulative Layout Shift): 누적 레이아웃 이동
- FID (First Input Delay): 최초 입력 지연
- FCP (First Contentful Paint): 최초 콘텐츠 풀 페인트
- LCP (Largest Contentful Paint): 최대 콘텐츠 페인팅
- TTFB (Time to First Byte): 첫 바이트까지의 시간
이러한 지표들을 통해 사용자가 웹 페이지를 처음 방문했을 때 느끼는 경험을 평가할 수 있습니다.
Next.js 웹 성능 지표
Next.js는 기본적으로 웹 성능을 측정할 수 있는 NextWebVitalsMetric을 제공합니다. _app.js 페이지에 다음과 같은 코드를 추가해서 사용할 수 있습니다:
export function reportWebVitals(metric) {
console.log(metric)
// metric을 서버로 전송하거나 다른 방식으로 처리할 수 있습니다.
}Next.js에서 제공하는 추가적인 지표:
- next.js-hydration: 페이지가 서버 사이드 렌더링되어 하이드레이션하는 데 걸린 시간
- next.js-route-change-to-render: 페이지가 경로를 변경한 후 페이지를 렌더링을 시작하는 데 걸리는 시간
- next.js-render: 경로 변경이 완료된 후 페이지를 렌더링하는 데 걸리는 시간
리액트 애플리케이션에서 reportWebVitals 사용하기
React 애플리케이션에서 Core Web Vitals 지표를 수집하는 방법을 살펴보겠습니다. reportWebVitals 함수를 사용하여 간단하게 지표를 수집할 수 있습니다.
설치 및 사용법
reportWebVitals.js파일을 생성합니다:
const reportWebVitals = (onPerfEntry) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;index.js파일에서reportWebVitals를 호출합니다:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// 웹 바이탈 측정 결과를 콘솔에 출력합니다.
reportWebVitals(console.log);서버로 지표 전송하기
지표를 서버로 전송하고자 할 때는 navigator.sendBeacon이나 fetch API를 사용할 수 있습니다. 아래는 sendBeacon을 이용한 예시입니다:
const reportWebVitals = (onPerfEntry) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
const sendToAnalytics = (metric) => {
const body = JSON.stringify(metric);
navigator.sendBeacon('/analytics', body);
};
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getFCP(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);
});
}
};
export default reportWebVitals;구글 라이트하우스
구글 라이트하우스는 별도의 애플리케이션 코드 수정이나 배포 없이 성능 지표를 수집할 수 있는 도구입니다. 브라우저 확장 프로그램을 설치하거나 크롬 개발자 도구를 통해 사용할 수 있습니다.
크롬 개발자 도구 사용법
- 크롬 개발자 도구를 엽니다.
- 'Lighthouse' 탭을 클릭합니다.
- 'Generate report' 버튼을 클릭하여 보고서를 생성합니다.
주요 지표
- 성능: FCP, LCP, CLS 등
- 접근성: 웹 접근성 점수
- 권장사항: 보안, 표준 모드, 최신 라이브러리 사용 등
- 검색엔진 최적화 (SEO): 검색엔진 최적화 점수
결론
웹 페이지의 성능을 측정하는 방법은 다양합니다. Core Web Vitals와 Next.js 지표를 통해 사용자가 웹 페이지를 처음 접할 때의 경험을 평가할 수 있으며, 구글 라이트하우스를 통해 성능, 접근성, 권장사항, SEO 등을 분석할 수 있습니다. React 애플리케이션에서 reportWebVitals를 사용하여 간단하게 지표를 수집하고, 필요시 서버로 전송하여 더 자세한 분석을 할 수 있습니다. 이러한 방법들을 통해 웹 페이지의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다.
