2021. 8. 29. 02:02ㆍ웹 프론트엔드 깊게 이해하기/성능 최적화
Cloud Front 의 자세한 사용법에 대해 알고 싶다면 다음의 두 글을 참고하시기 바랍니다
(이 글을 읽으려면 Cloud Front Quick Start 글의 캐싱 정책 설정 부분만이라도 읽어보시길 권장드립니다).
https://codingmoondoll.tistory.com/entry/Cloud-Front-%EB%9E%80
Cloud Front 란?
간단히 말해서, 직접 만들 수 있는 CDN(Content Delivery Network) 라고 볼 수 있습니다. CDN 은 간단히 말해 세계에 널리 퍼진 중계서버들의 집합이라고 보시면 됩니다. 보통 S3 와 같은 일반적인 정적 호
codingmoondoll.tistory.com
클라우드 프론트 Quick Start
실습용 파일 준비 Cloud Front 를 직접 활용해보기 위해 간단한 웹사이트를 위한 HTML/CSS/Javascript 파일들을 준비해봅시다. 저는 과거에 제가 사용했던 포트폴리오 웹사이트를 사용하겠습니다. S3 에
codingmoondoll.tistory.com
클라우드 프론트에서 제공하는 기능들을 최대한 활용하여 Load 성능을 끌어올리기 위해서는 다음의 두가지 사항을 지켜주면 됩니다.
- 전 세계의 엣지 포인트를 모두 이용하도록 설정
- 캐싱 적용
- 요청에 대한 응답시 파일을 gzip 으로 압축하도록 설정
전 세계의 엣지 포인트를 모두 이용하도록 설정
배포 > (배포된 아이템) > 일반
단순히 최상단 선택지에 체크해주시면 됩니다.
캐싱 적용
배포 > (배포된 아이템) > 동작
여기서 첫번째 정책 설정을 클릭합니다. 이름과 설명은 임의대로 지어도 상관없습니다.
본인이 원하는 정확한 TTL 값이 있다면 세가지 항목 모두 동일한 값으로 설정해도 무관합니다. 하지만 S3 에서 설정된 자원의 자체 캐싱 정책을 따르는 것이 일반적이기 때문에 저는 최소 TTL 을 가장 작은 값인 1로, 최대 TTL 을 1년 정도로 넉넉하게 잡아버리겠습니다. 자원에 아무런 캐싱 정책이 설정되어 있지 않을 경우, 저는 딱 하루의 캐싱 시간이 설정되도록 기본 TTL 을 설정했습니다(사실 이게 클라우드 프론트가 제공하는 기본값입니다).
저는 S3에서 특정 자원에 대한 캐싱 정책을 따로 세운적이 없기 때문에, 모든 자원의 TTL 은 86400초, 즉 하루로 설정될 것입니다.
요청에 대한 응답시 파일을 압축하도록 설정
배포 > (배포된 아이템) > 동작 > 캐시 정책 생성
Gzip, Brotli 압축지원에 체크합니다. Brotli 압축 형식은 신형 브라우저에, Gzip 압축 형식은 구형 브라우저에 자원을 전달할 때 적용됩니다.
'웹 프론트엔드 깊게 이해하기 > 성능 최적화' 카테고리의 다른 글
| 프론트엔드 성능 최적화 - 5. 웹 폰트 최적화 (3) | 2021.08.29 |
|---|---|
| 프론트엔드 성능 최적화 - 4. 이미지 파일 최적화 (1) | 2021.08.29 |
| 프론트엔드 성능 최적화 - 3. 코드 스플리팅 & 트리 쉐이킹 (2) | 2021.08.29 |
| 프론트엔드 성능 최적화 - 2. 소스코드 최적화 (2) | 2021.08.29 |
| 프론트엔드 성능 최적화 - 1. 문제 인식 (0) | 2021.08.29 |