[FE] 웹 성능 최적화

[airman5573]

요약

웹 성능 최적화를 진행했습니다!

최적화 전

최적화 후

리소스 크기 줄이기

번들(js)파일 크기 줄이기

• 페이지별로 lazy loading을 적용하여 필요한 페이지만 불러왔습니다
• aggressive code splitting을 적용하여 파일을 더 잘개 쪼갰습니다(캐시에 더 좋습니다)
• webpack + babel + terser 조합 대신 webpack + esbuild + esbuild-minifier를 사용해서 번들 파일의 크기를 약 30% 줄였습니다.

brotli 적용

• nginx에 gzip대신 brotli를 적용했습니다. 리소스 압축률이 약 5% 증가했습니다.

이미지 용량 줄이기

• 이미지 압축 프로그램을 사용해 로고 이미지 용량를 80% 낮추었습니다
• woff2폰트를 사용함으로써 폰트 용량을 40% 낮추었습니다.

HTTP 캐시

• index.html은 캐싱하지 않도록 설정했습니다
• 그 외의 모든 리소스는 캐싱하도록 설정했습니다. 코드가 바뀌면 index.html가 불러오는 js파일명이 바뀌기 때문에 재배포시에 캐싱이 무효화 됩니다. 코드에 변경사항이 없을때는 모두 캐시가 되어서 사용자 경험에 좋습니다.

HTTP/2 적용

• nginx에 http1.1대신 http2를 적용했습니다. 덕분에 한번에 불러들이는 리소스의 양이 더 늘어났습니다.

Layout Shift 줄이기

• image에 aspect-ratio를 설정해 layout shift를 줄였습니다.

aspect-ratio 적용 전

aspect-ratio 적용 후

[airman5573]

이전에 실수로 main에 merge해서 develop으로 다시 PR날립니다!