프론트엔드의 성능을 측정하기 위해서는 무엇을 어떻게 측정해야할까요?

이번 글에서는 현대에는 어떤 지표로 프론트엔드 성능을 측정하며, 어떤 방식으로 측정했는지에 대해서 알아보겠습니다.

프론트 엔드에서의 성능은 무엇일까요?

프론트 엔드에서 성능은 다양합니다. 하지만 그 중 가장 중요하다고 생각되는 것은 유저에게 웹 사이트를 빠르게 표시하는 것 입니다. 좀 더 기술적으로 풀어보면 빠른 로딩과 렌더링으로 유저에게 좋은 경험을 주는 것 입니다.

프론트 엔드 성능은 로딩과 렌더링 시간을 줄이는 것으로 볼 수 있습니다.

들어가기 앞서 브라우저에 웹사이트가 표시되는 일련의 과정, 즉 렌더링 과정에 대해서 알아보겠습니다.

브라우저 렌더링 과정

브라우저 렌더링 과정은 아래와 같습니다.

1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다.
2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.
3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하고 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.
4. 렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅 한다.

이처럼 브라우저가 HTML, CSS, JavaScript와 그 외 리소스를 스크린에 표시하는 일련의 과정을 Critical Rendering Path라고 부르기도 합니다.

Critical Rendering Path를 최적화한다면 로딩과 렌더링 시간이 줄여서 프론트 엔드 성능이 향상 될 것 입니다. 그런데 최적화된 시간이 얼마나 유저에게 좋은 경험을 줄 수 있을까요?

https://youtu.be/G1IWq2blu8c?t=1006