- 배포한 CloudFront 접근 경로:
- 개선 전후 성능 측정 결과
- 개선 전 (GitHub Pages)
- 개선 후 (CloudFront)
1 요청 크기 줄이기
- 소스코드 크기 줄이기
- 이미지 크기 줄이기
2 필요한 것만 요청하기
- 페이지별 리소스 분리
- 아이콘 패키지 Tree Shaking
3 같은 건 매번 새로 요청하지 않기
- CloudFront 캐시 설정 / S3 메타데이터 설정 (설정값, 해당 값을 설정한 이유 포함)
- GIPHY의 trending API를 Search 페이지에 들어올 때마다 새로 요청하지 않아야 한다.
4 최소한의 변경만 일으키기
- 검색 결과 > 추가 로드시 추가된 목록만 새로 렌더되어야 한다.
- Layout Shift 없이 애니메이션이 일어나야 한다.
- Frame Drop이 일어나지 않아야 한다.
- (Chrome DevTools 기준) Partially Presented Frame 역시 최소로 발생해야 한다.