Amazon S3에서 호스팅되고 CloudFront를 통해 제공되는 정적 웹 사이트의 지연 시간 문제를 해결하려면 어떻게 해야 하나요?

5분 분량

웹 사이트의 정적 콘텐츠가 Amazon Simple Storage Service(S3) 버킷에서 호스팅되고 Amazon CloudFront 배포를 통해 사용자에게 제공됩니다. 웹 사이트의 콘텐츠가 느리게 로드되거나 TTFB(Time To First Byte) 지표가 높은 것으로 표시됩니다. 웹사이트의 정적 콘텐츠를 로드할 때 발생하는 지연 문제를 해결하고 싶습니다.

간략한 설명

웹 사이트의 정적 콘텐츠를 로드할 때 발생하는 지연 시간 문제를 해결하려면 다음 이벤트 중 지연 시간에 영향을 미치는 이벤트를 식별합니다.

클라이언트가 도메인 이름에 대한 DNS 쿼리를 보내는 경우(DNS 조회 프로세스)
클라이언트가 SSL/TLS 협상을 포함하여 웹 서버(CloudFront 콘텐츠 전송 네트워크)로 요청을 보내는 경우
CloudFront가 요청을 처리하고 캐시에서 콘텐츠를 제공하거나 CloudFront가 요청을 오리진(Amazon S3)에 전달하는 경우

이러한 이벤트의 성능은 다음에 따라 달라집니다.

로컬 시스템의 웹 브라우저 및 리소스
로컬 네트워크
로컬 DNS 서버
로컬 라우터, 방화벽 또는 프록시
업스트림 DNS 서버
인터넷 서비스 공급자
Amazon S3 및 CloudFront

해결 방법

지연 시간에 영향을 미치는 이벤트를 식별합니다. 웹 브라우저의 개발자 도구를 사용하여 웹 사이트 콘텐츠 요청 내에서 각 구성 요소의 성능을 확인합니다. 예를 들어 Mozilla Firefox를 사용하는 경우 MDN web docs 웹 사이트에서 Firefox Developer Tools 및 Network request details를 참조하십시오.

지연 시간에 영향을 미치는 이벤트를 확인한 후 해당 이벤트의 시간을 줄이기 위한 다음 고려 사항을 검토합니다.

클라이언트가 도메인 이름에 대한 DNS 쿼리를 보내는 경우(DNS 조회 프로세스)

DNS 조회 프로세스를 최적화하는 다음 방법을 고려하세요.

클라이언트 측 DNS 캐싱을 활성화하거나 증가시킵니다.
로컬 DNS 서버에서 DNS 캐시를 설정하거나 증가시킵니다.
인터넷 서비스 공급자의 확인자 DNS 서버가 지연 시간을 초래하는 경우 퍼블릭 DNS 서버를 사용하는 것이 좋습니다.

클라이언트가 SSL/TLS 협상을 포함하여 웹 서버(CloudFront 콘텐츠 전송 네트워크)로 요청을 보내는 경우

클라이언트와 서버 간 연결 시간을 줄일 수 있는 다음 방법을 고려하세요.

웹 캐싱, 인터넷 서비스 공급자 또는 네트워크 경로를 수정하여 로컬 네트워크 성능을 최적화합니다. 웹 브라우저와 CloudFront 간의 연결은 다음 변수에 따라 달라집니다.

로컬 네트워크
인터넷 서비스 공급자의 대역폭
클라이언트와 가장 가까운 CloudFront 접속 지점(POP) 위치로의 네트워크 라우팅 또는 홉 필요

모범 사례는 가장 최적화된 웹 리소스 경로를 구성하는 것입니다. 또한 올바른 DNS 확인자를 사용하면 웹 브라우저에서 가장 가까운 올바른 POP 위치를 찾을 수 있습니다.
로컬 캐싱을 사용하여 서버(CloudFront)의 리소스에 대한 요청을 줄입니다. 로컬 캐싱은 CSS, JavaScript 또는 이미지와 같이 자주 변경되지 않는 정적 객체에 특히 유용합니다. Amazon S3에서 호스팅되는 정적 콘텐츠의 경우 객체에 cache-control 헤더를 추가합니다. cache-control 헤더는 일정 시간 동안 웹 사이트 콘텐츠를 브라우저 메모리 또는 로컬 디스크에 보관하도록 웹 브라우저에 지시합니다. 이 시간 동안 웹 브라우저는 인터넷을 통해 콘텐츠를 요청하는 대신 로컬 메모리에서 콘텐츠를 로드합니다. Amazon S3 콘솔을 사용하여 cache-control 헤더를 설정합니다.
로컬 캐싱 HTTP 정방향 프록시가 이미 있는 경우 웹 사이트 콘텐츠에 대해 충분히 큰 캐시 크기를 지정합니다. 이렇게 하면 자주 액세스하는 페이지가 로컬 프록시 캐시에 저장되므로 인터넷을 통해 전송되는 요청 수가 줄어듭니다.

CloudFront가 요청을 처리하고 캐시에서 콘텐츠를 제공하거나 CloudFront가 요청을 오리진(Amazon S3)에 전달하는 경우

캐시에서 더 많은 콘텐츠를 제공하여 오리진에서 오는 콘텐츠에 대한 요청을 줄이면 웹 사이트를 로드할 때의 지연 시간을 줄입니다. 다음을 수행하여 웹 콘텐츠가 대부분 캐시에서 제공되도록 CloudFront 구성을 최적화하세요.

Amazon S3의 정적 콘텐츠를 제공하는 캐시 동작에 대해 AWS 관리형 캐시 최적화(CachingOptimized) 캐시 정책을 사용합니다.
CloudFront의 정적 콘텐츠에 대한 최소 캐시 시간을 늘립니다. 또는 CloudFront 배포의 기본 동작에 대한 최소 캐시 시간을 늘립니다. 배포의 기본 동작의 최소 캐시 시간을 늘리는 한 가지 방법은 최소 TTL 값을 늘리는 것입니다. 최소 TTL 값을 늘리면 CloudFront는 Amazon S3 오리진에서 객체를 요청하는 대신 객체를 더 오래 캐시합니다.
헤더 또는 쿼리 문자열에 대한 전달 또는 캐시 설정을 검토합니다. CloudFront 캐싱은 선택한 요청 헤더를 기준으로 캐싱 및 쿼리 문자열 전달 및 캐싱에 대한 값을 모두 **없음(캐싱 개선)**으로 설정할 때 최적화됩니다. 이러한 값을 기반으로 전달하거나 캐시해야 하는 경우 영향을 받는 헤더와 쿼리 문자열을 지정해야 합니다.
참고: Amazon S3 오리진으로 쿠키를 전달하도록 CloudFront를 구성하지 마십시오. Amazon S3는 쿠키를 처리하지 않습니다.
CloudFront 배포에서 압축을 활성화합니다. 압축을 활성화하면 CloudFront가 엣지 또는 POP 로케이션에서 자동으로 객체를 압축한 다음 압축된 객체를 제공합니다. 이렇게 하면 다운로드 시간이 단축되고 페이지 로드 성능이 개선됩니다.
정적 콘텐츠에 별도의 캐시 동작을 사용합니다. 정적 콘텐츠와 동적 콘텐츠에 서로 다른 캐시 동작을 사용하는 것이 모범 사례입니다.

다음 단계에 따라 정적 콘텐츠에 대한 최적의 캐시 설정을 구성합니다.

CloudFront 콘솔을 엽니다.
배포 목록에서 웹 사이트의 정적 콘텐츠를 제공하는 배포를 선택합니다.
동작 탭을 선택합니다.
정적 콘텐츠에 대한 새 동작을 생성하거나 정적 콘텐츠의 경로 패턴에 대한 기존 동작을 편집합니다. 기존 동작을 편집하려면 동작을 선택한 다음 편집을 선택합니다.
캐시 키 및 오리진 요청에서 캐시 정책 및 오리진 요청 정책을 선택합니다.
캐시 정책에서 **캐시 최적화(CachingOptimized)**를 선택합니다.
오리진 요청 정책의 경우 없음을 선택하거나 비워 둡니다. 오리진 요청 정책은 선택 사항이며 S3 오리진에 대해서는 모범 사례가 아닙니다.
변경 사항 저장을 선택합니다.

Amazon S3에서 호스팅되고 CloudFront를 통해 제공되는 정적 웹 사이트의 지연 시간 문제를 해결하려면 어떻게 해야 하나요?

간략한 설명

해결 방법

관련 정보

관련 콘텐츠