[FE] 하루스터디 성능 리포트

하루스터디 성능 리포트

목차

1. 성능 관리 대상 설정하기
2. 성능 예산 세우기
3. 측정 및 개선 포인트 찾기

1. 성능 관리 대상 설정하기

랜딩 페이지

사용자가 하루스터디 서비스에 입장할 때, 가장 먼저 보이는 페이지로 하루스터디 서비스의 핵심 가치를 한 눈에 파악할 수 있습니다. 때문에 랜딩 페이지의 성능을 높여 긍정적인 사용자 경험을 주고자 합니다.

진행 페이지

하루스터디의 핵심 가치를 직접 느낄 수 있는 페이지로 원활한 스터디 진행을 사용자에게 전달하는 것을 목표로 하고 있습니다. 때문에 진행 페이지의 성능을 높여 긍정적인 사용자 경험을 주고자 합니다.

2. 성능 예산 세우기

정량 기반 지표

• 랜딩 페이지, 진행 페이지에서 불러오는 자바스크립트 리소스 크기의 합이 50KB 이하여야 한다.
• 랜딩 페이지에서 불러오는 각 이미지 크기는 200KB 이하여야 한다.
• 페이지에서 불러오는 각 폰포 크기는 기존 1.6MB 에서 개선해야한다.

규칙 기반 지표

• Lighthouse 기준
  • Speed Index가 3.4s 이하여야 한다.
  • Largest Contentful Paint가 2.5s 이하여야 한다.
• WebPageTest 프랑스 파리에서 3G Fast 기준
  • First View의 Largest Contentful Paint가 2.5s 이하여야 한다.

성능 테스트 환경

• device: desktop
• Network throttling speed: Fast 3G
• CPU throttling: 6x slowdown

3. 측정 및 개선 포인트 찾기

Lighthouse와 WebPageTest

1. 랜딩 페이지

2. 진행 페이지

페이지에서 불러와지는 리소스 크기

참고. 현재 성능 테스트에 사용된 이미지는 레벨4에서 다른 이미지로 대체될 예정

개선 포인트 찾기

1. 페이지에 필요한 번들만 불러온다.(Code Splitting)
2. 폰트를 자바스크립트 번들과 함께 불러온다. 또는 폰트의 크기를 줄인다.(Preload)
3. 이미지 size를 변경 또는 확장자를 변경한다.(webp)