마감일을 맞추느라 최적화(useMemo, React.memo, useCallback 사용)을 진행하지 못했던 React 프로젝트가 하나 있습니다. 그래서 지금, 해당 프로젝트의 최적화와 동시에 성능 분석을 통한 비교를 해보고자 합니다.
프론트엔드 성능 분석
우선, 성능의 기준이 무엇인지, 그리고 어떻게 그 성능을 분석하는지 알아보겠습니다.
기준 정하기 - Web Vitals
서비스의 특성에 맞는 개별화된 기준을 세우는 것이 가장 좋지만, 지금은 편의상 구글이 웹의 성능을 결정짓는 3가지 지표로 만들어낸 Web Vitals를 기준으로 사용해보겠습니다.
LCP
'로딩 시간'입니다. 정확히는 주요 컨텐츠들이 로드된 시점이라고 구글은 정의합니다. 특정 요소 한 두개가 아니라 사용에 불편이 없을 정도로 거의 모든 요소의 로딩이 끝난 시점이라고 볼 수 있습니다.
FID
'반응속도'입니다. 버튼을 눌렀을 때, 그에 따른 반응이 일어나는데 걸리는 시간에 대한 기준이라고 할 수 있습니다.
CLS
'레이아웃이 얼마나 안정되어 있느냐'를 나타내는 지표입니다. 예를 들어 한창 텍스트를 읽고 있는데 갑자기 높이를 차지해 버린 이미지 때문에 스크롤을 내려야 한다던지, 차례차례 다른 시점에 생성되는 요소들 때문에 자꾸만 요소들이 기존의 위치에서 벗어나는 일 등이 잦아지면 이 수치가 크게 상승합니다.
성능 측정하기 - LCP, CLS
가장 대표적으로 사용되는 성능 측정 방법은 크롬 개발자 도구에 내장된Lighthouse를 이용하는 것입니다. Lighthouse는 구글이 제시한WebVitals를 기준으로 성능을 측정하고 결과를 제공합니다. 하지만 지금은 더 단순하고 쉬운 방법으로 구글의 PageSpeed Insights을 이용해보겠습니다. 이 도구는 한글을 지원하고 다양한 성능 분석 지표와 개선 방안에 대한 점수를 제공하며, 성능 측정을 위해 URL을 입력하기만 하면 된다는 장점이 있습니다.
성능 측정하기 - FID
(해당 파트에 사용되는 이미지는 참고 글의 이미지를 사용했습니다.)
크롬으로 성능을 측정할 어플리케이션에 접속하고, 개발자 도구를 실행합니다. 상단의 Performance 탭을 클릭하고 동그라미 아이콘(녹화 버튼)을 누른 후, 성능을 측정할 작업을 수행한 후 녹화를 중지합니다.
이후, 결과 화면에서 범주를 그래프가 있는 영역으로 줄이고 Main이라고 되어 있는 영역을 살펴봅시다.
여러 색갈을 지닌 막대기가 보이는데, 그 중 가장 눈여겨 봐야 할 것은 아래 브라우저 렌더링 프로세스를 나타내는 그림에서 볼 수 있는 색을 지닌 막대기입니다.
주황색은 자바스크립트 코드를 실행한 시간을, 보라색은 렌더링에 필요한 연산을 수행하는 시간을, 초록색은 실제로 브라우저가 화면을 그리는 데 소모된 시간을 나타냅니다. 다음은 막대들을 확대한 화면입니다.
(여기서부터는 참고 글의 내용을 그대로 인용했습니다.)
막대들을 눌러보기도 하면서 정보를 모으면 무슨 일이 일어났는지에 대한 정보를 수집해봅시다. 그러면 Event:mouseDown, Event: mouseup 이후 Event: click 이라고 적힌 주황색 막대를 발견하실 수 있을 것입니다. 이 주황색 막대는 각 이벤트에 걸려 있는 이벤트 핸들러를 수행하는데 걸린 시간을 나타냅니다. 그 후에 Recalculate Style과 Layout이 일어났고, 또 한번의 자바스크립트 코드 실행 이후 Recalculate Style과 Layout가 또 일어난 후에야 Paint와 Composite Layer가 일어나는 것을 볼 수 있을 것입니다.
작성했던 소스코드를 돌아보면서 생각해보면, 지금 일어난 일은
- 마우스 클릭으로 인해 페이지 이동이 발생
- 리액트에서 새로운 페이지 컴포넌트를 렌더링 하기 위해 컴포넌트 render 를 실행하고 이를 바탕으로 가상 DOM 을 업데이트. 이에 따라 렌더링 연산을 수행
- 새로 생성된 컴포넌트 내부에서 상태 변경이 감지되어 해당 부분만 다시 render 를 수행하고 다시 가상 DOM 을 업데이트. 이에 따라 렌더링 연산을 다시 수행.
- 드디어
paint와composite layer작업을 통해 이용자에게 이동한 페이지 화면을 출력
일테니 이 일련의 과정을 모두 처리하는데, 얼마만큼의 시간이 걸렸는지를 파악하면 될 것으로 보입니다. 키보드의 shift를 누른 상태에서 시간을 측정하고 싶은 만큼 영역을 드래그해 보세요.
그러면 화면이 위와 같이 변하고 맨 하단의 Summary 탭에서 드래그된 부분을 요약해서 보여줍니다. Summary 에 의하면 이 작업은 총 48ms가 걸렸군요. 이런 식으로 반응속도를 측정하고자 하는 모든 작업들의 처리 시간을 측정하면 됩니다.
참고
https://codingmoondoll.tistory.com/entry/프론트엔드-성능-최적화-Quick-Start-1
https://velog.io/@9wan6zae/프론트엔드-성능-측정-p6u9levf
https://velog.io/@kmlee95/프론트엔드-성능최적화
