큰 사이트가 왜 외부 도메인에서 이미지 / CS를 호스팅합니까?


43

Facebook, Twitter 및 Google과 같은 사이트가 다음과 같은 외부 도메인에 이미지와 CSS를 호스팅하는 이유는 무엇입니까?

  • 페이스 북 : static.ak.fbcdn.net
  • 트위터: a0.twimg.com
  • 구글 : ssl.gstatic.com

질문 :

  • 성능입니까? 또는 보안?

답변:


53

@toomanyairmiles는 부분적으로 정확합니다.이 기술의 목적은 웹 브라우저에서 서버로 병렬 연결을 허용하는 것입니다. 웹 브라우저는 단일 호스트에 대해 최소 2 개의 동시 연결을 허용해야 하지만 많은 새 브라우저는 최대 60 개를 관리 할 수 ​​있습니다.

에서 구글의 자원 :

HTTP 1.1 사양 (섹션 8.1.4)에 따르면 브라우저는 호스트 이름 당 최대 두 개의 동시 연결을 허용해야합니다 (최신 브라우저는 그 이상을 허용하지만 목록은 Browserscope 참조). HTML 문서에 한 호스트에서 허용되는 최대 값보다 많은 리소스 (예 : CSS, JavaScript, 이미지 등)에 대한 참조가 포함 된 경우 브라우저는 해당 수의 리소스에 대한 요청을 발행하고 나머지는 큐에 넣습니다. 일부 요청이 완료되면 브라우저는 큐에서 다음 수의 리소스에 대한 요청을 발행합니다. 모든 리소스를 다운로드 할 때까지 프로세스를 반복합니다. 즉, 페이지가 단일 호스트에서 X 개 이상의 외부 리소스를 참조하는 경우 (여기서 X는 호스트 당 허용되는 최대 연결 수) 브라우저는 X 리소스마다 하나씩 RTT가 발생하는 한 번에 X를 순차적으로 다운로드해야합니다. 총 왕복 시간은 N / X입니다. 여기서 N은 호스트에서 가져올 리소스의 수입니다. 예를 들어 브라우저가 호스트 이름 당 4 개의 동시 연결을 허용하고 페이지가 동일한 도메인에서 100 개의 리소스를 참조하는 경우 4 개의 리소스마다 1 개의 RTT와 총 25 개의 RTT 다운로드 시간이 발생합니다.

따라서이 문제를 해결하는 방법은 요청을 다른 도메인이나 호스트로 "파쇄"하는 것입니다.

다시 한 번 동일한 Google 리소스에서

호스트 이름간에 병렬화 가능한 자원의 균형을 유지하십시오. 이미지, CSS 및 기타 이진 객체를 포함한 대부분의 정적 리소스에 대한 요청을 병렬화 할 수 있습니다. 호스트 이름 전체에서 가능한 한 이러한 모든 객체에 대한 요청의 균형을 유지하십시오. 이것이 불가능하다면, 어떤 호스트도 모든 호스트에서 평균보다 50 % 이상 더 많은 서비스를 제공하지 않도록하십시오. 예를 들어 40 개의 리소스와 4 개의 호스트가있는 경우 각 호스트는 이상적으로 10 개의 리소스를 제공해야합니다. 최악의 경우 15 개 이상의 호스트를 제공하지 않아야합니다. 100 개의 리소스와 4 개의 호스트가있는 경우 각 호스트는 25 개의 리소스를 제공해야합니다. 한 호스트는 38 명을 넘지 않아야합니다.

그러나 퍼즐에는 한 가지 더 있습니다. 각 요청에는 일반적으로 쿠키 형태의 자체 오버 헤드가 있습니다. 이미지, CSS 및 JavaScript와 같은 정적 요소는 쿠키 데이터를 전송할 필요가 없으므로 쿠키가없는 (하위) 도메인에서 쿠키를 제공하면 왕복이 더 빨라질 수 있습니다.

이미지, JS 및 CSS 파일과 같은 정적 컨텐츠에는 이러한 자원과 사용자의 상호 작용이 없으므로 쿠키를 동반 할 필요가 없습니다. 쿠키를 제공하지 않는 도메인에서 정적 리소스를 제공하여 요청 대기 시간을 줄일 수 있습니다. 이 기법은 자주 변경되는 이미지 썸네일 또는 자주 액세스하지 않는 이미지 아카이브와 같이 거의 캐시되지 않은 정적 컨텐츠를 참조하는 페이지에 특히 유용합니다. 5 개 이상의 정적 리소스를 제공하는 모든 페이지에이 기술을 권장합니다. 이보다 적은 리소스를 제공하는 페이지의 경우 추가 도메인을 설정하는 비용이 들지 않습니다.

정적 콘텐츠를 제공하기 위해 쿠키가없는 도메인을 예약하려면 새 도메인 이름을 등록하고 새 도메인을 기존 도메인 A 레코드를 가리키는 CNAME 레코드로 DNS 데이터베이스를 구성하십시오. 새 도메인의 정적 리소스를 제공하도록 웹 서버를 구성하고이 도메인의 어느 곳에도 쿠키를 설정하지 마십시오. 웹 페이지에서 정적 자원의 URL에서 도메인 이름을 참조하십시오.


13

과거에는 웹 브라우저가 한 번에 두 항목 (현재 6 개 이상) 만 다운로드 할 수 있었으므로 다양한 도메인에서 리소스를 다운로드하는 것이 단일 도메인보다 빠릅니다. 이것은 이미지에서 자바 스크립트까지 모든 것에 적용됩니다.

또한 많은 회사는 최종 사용자가 지리적으로 가까운 서버에서 데이터를 가져 오는 데 도움이되는 도구 인 CDN 을 사용하며 리소스 요청에 대한 왕복 시간을 줄여 사이트 성능을 향상시킵니다.


7

지리적으로 분산 된 여러 서버에 콘텐츠를 배포 하면 사용자의 관점에서 페이지를 더 빨리로드 할 수 있으므로 대규모 사이트는 정적 콘텐츠 (이미지, JS 및 CSS 파일)를 콘텐츠 전송 네트워크 또는 CDN으로 이동합니다 .

CDN의 도메인 이름이 다르므로 도메인 샤딩 이점도 제공 합니다 .



-1

외부 도메인 이름을 사용하는 동안 쿠키가 헤더에 전송되는 동안 원하지 않는 쿠키가 여전히 필요하므로 쿠키를 설정하는 것이 훨씬 빠릅니다.

그렇습니다. 속도 목적으로 여전히 필요합니다.


수락 된 답변에 이미 쿠키가 외부 도메인으로 전송되지 않았다고 나와 있습니다. 이 답변은 다른 답변에서 아직 다루지 않은 내용은 없습니다.
Stephen Ostermiller
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.