1. 이미지 포맷 최적화전통적인 JPEG나 PNG 대신 압축 효율이 높은 최신 포맷을 사용하면 이미지 품질을 유지하면서도 파일 크기를 크게 줄일 수 있습니다.최신 이미지 포맷`WebP``AVIF`이러한 최신 포맷들은 일부 구버전 브라우저에서 지원되지 않을 수 있습니다. 이 경우 요소를 사용해 호환성 문제를 해결할 수 있습니다: 브라우저는 위에서부터 순서대로 지원하는 포맷을 선택하여 표시합니다:AVIF 지원 시 -> image.avif 사용WebP 지원 시 -> image.webp 사용둘 다 미지원 시 -> image.jpg 사용 2. 이미지 사이즈 조정실제 화면에 표시되는 크기보다 큰 이미지는 불필요한 데이터 전송을 야기합니다.최적화 방법서버에서 필요한 크기로 `리사이징`하여 전송`Respo..
반응형
CDN
지난번에 CI/CD를 구축하고 나서 정적 페이지를 호스팅까지 했었다.오늘은 AWS의 CDN(Content Delivery Network) 서비스인 CloudFront를 이용해 정적, 동적 콘텐츠를 배포하고자 한다.[CI/CD 구축] / [CloudFront 정리]1. CloudFront 생성`원본 도메인`을 선택하고, `원본 엑세스`를 원본 엑세스 제어 설정으로 선택하고 `OAC(Origin Access Control)`을 생성한다.*OAC(Origin Access Control) 목적S3 버킷에 대한 직접 접근을 차단CloudFront를 통해서만 S3 콘텐츠에 접근 가능하도록 제한뷰어 프로토콜은 선택사항이지만, HTTPS만 사용하기 위해서 HTTP 요청을 HTTPS로 리다이렉트하도록 설정한다.`기본값 ..
AWS CloudFront란?AWS CloudFront는 AWS의 CDN(Content Delivery Network) 서비스다.CDN(Content Delivery Network) 이란?클라이언트의 콘텐츠 요청으로 서버에서 받아온 콘텐츠를 캐싱하고 이후 같은 요청이 왔을 때, 캐싱해뒀던 데이터를 제공하는 서비스이다.물리적으로 거리가 먼 곳에도 빠르게 요청을 처리할 수 있고 결과적으로 서버의 부하를 낮출 수 있다. Edge Location(Pop) / Regional Edge Cache(REC)Edge Location은 CloudFront 서비스가 콘텐츠를 캐싱하고 클라이언트에게 제공하는 지점 혹은 캐시 서버를 의미한다.만약, 사용자가 요청한 콘텐츠의 캐시가 Edge Location에 있다면 멀리 있는 ..
반응형