[React] Deep Dive 모던 리액트(32) 웹페이지 성능측정

728x90

이전 글에서 웹페이지의 성능을 판단하기 위해 확인해야 하는 지표들에 대해 알아봤다. 이번 글에서는 지표를 확인하는 서로 다른 방법을 통해 웹페이지의 성능을 객관적으로 파악하는 방법을 알아보자.

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

1. create-react-app

cra를 통해 프로젝트를 생성하면 아래와 같은 파일이 생성된다. (src 파일 안에 있다)

import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  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;

이 reportWebVitals 함수는 웹에서 성능을 측정하기 위한 함수이며 CLS,FID,FCP,LCP,TTFB를 측정하는데 사용된다.

CLS : 누적 레이아웃 이동
FID : 최초 입력 지연
FCP : 최초 콘텐츠풀 페인트
LCP : 최대 콘텐츠 페인팅
TTFB : 첫 바이트까지의 시간측정

JS수준의 라이브러리가 브라우저 웹페이지의 성능을 측정할 수 있는 이유는 PerformanceObserver라는 API를 사용하기 때문이다. 해당 라이브러리를 활용하면 웹페이지의 다양한 성능을 측정할 수 있으며 해당 API를 제공하지 않는 브라우저의 웹 성능은 측정하기 어렵다.

reportWebVitals(console.log)

위와같은 코드를 넣는다면 현재 웹페이지 성능을 콘솔창에서 볼 수 있다. 이러한 기록을 실제 서버에 기록하고 싶다면 sendBeacon API나 fetch등의 API를 이용해 서버로 정보를 보내거나 구글 애널리틱스로 보내면 된다.

2. create-next-app

Next.js는 성능 측정을 할 수 있는 메서드인 NextWebVitalMetric을 제공한다.

_app페이지에 아래 코드를 추가해본다고 생각해보자.

import { NextWebVitalsMetric } from "next/app";

export function reportWebVitals(metric: NextWebVitalsMetric) {
  console.log(metric);
}

이렇게 _app에 예약어로 지정된 함수를 실행하면 아래와 같이 성능을 볼 수 있다.

{
  id: 'v3-123462834628343-213487239423',
  name: 'TTFB',
  startTime: 0,
  value: 11647.59999999999404,
  label: 'web-vital',
},
{
  id: 'v3-172821983462-324972394792',
  name: 'FID',
  startTime: 140750.123904821034,
  value: 6,
  label: 'web-vital',
},
{
  id: 'v3-16829341207394',
  name: 'LCP',
  startTime: 17406,
  value: 17406.8,
  label: 'web-vital',
}

구글 라이트하우스

잠깐 소개했던 reportWebVitals를 설치하여 지표를 수집하는 방식은 코드 몇줄로 지표를 수집할 수 있다는 장점이 있긴 하지만 기존 애플리케이션의 코드수정이 불가피하다.

구글라우트 하우스는 구글에서 제공하는 웹페이지 성능 도구로 오픈소스로 운영되고 있다. 크롬,파이어폭스의 경우 브라우저 웹 스토어에 접속하여 확장프로그램을 설치하면 된다. (크롬 개발자도구에는 라우트하우스가 기본적으로 내장되어 있다.)

성능을 체크하고 싶은 웹페이지의 개발자도구에 들어가서 Lighthouse탭을 눌러주자.

( 크롬에 설치된 다른 확장프로그램이 영향을 줄 수 있으니 시크릿 창으로 실행하는 것이 좋다.)

1. 탐색모드

페이지에 접속했을 때부터 페이지 로딩이 완료될때까지의 성능을 측정한다. 아래는 구글 첫 페이지를 조사한 결과이다.

성능

성능은 웹페이지 성능과 관련도로 FCP(최초 콘텐츠풀 페인트), LCP(최대 콘텐츠풀 페인트), CLS(누적 레이아웃 이동) 등을 알려주고 그 외에 3가지 추가적인 지표가 있다.

Time to Interactive : 페이지에서 사용자가 완전히 상호작용할 수 있을때까지 걸리는 시간을 측정한다.
Speed Index : 페이지가 로드되는 동안 콘텐츠가 얼마나 빨리 시각적으로 표시되는지를 계산한다.
Total Blocking Time : 메인 스레드에서 특정시간 이상 실행되는 작업, 즉 긴 작업이 수행될때마다 메인 스레드가 차단된 것으로 간주한다.

접근성

여기서 말하는 접근성은 장애인 및 고령자 등 신체적으로 불편한 사람들이 일반 사람들과 똑같이 접근할 수 있는 수치를 말한다. 다양한 사용자들을 배려하기 위해서 HTML,CSS 등에 적절한 대안을 삽입하는 것을 접근성으로 생각한다.

위와같이 개선방향성 또한 알려준다.

권장사항

웹사이트를 개발하는 경우 고려해야 할 요소들을 얼마나 지키고 있는지 확인할 수 있다.

사항으로는 보안, 표준 모드, 최신 라이브러리, 소스 맵 등 다양한 요소들이 포함되어 있다.

검색엔진 최적화

웹페이지가 구글과 같은 검색엔진에 쉽게 웹페이지 정보를 가져가서 공개할 수 있도록 최적화 되어 있는지를 확인한다.

기간 모드

실제 웹페이지를 탐색하는 동안 지표를 측정하는 것이다. 해당 모드에서 확인할 수 있는 지표들은 탐색모드와 크게 다르지 않다.

흔적

View Trace를 번역한 것으로, 웹 성능을 추적한 기간을 성능 탭에서 보여준다. 단순하게 감사를 보여주는 정도를 넘어서 시간의 흐름에 따라 웹페이지가 어떻게 로딩되었는지도 보여준다.

트리맵

페이지를 불러오는 경우 함께 로딩한 모든 리소스를 함께 모아서 볼 수 있는 곳이며 전체 JS리소스 중 어떤 파일이 전체 데이터 로딩 중 어느정도를 차지할 수 있는지 확인할 수 있다.

이 역시 생각보다 자세한 정보들을 알 수 있음을 알 수 있다.

리소스에서 사용하지 않은 바이트의 크기를 확인할수도 있어 사용하지 않은 파일들을 제거해서 번들링된 리소스에서 불필요 한것들을 줄이는 데 도움이 된다.

스냅샷

스냅샷 모드는 탐색 모드와 매우 유사하지만 현재 페이지 상태를 기준으로 분석한다는 점이 다르다. 즉, 현재 상태에서의 검색엔진 최적화, 접근성, 성능 등을 분석할 수 있다.

내용 자체는 탐색모드와 똑같다!