[FE] 클라이언트 성능 레포트 양식

[nan-noo]

성능 레포트 템플릿입니다 :D 모두 작성하고 위키에 추가하면 좋을 것 같네요
추가할 내용 있으면 댓글에 달아주세요!

모아모아 프론트엔드 성능 레포트

프론트엔드 팀 @airman5573 @nan-noo

성능 측정 환경

• 데스크탑
• 메인 페이지
• 등등

개선 전 성능

개선 목표

• lighthouse 성능 점수 90점 이상이 나와야 한다.
• 빌드 시에 번들링된 총 파일 크기가 700KB 이하여야 한다.
• performance 탭에서 frame drop이 없고, partially presented frame도 거의 없도록 한다.
• 애니메이션에 의한 layout shift를 최소화한다.

개선할 요소

로딩 관련

• 리소스 크기 줄이기: minify, tree shaking, gzip, brotli, ...
• 리소스 나눠서 불러오기: code splitting, lazy loading, ...
• 이미지 크기 줄이기
• 폰트 크기 줄이기
• HTTP 캐시 적용
• HTTP/2 적용
• react-query 캐시 활용

렌더링 관련

• React.memo 활용
• layout shift 최소화: reflow, repaint, ...

개선 과정

리소스 크기 줄이기

리소스 나눠서 불러오기

이미지 크기 줄이기

폰트 크기 줄이기

HTTP 캐시 적용

HTTP/2 적용

react-query 캐시 활용

React.memo 활용

layout shift 최소화

개선 결과

이미지

목표 달성률

100%