목표

인포크링크의 AWS CloudFront 요청 및 비용 절감을 목표로 합니다.

상세

1. 문제 파악

Cloudwatch를 활용해 가장 요청이 많은 CloudFront를 파악하고, 정적 에셋용 CloudFront와 이미지용 CloudFront를 최적화 대상으로 설정했습니다.

2. 정적 에셋 최적화

사용하지 않음에도 불필요하게 받아오는 chunk 파일의 전체 개수를 줄이기 위해 webpack 설정의 최적화를 진행했습니다. 이 과정에서 웹팩의 splitChunks 설정을 활용해 모듈을 재사용 가능한 작은 청크로 분할했습니다.

3. 이미지 최적화

Cloudfront를 통해 요청되는 이미지 파일의 용량을 줄이기 위해 이미지 품질 및 크기를 하향 조정했습니다. 화면에 렌더링 되는 이미지의 크기에 따라 수치를 다르게 조절하며 이미지 최적화를 진행했습니다. 또한, lazy-loading의 적용이 필요한 이미지에 lazy-loading을 적용했습니다.

결론

• AWS CloudFront 요청을 약 50% 절감했습니다.
• AWS CloudFront 비용을 약 40% 절감했습니다.