프론트엔드 성능 분석 & 기본 성능 개선

August 14, 2021 • ☕️ 4 min read

frontend

성능 측정 | bundle 압축 | 이미지 리사이징

성능 분석은 처음이라, 어디서부터 시작해야 하는지 감을 잡을 수 없었다. 다행히 페어와 많은 크루, 코치님들의 도움을 받아 작은 것부터 차근차근 성능을 측정하고 개선점을 찾아보았다.

아래 기준으로 환경을 세팅 후 측정했다.

Copy

🌐 Network | Fast 3G
🏃‍♀️ Performance | CPU 4x throttling
🖱 Disable Cache
🤫 Chrome Secret Mode

✅ Performance 측정

사용자들의 웹 경험에서 중요한 공통 집합인 Core Web Vitals는 아래와 같다.

Largest Contentful Paint: 인식되는 로드 속도를 측정하는 항목으로, 페이지의 주요 콘텐츠가 로드되었을 가능성이 높은 시점에 페이지 로드 타임라인에 점을 표시한다.
First Input Delay: 응답성을 측정하는 항목으로, 사용자가 페이지와 처음 상호 작용하려고 할 때 느끼는 경험을 정량화한다.
Cumulative Layout Shift: 시각적 안정성을 측정하는 항목으로, 눈에 보이는 페이지 콘텐츠의 예기치 않은 레이아웃 변화량을 정량화한다.

크롬 개발자 도구의 Performance 패널에서 확인 가능한 FCP(First ContentFul Paint) 와 LCP(Largest Contentful Paint), 추가적으로 Onload 이벤트가 실행되는 시점을 측정했다.

우리 서비스에서 hero element가 되는 중요한 요소들, 그리고 주요 기능이라고 생각하는 기능들에서의 인터랙션을 중심으로 성능을 측정했다. 이 역시 bundle 압축과 이미지 리사이징을 통해 시간을 많이 앞당길 수 있었다.

대부분의 Web Vitals는 아래와 같은 방식으로 개선이 가능하다.

JavaScript 최소화
CSS 블로킹 최소화
리소스 최소화
network payload 최소화
polyfill 최소화

✅ bundle.js 압축하기

현재 프론트엔드 리소스는 CloudFront를 통해 받아오고 있다. 프론트엔드 스크립트의 번들링 결과인 bundle.js의 크기를 네트워크 탭을 통해 확인해 보니, 원본은 2.6MB에 달했으며 CDN을 통해 전송되는 용량도 571kB였다. 웹페이지를 로드하는 데 상당한 부분을 차지하는 만큼, 압축이 필요한 부분이다.

AWS CloudFront는 Behaviors에 들어가서, Cache Policy를 새로 설정하거나 기존 옵션을 변경하면 된다. 화면의 View Policy에 들어가서, gzip과 brotli 설정을 Enabled해준다.