-
Notifications
You must be signed in to change notification settings - Fork 4
[FE] 하루스터디 성능 리포트
noah edited this page Sep 7, 2023
·
6 revisions
- 성능 관리 대상 설정하기
- 성능 예산 세우기
- 측정 및 개선 포인트 찾기
사용자가 하루스터디 서비스에 입장할 때, 가장 먼저 보이는 페이지로 하루스터디 서비스의 핵심 가치를 한 눈에 파악할 수 있습니다. 때문에 랜딩 페이지의 성능을 높여 긍정적인 사용자 경험을 주고자 합니다.
하루스터디의 핵심 가치를 직접 느낄 수 있는 페이지로 원활한 스터디 진행을 사용자에게 전달하는 것을 목표로 하고 있습니다. 때문에 진행 페이지의 성능을 높여 긍정적인 사용자 경험을 주고자 합니다.
- 랜딩 페이지, 진행 페이지에서 불러오는 자바스크립트 리소스 크기의 합이
50KB
이하여야 한다. - 랜딩 페이지에서 불러오는 각 이미지 크기는
200KB
이하여야 한다. - 페이지에서 불러오는 각 폰트 크기는 기존
1.6MB
에서 개선해야한다.
- Lighthouse 기준
- Speed Index가
3.4s
이하여야 한다. - Largest Contentful Paint가
2.5s
이하여야 한다.
- Speed Index가
- WebPageTest 프랑스 파리에서 3G Fast 기준
- First View의 Largest Contentful Paint가
2.5s
이하여야 한다.
- First View의 Largest Contentful Paint가
- device: desktop
- Network throttling speed: Fast 3G
- CPU throttling: 6x slowdown
- 랜딩 페이지
- 진행 페이지
참고. 현재 성능 테스트에 사용된 이미지는 레벨4에서 다른 이미지로 대체될 예정
- 페이지에 필요한 번들만 불러온다.(Code Splitting)
- 폰트를 자바스크립트 번들과 함께 불러온다. 또는 폰트의 크기를 줄인다.(Preload)
- 이미지 size를 변경 또는 확장자를 변경한다.(webp)
created by @woosung1223 @jaehee329 @aak2075 @nlom0218 @yeopto @woo-jk @MoonJeWoong