[모던 리액트 Deep Dive] 13장 웹페이지 성능을 측정하는 다양한 방법

이 글의 내용은 2025년 7월 11일 기준, 책의 내용을 바탕으로 실습하여 기록한 글입니다. 때문에 책과 다른 내용은 직접 실습해가며 가능한 최신의 내용을 적기 위해 노력했습니다.

13.1 애플리케이션에서 확인하기

13.1.1 create-react-app

최근 트렌드에서는 사용하는 것이 추천되지 않지만, 공식 지원 도구인 CRA로 빌드하게 되면 reportWebVitals.js라는 함수를 제공합니다.

이는 구글이 제공하는 web-vitals 라이브러리를 사용하고 있고, CLS, FID, FCP, LCP, TTFB를 측정하는 용도로 사용하는 함수입니다. 이는 다시 PerformanceObserver라는 브라우저 API를 사용하고 있습니다. 해당 API를 지원하지 않는 브라우저에서는 사용할 수 없습니다.

• CLS (Cumulative Layout Shift): 누적 레이아웃 이동량
• FID (First Input Delay): 사용자의 첫 상호작용까지의 지연
• LCP (Largest Contentful Paint): 주요 콘텐츠 렌더링 시점
• FCP (First Contentful Paint): 텍스트/이미지가 처음 그려지는 시점
• TTFB (Time To First Byte): 서버 응답이 시작되기까지의 시간

web-vitals의 ReportHandler에 console.log를 전달하여 핵심 웹 지표들을 콘솔에 출력하거나, sendBeacon을 통해 서버로 정보를 보낼 수 있습니다.

navigator.sendBeacon: 브라우저가 백그라운드에서 서버로 데이터를 전송할 수 있게 해주는 Web API입니다. 페이지가 닫히기 직전 데이터를 전송하거나, 웹 성능 측정 결과를 전송하는 데 사용합니다.

13.1.2 create-next-app

Next.js는 성능 측정을 위한 NextWebVitalsMetric 메서드를 제공합니다.

핵심 웹 지표뿐만아니라, Next.js에 특화된 사용자 지표도 제공합니다.

• Next.js-hydration: 서버 사이드에서 렌더링되어 하이드레이션에 걸린 시간
• Next.js-route-change-to-render: 페이지가 경로를 변경 후 페이지를 렌더링 시작하는 데 걸리는 시간
• Next.js-render: 경로 변경 완료 후 페이지를 렌더링하는 데 걸리는 시간

13.2 구글 라이트하우스

웹 페이지 성능 측정 도구로, 핵심 웹 지표, PWA, SEO 등 웹 페이지 제반의 다양한 요소들을 측정하고 점검할 수 있습니다.

13.2.1 탐색 모드

페이지에 접속 시점부터 페이지 로딩이 완료될 때까지의 성능을 측정합니다.

13.2.2 기간 모드

실제 웹페이지를 탐색하는 동안 지표를 측정합니다.

13.2.3 스냅샷

탐색 모드와 유사하지만 현재 페이지 상태를 기준으로 분석합니다.

13.3 WebPageTest

웹사이트 성능을 분석하는 도구로 가장 널리 알려진 도구입니다.

핵심 웹 지표나 라이트하우스 도구, 2개 이상의 사이트를 비교하는 기능(Visual Comparison)을 제공합니다.

Site Performance 기능에서는 Test Location을 설정하거나 특정 브라우저를 사용해 테스트할 수 있으며, 세부적으로 테스트 환경을 커스텀할 수 있습니다.

Site Performance가 제공하는 기능

Oportunity & Experioments

웹사이트에 대한 평가를 총 3가지로 나눠 보여줍니다. 각 진단에 대한 세부적인 내용과 해결 방안을 제시해줍니다.

• Is it Quick: 웹사이트가 충분히 빠른지 진단합니다. (TTFB, CLS, LCP, FID 등을 체크)
• Is it Usable: 웹사이트의 사용성과 시각적인 요소를 확인합니다. (CLS 최소화, 빠른 상호작용 가능 여부, 접근성 이슈 여부, 과도한 클라이언트 사이드 HTML 렌더링 여부 등)
• Is it Resilient: 보안 취약성을 점검합니다.

FilmStrip

시간의 흐름에 따라 웹사이트가 어떻게 그려졌는데, 어떤 리소스가 불러와졌는지 볼 수 있는 메뉴입니다. 해당 메뉴에서 렌더링을 블로킹하는 리소스나 리소스의 요청 순서 등을 확인할 수 있으므로 어떤 것이 성능에 영향을 미치는지, 개선점은 무엇인지 파악하는 데 도움이 됩니다.

Details

FilmStrip의 내용을 자세하게 보여줍니다. 각 요청에 대한 자세한 설명이 있습니다.

WebVitals

핵심 웹 지표에 대한 자세한 내용을 확인할 수 있습니다.

Optimizations

리소스들이 얼마나 최적화돼 있는지 나타냅니다.

Content

웹사이트가 제공하는 콘텐츠, 에셋을 종류별로 묶어 통계를 보여줍니다.

Domains

Content 메뉴에서 보여준 애셋들이 어느 도메인에서 왔는지 도메인별로 묶어서 확인할 수 있습니다. 중요 리소스는 웹사이트와 같은 곳에서 요청할 수록 도메인 연결에 소모되는 비용을 줄일 수 있습니다.

Console Log

웹사이트 접속 시 console.log에 기록되는 내용을 확인할 수 있습니다. 가급적 console.log를 기록하는 일은 없어야 합니다. 디버깅이 목적이라면, 환경변수 등의 방법을 사용해 개발자만 제한적으로 볼 수 있게 하는 편이 좋습니다.

Detected Technologies

웹사이트에 사용된 기술을 확인할 수 있는 메뉴입니다.

Main-thread Processing

• Processing Breakdown에서는 메인 스레드가 어떤 작업을 처리했는지 확인할 수 있습니다.
• Timing Breakdown에서는 유휴 시간을 포함한 메인 스레드의 작업을 확인할 수 있습니다.

기타

WebPageTest 외부에서 제공하는 서비스입니다.

• Image Analysis: 웹사이트의 이미지를 최적화했을 때, 얼마나 리소스를 아낄 수 있을지 보여줍니다.
• Request Map: 웹사이트에서 요청이 어떻게 일어나고 있는지 시각화해서 보여줍니다.

13.4 크롬 개발자 도구

크롬 개발자 도구를 통해 애플리케이션 성능을 분석하는 방법을 알아봅니다.

13.4.1 성능 통계

아직 실험 단계에 있는 기능으로, 설정에서 성능 통계 탭을 enable하여 사용해 볼 수 있습니다.

어떤 이유에서인지 설정에서 enable해도 탭이 나오지 않아 실습해볼 수 없었습니다. 이 부분은 추후 다시 학습해보려고 합니다.

13.4.2 성능

Peroformance Insights보다 더 많은 내용을 제공합니다.

라이트하우스와 기록 및 새로고침을 눌러 비슷하게 처음 페이지 로드부터 끝까지 성능을 측정하거나, 기록으로 특정 구간의 성능을 측정할 수 있습니다.

환경 설정에서 CPU와 네트워크의 속도를 고의로 지연시켜 열악한 환경에서 테스트해볼 수 있습니다.

Insights 탭에서는 수집한 정보를 바탕으로 주요 성능 관련 문제와 개선 권장 사항을 요약해 보여줍니다.

기본적으로 네트워크 요청, 프레임의 변화, 애니메이션, 레이아웃 변경 등 시간의 변화에 따라 어떤 일이 일어나는지 확인할 수 있는 다양한 기능을 제공합니다.

하단에서는 세부적으로 일어난 일에 대해 요약을 볼 수도 있고, 호출 트리, 이벤트 로그를 확인할 수 있습니다.