[FE] 하루스터디 성능 개선 리포트 ‐ 1
- 번들 최적화
- 이미지 최적화
- 폰트 최적화
구글 크롬 개발자도구의 Network 탭을 활용하여 Disable cache, Fast 3G 환경에서 성능을 측정하였습니다.
| \ | 개선 전 | 개선 후 |
|---|---|---|
| 속도 | 2.29s | 1.56s |
| 크기 | 214kB | 89.1kb |
Code splitting을 적용하여 페이지에서 필요한 패키지만 불러올 수 있도록 개선
msw를 포함하여 사용하지 않는 패키지를 제거하기 위해 트리 쉐이킹 작업을 진행(단, 이때 폰트와 관련된 파일들은 트리 제거가 되지 않아야 한다.)
때문에 다음과 같이 packlock.json의 sideEffects 속성을 추가
"sideEffects": [
"./src/fonts/font.css"
]
| \ | 개선 전 | 개선 후 |
|---|---|---|
| 이미지1 | 863kB | 97.7kB |
| 이미지2 | 488kB | 74.1kb |
| 이미지3 | 585kB | 78.6kb |
| 이미지4 | 476kB | 65.6kb |
개선 전
개선 후
- 해상도 줄이기
- png를 jpg로 변환
- webp 형태로 이미지를 변환
이후 Image 컴포넌트를 만들고 picture 태그를 활용하여 이미지를 렌더링
const Image = ({ webpUrl, originUrl, alt }: Props) => {
if (typeof webpUrl === 'string') {
webpUrl = [webpUrl];
}
return (
<picture>
{webpUrl.map((item, index) => (
<source key={index} type="image/webp" srcSet={item} />
))}
<img src={originUrl} alt={alt} />
</picture>
);
};기존 oft 확장자에서 woff, woff2 확장자로 변경하여 폰트 크기 최소화
기존
변경
번들 이후에 불러오는 폰트를 미리 불러와 폰트가 뒤늦게 적용되는 문제를 개선
<head>
// ...
<link href="/fonts/Pretendard-Light.woff2" rel="preload" as="font" type="font/woff2" crossorigin />
<link href="/fonts/Pretendard-Medium.woff2" rel="preload" as="font" type="font/woff2" crossorigin />
<link href="/fonts/Pretendard-Bold.woff2" rel="preload" as="font" type="font/woff2" crossorigin />
<title>하루스터디</title>
</head>개선 전
개선 후
