1

I'm building a new site, and during the foundation stage I'm trying to assess the best way to load images. Browsers have a limit of 2-6 items it can load concurrently (images/css/js). Through the grapevine I've heard various different methods, but no definitive answer on which is actually faster.

Relative URLs:

background-image: url(images/image.jpg);

Absolute URLs:

background-image: url(http://site.com/images/image.jpg);

Absolute URLs (with sub-domains):

background-image: url(http://fakecdn.site.com/images/image.jpg);
  1. Will a browser recognize my "fakecdn" subdomain as a different domain and load images from it concurrently in a separate thread?
  2. Do images referenced in a @import CSS file load in a separate thread?
Nikola K.
  • 7,093
  • 13
  • 31
  • 39
  • read this: http://stackoverflow.com/questions/5158444/performance-absolute-vs-relative-urls – Book Of Zeus Aug 30 '11 at 01:44
  • @Book I read that link before making this post, but it left questions unanswered, like if the external CDN needed to be a separate FQDN. I also am still wondering about part 2 of my question. –  Aug 30 '11 at 03:57

2 Answers2

3

The HTTP 1.1 spec suggests that browsers do not open more than two connections to a given domain.

Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.

So, if you are loading many medium sized images, then it may make sense to put them on separate FQDNs so that the 2 connection limit is not the bottleneck. For small images, the need of a new socket connection to each FQDN may outweigh the benefits. Similarly, for large images, the client network bandwith may be the limiting factor.

If the images are always displayed, then using a data uri may be fastester, since no separate connection is required, and the images can be included in the stream in the order they are needed.

However, as always with optimizing for performance, profile first!

See

mdma
  • 56,943
  • 12
  • 94
  • 128
  • I thought, and as stated in the referenced wiki article that anything using the Data URI scheme requires the asset to be downloaded each time as caching is not possible. A shared asset between pages would require it to be loaded each time a page is loaded, even the same page. –  Aug 30 '11 at 03:54
  • Also, do you have any insight on as to the question regarding images referenced in a `@import` CSS file. I know that a CSS using `` which uses `@import` to include other CSS files is excluded from this connection limit. –  Aug 30 '11 at 03:58
  • About the data URI - you could embed the data-uri images in a non-changing resource, such as the CSS files so these can be cached and loaded once. I didn't know that @import was excluded from the connection limit - can you post a link to that? This article and the pagespeed software may be helpful for optimizing load times. http://code.google.com/speed/page-speed/docs/rtt.html – mdma Aug 30 '11 at 10:15
1

For lots of small images, social media icons being a good example, you'll also want to look into combining them into a single sprite map. That way they'll all load in the same request, and you just have to do some background-positioning when using them.

Matt
  • 2,982
  • 1
  • 22
  • 23