SXSW: get out the vote
I submitted a proposal for SXSW Interactive: Even Faster Web Sites. SXSW is in Austin, March 13-17, 2009. It’s a great conference with a wide variety of content. John Resig recently announced two talk proposals. Both look great. In the same way, I hope to add a bit more technical content to the conference. I did a book reading last year that was very well attended, so I think there are a significant number of developers attending the conference. This year I hope to relay more techniques for making web pages (especially Web 2.0 pages) faster. The way SXSW works, talks are selected based on votes. If you think it would be good for SXSW, please add a comment by August 29 in support of my talk.
Revving Filenames: don’t use querystring
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. (more…)
Firebug Working Group meeting
This week I hosted the Firebug Working Group meeting at Google. The goal of the Firebug Working Group is to provide an organization for the many volunteers contributing to the Firebug project. Now that Mozilla is dedicating resources to Firebug, I have great hopes that Firebug development will continue at a quicker pace. All three of the Mozilla members were present: John Resig, Rob Campbell, and Jan Odvarko (by phone). Also present or dialed in were John J. Barton, Doug Crockford, Tony Gentilcore, Kevin Hakman, Kyle Scholz, Dion Almaer, Mike Wilcox, Eric Promislow, Stoyan Stefanov, and myself.
Highlights: Firebug 1.2 is nearing final beta. After testing it’ll be promoted to stable. The main focus for the next release is going to be performance, stability, and testing. Some new features are on the todo list, such as adding new CSS rules, viewing bound DOM event handlers, and exporting CSS changes. More details are available in my notes from the meeting. It’s very exciting to have Mozilla more involved, and bodes well for the future of Firebug.
OSCON: 34 hours in 37 minutes
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.
Firebug Lite 1.2 Released
Today Firebug Lite 1.2 was released. This new version was built by Azer Koçulu, creator of pi.debugger. Azer joined the Firebug Working Group, morphed the GUI to look like Firebug, and added it to the Firebug code base.
Firebug Lite is a subset of Firebug that can be used in IE, Opera, and Safari. The previous version provided console.log functionality. In Firebug Lite 1.2, Azer added the ability to inspect DOM elements, track XHRs, and navigate HTML, CSS, and JavaScript. You can embed it in your pages and enable debugging. I prefer creating a Firebug Lite bookmarklet that I can launch on any web page. Instructions and more information are available on the main Firebug Lite page.
I was able to demo this at OSCON today thanks to the folks from Mozilla who are now working on Firebug. As John Resig posted last week, he, Rob Campbell, and Jan Odvarko are going to be focusing on Firebug. Just one week later the benefits from their involvement are already being seen, as Rob quickly got the updates hosted on getfirebug.com. The roadmap for Firebug will be discussed at the upcoming Firefox Summit and the next Firebug Working Group meeting at Google in early August. I’ve been working with Azer testing his releases over the last month. It’s great to have Firebug functionality when I drop into IE. Thanks Azer and Rob!
See You at OSCON
I’ll be up at OSCON in Portland this week. I’m speaking Thursday 2:35pm on Even Faster Web Sites, the next set of performance best practices I’m working on. I’m signing books Thursday 12:20pm at the Powells table, and I’ll be in the Google booth Thursday 4pm. At the Google booth I’ll be doing performance consulting – anyone can stop by and ask questions about their web site’s performance, or we can just fire up a packet sniffer and YSlow to see what jumps out.
There are a lot of great talks this year. Here are a few I’ve earmarked:
- Full-stack Introspection Crash Course by Theo Schlossnagle
- An Open Source Project Called “Failure:” with Josh Berkus. Shane Warden, Ben Collins-Sussman, Brian Fitzpatrick, and Karl Fogel
- Barely Legal XXX Perl by Jos Boumans (entertaining speaker)
- Experience-driven Development: Designers and Developers Working in Harmony by Chris Shiflett and Jon Tan
- Do You Believe in the Users? by Ben Collins-Sussman and Brian Fitzpatrick
- CSS for High Performance JavaScript UI by Gavin Doughtie (this looks really good)
- Using Puppet: Real World Configuration Management by James Turnbull and Luke Kanies (this is at the same time as my talk, but if you’re more interested in ops Luke is doing great stuff)
If you’re going to OSCON please come by and say Hi.
YUI’s Combo Handler CDN Service
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.
Women are Geeks (too!)
As a father of three girls I watch for indicators of the level to which women are represented in the tech community. I decided to write a blog post about this while sitting at the ACM Awards Banquet a week ago. My experience coming from tech companies, including Yahoo! and Google, is that women are incredibly, and sadly, underrepresented in engineering. That’s why I was pleased to see that so many of the ACM award winners were women. I generated a chart showing the number of woman ACM award winners over the last 30 years. It’s a small sample size, so I plotted the moving average to smooth out the spikes.
I’m happy to see the number of woman awardees is increasing, with a real jump in the last two years. But I have two reservations. The percentage of woman winners is low, averaging only 5% over the last 30 years with a spike to 10% in the last two years. Also, most ACM award winners come from academia. I’m concerned that an analysis of similar award winners from industry would reveal even lower percentages for women. (more…)
Velocity Wrap-up
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.
Velocity Product Launch: KITE 2.0
A few product launches are being announced at Velocity. I was able to get an early look at KITE 2.0 from Keynote. I’ve worked with Keynote for years. They have a strong platform of services for measuring web site availability and performance. KITE, Keynote’s Internet Testing Environment, is the customer tool for creating test scripts. KITE 2.0 has many new features that caught my eye:
- Test scripts can include taking actions based on DOM events, such as the creation of a DOM element or even the contents of a DOM element matching a specified pattern.
- An intuitive HTTP profile is displayed in the client app.
- Tests can be executed at five cites worldwide on the Keynote backbone.
- It’s free! You don’t need to be a Keynote customer to use it.
KITE 2.0 is available through an early adopters program. There are some features I’d like to see added: the ability to execute a test script multiple times, exporting test results measured from my client, and getting time measurements that correspond to certain events in the page. I recommend trying this early version if you’re looking for a tool to record and execute web page test scripts.