프론트엔드의 성능을 측정하기 위해서는 무엇을 어떻게 측정해야할까요?
이번 글에서는 현대에는 어떤 지표로 프론트엔드 성능을 측정하며, 어떤 방식으로 측정했는지에 대해서 알아보겠습니다.
프론트 엔드에서 성능은 다양합니다. 하지만 그 중 가장 중요하다고 생각되는 것은 유저에게 웹 사이트를 빠르게 표시하는 것 입니다. 좀 더 기술적으로 풀어보면 빠른 로딩과 렌더링으로 유저에게 좋은 경험을 주는 것 입니다.
프론트 엔드 성능은 로딩과 렌더링 시간을 줄이는 것으로 볼 수 있습니다.
들어가기 앞서 브라우저에 웹사이트가 표시되는 일련의 과정, 즉 렌더링 과정에 대해서 알아보겠습니다.
브라우저 렌더링 과정은 아래와 같습니다.
이처럼 브라우저가 HTML, CSS, JavaScript와 그 외 리소스를 스크린에 표시하는 일련의 과정을 Critical Rendering Path라고 부르기도 합니다.
Critical Rendering Path를 최적화한다면 로딩과 렌더링 시간이 줄여서 프론트 엔드 성능이 향상 될 것 입니다. 그런데 최적화된 시간이 얼마나 유저에게 좋은 경험을 줄 수 있을까요?