웹 성능 측정 방법

Profiler

리액트 팀에서 제공하는 성능 측정 툴로 크롬 확장 프로그램과 Profiler API가 존재한다.

주로 배포 환경에서 성능을 측정하게 될 텐데, 배포 환경에서는 profiler가 제외되어 빌드되어 사용할 수 없으므로 아래 명령어를 통해 빌드 시 profiler를 포함시킬 수 있다.

npm run build -- --profile

1. 크롬 확장 프로그램

https://chromewebstore.google.com/detail/fmkadmapgofadopljbjfkapdkoienihi

 

먼저 확장 프로그램의 경우, 설치한 뒤 개발자 도구를 살펴보면 아래 탭들이 추가된 걸 볼 수 있다.

 

이 중 Components의 경우 리렌더링이 발생하는 컴포넌트를 확인하는데 유용하다.

'Highlight updates when components render.'에 체크하게 되면 리렌더링이 발생하는 컴포넌트가 표시되므로 리렌더링 책임을 분리할 때 확인하기 좋다.

Profiler의 경우 위의 그래프처럼 리렌더링 주기에 대한 각 커밋 기록이 그래프로 표시되는데 각 커밋 별 컴포넌트의 렌더링 속도가 표시된다.

특정 단계의 리렌더링 속도를 신경쓰지 않는 이상 보통은 통합 렌더링 속도를 측정하게 되므로 Profiler API를 이용해 렌더링 속도를 측정하게 된다.

 

2. Profiler API

import { Profiler } from "react";

    <Profiler id="id" onRender={onRender}>
      {children}
    </Profiler>

측정하고자 하는 컴포넌트를 Profiler로 감싸게되면 해당 컴포넌트의 렌더링 성능에 대한 정보가 출력된다.

onRender는 컴포넌트의 렌더링이 종료될 때 호출되는 함수로 보통 아래와 같은 매개변수를 받는 함수를 사용한다.

  const onRender = (id: string, phase: string, actualDuration: number, baseDuration: number, startTime: number, commitTime: number) => {
    console.log("id ", id);
    console.log("phase ", phase);			// 랜더링의 단계
    console.log("actualDuration ", actualDuration);	// 실제로 랜더링하는 데 걸린 시간(캐시된 컴포넌트의 재사용 등 최적화로 인해 절약된 시간은 제외)
    console.log("baseDuration ", baseDuration);		// 컴포넌트가 재랜더링 없이 처음부터 끝까지 랜더링되는 데 걸린 시간의 추정치
    console.log("startTime ", startTime);		// 랜더링을 시작한 시간
    console.log("commitTime ", commitTime);		// 변경 사항을 DOM에 커밋(적용)한 시간
    console.log("===============");

 

렌더링은 단계에 따라 여러번 일어나게 되므로 '렌더링을 시작하여 실제 DOM 업데이트가 완료될 때까지 걸린 전체 시간'을 구하고자 한다면 '마지막 commitTime - 첫 startTime'을 하면 된다.

LightHouse

웹 애플리케이션의 여러 가지를 측정하는 툴로 간단하게 설치 가능한 것엔 크롬 확장 프로그램이 있다.

https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

사용법은 간단하다.

측정하고자 하는 항목을 카테고리에서 체크한 뒤 '페이지 로드 분석' 버튼을 누르면 현재 보고 있는 페이지의 성능을 측정하게 된다.

 

만점을 받으면 폭죽이 터진다.

'측정항목'에서 '뷰 펼치기'를 누르면 각 항목에 대한 설명을 확인할 수 있다.

진단 섹션을 확인하면 어떤 것들을 통해 점수를 개선할 수 있는지 확인할 수 있다.

네트워크 탭

서버 요청/응답 속도에 대해서도 측정할 수 있다.

~~초에 대기열에 추가됨: 측정 시간(개발자 도구를 켠) 순간부터 큐에 적재되는데 까지 걸린 시간

~~초에 시작함: 측정 시간부터 해당 요청 작업이 시작되기까지 걸린 시간

대기열: 구문을 분석한 시점에서 큐에 적재되어 있는 시간

중단됨: IP 주소를 분석, TCP 핸드셰이크 연결 등의 작업을 이유로 큐에서 request를 보내기 전까지 정지되어 있는 시간

요청 전송됨: 요청을 전송하는 데 걸린 시간

서버 응답을 기다리는 중: response의 첫번째 바이트가 도달하는 데까지 걸리는 시간. (지연 시간의 1회 왕복과 서버가 응답을 준비하는 데 걸린 시간이 포함됨)

콘텐츠 다운로드: 응답 본문을 읽는 데 소요된 총 시간

빨간 네모: 요청/응답 최종 걸린 시간. (예상보다 큰 경우 네트워크가 느리거나 브라우저가 다른 작업을 수행하느라 응답 읽기가 지연된 것일 수 있음)

DOMContentLoaded: DOM 트리가 완성된 시간 (CSS 로드, Javascript 실행 중일 수 있음). Waterfall에서 파란색 선으로 표시됨

로드: 페이지의 모든 요소(HTML, 스크립트, 스타일시트, 이미지 등)가 로드되어 페이지가 완전히 로드된 시간 (최종 페인트 완료 시간x. 이후에도 요청을 통한 리렌더링, 스타일 계산, 레이아웃, 페인트 등의 작업이 수행될 수 있음)

완료: 네트워크 요청이 완료되고, 필요한 리소스가 로드되어 초기 렌더링 프로세스가 완료되었을 때의 시점

개발자도구 성능(Performance) 탭

위 기록 버튼을 누르면 아래처럼 뜨게되는데 측정하고자하는 동작을 수행한 이후 중지를 누르면 기록 버튼을 누른 시점부터 동작을 마친 순간까지의 모든 이벤트가 나타난다.