High Performance Web Sites blog

It’s important to make resources (images, scripts, stylesheets, etc.) cacheable so your pages load faster when users come back. A recent study from Website Optimization shows that the top 1000 home pages average over 50 resources per page! Being able to skip 50 HTTP requests and just read those resources from the browser’s cache dramatically speeds up pages.

This is covered in my book (High Performance Web Sites) and YSlow by Rule 3: Add an Expires Header. It’s easy to make your resources cacheable – just add an Expires HTTP response header with a date in the future. You can do this in your Apache configuration like this:

<FilesMatch "\.(gif|jpg|js|css)$">
  ExpiresActive On
  ExpiresDefault "access plus 10 years"
</FilesMatch>

That part is easy. The hard part is revving your resource filenames when you make a change. If you make mylogo.gif cacheable for 10 years and then publish a modified version of this file to your servers, users with the old version in their cache won’t get the update. The solution is to rev the name, perhaps by including the file’s timestamp or version number in the URL. But which is better: mylogo.1.2.gif or mylogo.gif?v=1.2? To gain the benefit of caching by popular proxies, avoid revving with a querystring and instead rev the filename itself. Continue Reading »

I was in Portland for OSCON last week. There were many talks that attracted my attention - so many that I couldn’t get to them all. If you missed some talks, or didn’t make it to OSCON, check out this great effort capturing Oscon in 37 minutes. Gregg Pollack asked 45 speakers to summarize their talk in 30 seconds. Most people took longer (37 * 60 / 45 = 49.3 seconds), but still, to get a taste of 45 sessions in a 37 minute video is pretty awesome. If you had attended each session it would’ve taken over 34 hours! You can jump straight to the segment for any speaker (here’s mine), and links to each speaker’s slides are displayed.

Eric Miraglia wrote a post yesterday called Combo Handler Service Available for Yahoo-hosted JS. One of the advantages of YUI over other JavaScript frameworks is its à la carte capabilities. Developers can choose just the parts they want, rather than being saddled with the whole kit and caboodle. It’s great to download fewer bytes, but choosing a subset of modules results in downloading multiple external scripts, something that’s bad for performance and costs YSlow points. That’s where Eric’s post comes in.

The Combo Handler Service lets developers choose a customized subset of modules and have them served as a single HTTP request from Yahoo!’s worldwide CDN for faster delivery. Each module (file) is listed in the querystring. As an example, Eric shows that loading the YUI Rich Text Editor the old way would require downloading six separate scripts:

<script src=”http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js”>
</script>
<script src=”http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js”>
</script>
<script src=”http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js”>
</script>
<script src=”http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js”">
</script>
<script src=”http://yui.yahooapis.com/2.5.2/build/button/button-min.js”>
</script>
<script src=”http://yui.yahooapis.com/2.5.2/build/editor/editor-beta-min.js”>
</script>

This is reduced to a single HTTP request by using the Combo Handler:

<script src=”http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&
2.5.2/build/container/container_core-min.js&2.5.2/build/menu/menu-min.js&
2.5.2/build/element/element-beta-min.js&2.5.2/build/button/button-min.js&
2.5.2/build/editor/editor-beta-min.js”>
</script>

It’s important that developers using Combo Handler pay particular attention that they get the dependency order correct. I created the YUI Combo Handler: preserving order test page to show what happens if prerequisites are listed incorrectly. In this page instead of putting editor-beta-min.js as the last querystring parameter, I make it the first parameter. Not surprisingly, the page produces JavaScript errors. It would be great if Combo Handler ensured that the response had all the necessary prerequisites in the right order. With this enhancement the single request would be much simpler:

<script src=”http://yui.yahooapis.com/combo?2.5.2/build/editor/editor-beta-min.js”>
</script>

This is a great announcement. Web developers using YUI can now get a customized rollup hosted on Yahoo!’s CDN! This is the best of all worlds - reduced download size, fewer HTTP requests, and CDN hosting. I encourage other JavaScript frameworks to adopt YUI’s à la carte flexibility. Perhaps Google Ajax Libraries could then support features to serve up customized builds similar to what Combo Handler does. Well done.

This week I co-chaired Velocity, the web performance and operations conference from O’Reilly. It was great! Jesse and I told the story about how the conference came about. When we proposed the conference we believed there was a community of performance and operations engineers that needed a forum to share and learn, and the attendance at Velocity confirmed this. Velocity sold out with over 600 attendees!

The lineup of speakers was great. There was a lot of material packed in a 2-day conference. I stayed in the Performance track, but wanted to attend every session in the Operations track, too. Many speakers shared their slides, and there are videos and photos from some of the talks.

Continue Reading »

In my first book, High Performance Web Sites, I presented 14 rules for making web pages faster. I’ve got some good news and some bad news. Bad news first: there are more than 14 things you have to do to speed up your pages. The good news is I’ve started another book that describes more best practices for web performance. The working title is High Performance Web Sites, Part 2. Here’s the set of rules I have so far:

1. Split the initial payload
2. Load scripts without blocking
3. Don’t scatter scripts
4. Split dominant content domains
5. Make static content cookie-free
6. Reduce cookie weight
7. Minify CSS
8. Optimize images
9. Use iframes sparingly
10. To www or not to www

Continue Reading »

At Web 2.0 Expo today I announce the release of Cuzillion. The tag line is ‘cuz there are zillion pages to check. It’s indispensable for people like me who are always pushing browsers to their limit trying to figure out how to squeeze out a little more performance.

I’m constantly thinking of or being asked about how browsers handle different sets of resources loaded in various ways. Before I would open an editor and build some test pages. Firing up a packet sniffer I would load these pages in different browsers to diagnose what was going on. I was starting my research on advanced techniques for loading scripts without blocking and realized the number of test pages needed to cover all the permutations was in the hundreds. That was the birth of Cuzillion. Continue Reading »

This Thursday, April 24, at 10am PDT I’m doing a webcast entitled “Even Faster Web Sites”. This is a new type of event for O’Reilly and I’m excited to try it out. I’ll do 30 minutes of talking with online slides and demos, followed by questions from listeners. There is a limit to the number of people who can attend, so please register in advance.

I’ll be speaking at Web 2.0 Expo in San Francisco April 25 at 1:30pm. My talk is called Even Faster Web Sites. This is my next set of performance best practices including how to load scripts without blocking and the dangers of inline scripts. If you’re thinking of coming please the discount code “websf08sbg” to save an extra 10%.

A lot of blogging and follow-up discussion ensued with the announcement that IE8 supports six connections per host. The blogs I saw:

• IE8: The Performance Implications
• IE8 speeds things up
• IE8: 6 Connections Per Host
• IE 8 and Performance
• Testing IE8.s Connection Parallelism
• IE 8 Connection Parallelism Issues

It’s likely that Firefox 3 will support 6 connections per server in an upcoming beta release, which means more discussion is expected. I wanted to pull all the facts into one place and make several points that I think are important and interesting. Specifically I talk about:

• the HTTP/1.1 RFC
• settings for current browsers
• upperbound of open connections (cool!)
• effect of proxies
• will this break the Internet?

Continue Reading »

IE8 Beta 1 has several performance improvements listed in the release notes. Many of these improvements center around the DOM and JavaScript execution. And their announcement about stricter standards compliance is a great move forward. There are three changes that are big and relate to my performance best practices: 6 downloads per hostname, loading scripts in parallel (the biggest improvement!), and support for data: URIs.

Continue Reading »