[FE] 땅콩 성능 개선기
| 페이지 | Performance | FCP | LCP | TBT | CLS | Speed Index |
|---|---|---|---|---|---|---|
| 메인 화면 | 60 | 1.5s | 4.3s | 1,360ms | 0.011 | 1.9s |
| 닉네임 설정 화면 | 70 | 1.5s | 3.3s | 990ms | 0.01 | 1.8s |
| 대기 화면 | 66 | 1.5s | 3.6s | 1,230ms | 0.011 | 1.9s |
| 게임 화면 | 67 | 1.5s | 3.4s | 1,170ms | 0.01 | 2.0s |
| 라운드 결과 화면 | 60 | 1.6s | 4.2s | 1,340ms | 0.011 | 2.3s |
| 페이지 | Performance | FCP | LCP | TBT | CLS | Speed Index |
|---|---|---|---|---|---|---|
| 메인 화면 | 88 | 1.7s | 3.6s | 170ms | 0 | 1.7s |
| 닉네임 설정 화면 | 91 | 1.7s | 2.9s | 210ms | 0 | 1.7s |
| 대기 화면 | 80 | 1.7s | 4.5s | 210ms | 0 | 1.7s |
| 게임 화면 | 85 | 2.2s | 3.7s | 170ms | 0 | 2.2s |
| 라운드 결과 화면 | 88 | 2.0s | 3.3s | 190ms | 0.002 | 2.0s |
| 메인 화면 | 닉네임 설정 화면 | 대기 화면 | 게임 화면 | 라운드 결과 화면 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
[ 목표했던 타겟 환경과 디바이스에서 서비스 핵심 기능 동작 확인 ]
호스트 환경 : 모바일
네트워크 : Slow 4G (150ms)
CPU 스로틀링 : 6x slowdown
cache : 브라우저 캐시 사용 중지
_.mp4
-
초기 로딩 속도
- 네트워크로 불러오는 리소스 크기를 줄이기
- 이미지 포맷 및 크기 조절
- 폰트 서브셋 최적화
- 폰트 preload가 초기 로딩 속도를 지연시키는 문제가 발생했지만, 폰트 덜컹거림은 UX에 악영향을 미친다 생각하여 유지함
-
JS 번들 사이즈 최적화
- 코드 스플리팅 적용
- css-in-js는 런타임에 스타일링이 적용되기 때문에 css 파일을 별도로 분리하지 못함
-
렌더링 최적화
- 타이머를 구현하는 과정에서 width와 right를 조작하여 애니메이션 적용
- transform을 활용하여 리플로우 발생시키지 않도록 설정
렌더링 시간 감소 : 1686ms -> 87ms (94.84% 개선)
렌더링 개선 전 : reflow, repaint 발생으로 브라우저 렌더링 시간 지연 (1686ms)
렌더링 개선 후 : transform 활용하여 reflow 없이 composition 만으로 애니메이션 동작 (87ms)
| 개선 전 | 개선 후 |
|---|---|
 |
 |
개선 전
_.mp4
개선 후
_.mp4
개선 전
_.mp4
개선 후
_.mp4
| 개선 전 | 개선 후 |
|---|---|
 |
 |
- 이미지의 확장자를 바꾸는 것 만으로도 데이터의 크기를 절반 이상 낮출 수 있었다.
- 개선 작업 이후에 Lighthouse 지표 중 TBT에서 가장 큰 개선을 보였다.
- font를 CDN 서버에서 불러올 때 preload 옵션을 추가해 네트워크가 느린 환경에서 FOUT 현상을 없애 UX를 개선하였다.
- 잦은 reflow, repaint는 frame drop을 발생시켜 성능 문제를 일으키기 때문에, transform을 사용하여 합성 단계만 거치도록 개선하였다.
- 애니메이션을 구현할 때는 layout shift 발생을 유의해야 한다.