Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Why do big sites (Facebook, Twitter, Google, Tumblr & so on) host their images/css on external domains?

Facebook: http://static.ak.fbcdn.net/

Twitter: http://a0.twimg.com

Google: http://ssl.gstatic.com

Tumblr: https://secure.assets.tumblr.com

Is is performance? Security? organization?

share|improve this question

migrated from webapps.stackexchange.com Mar 3 '12 at 23:43

This question came from our site for power users of web applications.

4 Answers 4

up vote 42 down vote accepted

@toomanyairmiles is partially correct - the purpose of this technique is to allow parrallel connections from the web-browser to the server. Web browsers should allow a minimum of two simultaneous connections to a single host, but many new browsers can manage up to 60. Regardless, concurrent simultaneous connections between browser and webserver(s) is a major speed bottleneck.

From Google's resource:

The HTTP 1.1 specification (section 8.1.4) states that browsers should allow at most two concurrent connections per hostname (although newer browsers allow more than that: see Browserscope for a list). If an HTML document contains references to more resources (e.g. CSS, JavaScript, images, etc.) than the maximum allowed on one host, the browser issues requests for that number of resources, and queues the rest. As soon as some of the requests finish, the browser issues requests for the next number of resources in the queue. It repeats the process until it has downloaded all the resources. In other words, if a page references more than X external resources from a single host, where X is the maximum connections allowed per host, the browser must download them sequentially, X at a time, incurring 1 RTT for every X resources. The total round-trip time is N/X, where N is the number of resources to fetch from a host. For example, if a browser allows 4 concurrent connections per hostname, and a page references 100 resources on the same domain, it will incur 1 RTT for every 4 resources, and a total download time of 25 RTTs.

So the way to get around this is to "shard' the requests to either different domains, or hosts:

Again, from the same Google resource:

Balance parallelizable resources across hostnames. Requests for most static resources, including images, CSS, and other binary objects, can be parallelized. Balance requests to all these objects as much as possible across the hostnames. If that's not possible, as a rule of thumb, try to ensure that no one host serves more than 50% more than the average across all hosts. So, for example, if you have 40 resources, and 4 hosts, each host should serve ideally 10 resources; in the worst case, no host should serve more than 15. If you have 100 resources and 4 hosts, each host should serve 25 resources; no one host should serve more than 38.

But, there's one more piece to the puzzle. Each request normally comes with it's own overheads, normally in the form of cookies. Static elements like images, CSS and JavaScript don't need to transmit cookie data, so serving them from cookie-less (sub)domains can result in faster Round Trips:

Static content, such as images, JS and CSS files, don't need to be accompanied by cookies, as there is no user interaction with these resources. You can decrease request latency by serving static resources from a domain that doesn't serve cookies. This technique is especially useful for pages referencing large volumes of rarely cached static content, such as frequently changing image thumbnails, or infrequently accessed image archives. We recommend this technique for any page that serves more than 5 static resources. (For pages that serve fewer resources than this, it's not worth the cost of setting up an extra domain.)

To reserve a cookieless domain for serving static content, register a new domain name and configure your DNS database with a CNAME record that points the new domain to your existing domain A record. Configure your web server to serve static resources from the new domain, and do not allow any cookies to be set anywhere on this domain. In your web pages, reference the domain name in the URLs for the static resources.

share|improve this answer
    
very nice answer,+1. –  undone Mar 4 '12 at 3:23
    
Great post Mr. Hudson –  Baumr Nov 27 '12 at 14:58

Web browsers can only download two items at once, so the more you use resources hosted on external domains the faster a page loads. This applies to everything from images to javascripts.

Many companies also use a CDN, a tool which ensures the end user gets their data from a server that is geographically close to them, which also increases site performance by reducing the roundtrip time for resource requests.

share|improve this answer

Large sites move their static content (images, JS & CSS files) to a Content Delivery Network or CDN as deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user's perspective.

As the CDN has a different domain name, it also provides domain sharding benefits.

share|improve this answer

The 2-item restriction is not an issue anymore. While it's a recommendation of the HTTP spec, all modern browsers allow at least 6 concurrent connections. See the Connections Per Hostname column here:

http://www.browserscope.org/?category=network&v=top

(BTW, I'm new here and can't comment on posts yet, so if anyone feels this should be relegated to a comment instead of an answer, feel free.)

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.