(thread migrated from sourceforge forum - originally posted 8/16/2008)
Hi Pat,
I’ve just read through “High Performance Web Sites Essential Knowledge for Front-End Engineers”.
A good read but I think I’m 90% there anyway.
In it Steve Souders suggests using and not for external style sheets.
Out of intrigue I ran a short test and found my site loaded quicker with not .
With link:
[url=http://www.webpagetest.org/result/7NT/1/details/]http://www.webpagetest.org/result/7NT/1/details/[/url]
[url=http://www.webpagetest.org/result/7NF/1/details/]http://www.webpagetest.org/result/7NF/1/details/[/url]
With style:
[url=http://www.webpagetest.org/result/7NS/1/details/]http://www.webpagetest.org/result/7NS/1/details/[/url]
[url=http://www.webpagetest.org/result/7NA/1/details/]http://www.webpagetest.org/result/7NA/1/details/[/url]
Using a link appears to delay the opening of further DNS lok-ups while style does not.
Am I correct in this interpretation?
Does this method therefore undermine the suggested two hostnames maximum as documented?
It seems CDNs should be my next step.
Do you know of any free ones I could try?
cheers
mike
I’ll ping Dave Artz and have him weigh in on the vs results but just looking at your test results it does look like causes IE7’s renderer to not open up the extra parallel connections and is indeed faster. Be interesting to see if the same holds true with IE8.
As to the CDN’s,
You can try Velocix - [url=http://www.velocix.com/pr290408a.php]http://www.velocix.com/pr290408a.php[/url]
They offer free CDN services up to 500GB per month. From what I can tell though it’s built on top of S3 and every time I have seen someone run a performance test trying to use S3 as a CDN it actually seemed to introduce more latency rather than eliminate it. It’s worth testing though.
Coral Cache is technically a CDN but it is more for dealing with crushing load spikes rather than increased performance and also generally slows down your pages if you use it.
Another viable option though not entirely free (but REALLY cheap) is to use something like SimpleCDN where you pay a fee per object (as low as USD$0.10) and there are no bandwidth or download limits.
@import basically allows the browser to continue rendering the page, and when it finishes loading, applies the styles.
There are conflicting views on whether this is a better user experience. For example, is it okay that the user sees unstyled text at 0.5 seconds until the CSS downloads at 1.2 seconds, and things rearrange? Visually, that’s what’s happening (see the start render line showing at 0.5 seconds in the @import example, and 1.2 seconds in the .
I do know some developers (not designers) that do think @import is preferable. Most designers want the design to be in tact from the start to make a good impression. I tend to side with the latter crowd, but it’s worth exploring and paying attention to the visual rendering (not just Pagetest results). Throttle your bandwidth with Charles Proxy and look at what slower connections do.
What is curious about the test, however, is that if you look at the @import example: [url=http://www.webpagetest.org/result/7NS/1/details/]http://www.webpagetest.org/result/7NS/1/details/[/url]
Notice that the request for bg.sprite2.png starts even before the CSS starts downloading - this is impossible. The other test has it right.
I then looked at the HTML source - you are inlining some duplicative CSS, including the bg.sprite2.png. I would recommend removing your inline CSS and re-running the test.
I would also consider losing those extra domains and sticking with one static domain (at most, 2) - DNS lookups are not something you want to take lightly, even though Pagetest tells you the times are short, these times vary by ISP and we have seen 2 second DNS lookup times for sites as popular as the NYTimes (well, popular in the U.S., anyway).
-Dave