This was a presentation for developers rather than designers so I was expecting a lot of information to go over my head, it did, but enough has stuck to write a short post.
Nate Koechley is a Yahoo! frontend engineer and designer based in San Francisco. The bulk of his presentation was based around a twelve step programme to create quicker web pages.
- Make fewer HTTP requests: This refers to combining style sheets and scripts to reduce the amount of communication between your browser and the server. He also recommended using Image Maps, which I thought were considered old hat, but for icon driven navigation I can see how this could work in reducing the need for multiple images.
- Use a CDN: this stands for Content Delivery Network, a way of deploying content from multiple “CDN nodesâ€. This is important for increasing the page load times on sites with a lot of traffic such as MySpace, which uses Akamai.
- Add Expires Headers to cached content: This allows control of caching mechanisms in your browser and is important for dynamic content which has to be downloaded repeatedly because it is not cached correctly.
- gzip components: gzip is a software application used for file compression with 90% browser support. I use Photoshopto optimize images for the web, gzip can apparently compress them by a further 50%.
- CSS at the top of the document: Links to external style sheets should be placed high in the HTML document, and use link rel=”stylesheet” rather than @import for linking.
- Move Script Includes to the bottom of the document: Links to external JavaScript files should be put after the closing body tag. This recently adopted practice is a necessity because page downloads are paused until an externally linked script is fully loaded.
- Avoid CSS expressions: CSS expressions were introduced in Internet Explorer 5.0 and it allows you to to assign a JavaScript expression to a CSS property. CSS expressions aren’t generally used by designers who enjoy the clarity of basic CSS mark up.
- Always link to external CSS and JavaScript files
- Reduce DNS lookups: You can reduce Domain Name System (DNS) lookup traffic by using multiple hosts, therefore distributing content via parallel downloads.
- Minify Javascript: You can compress external CSS and JavaScript file sizes by eliminating white space. You can use a tool called ShrinkSafe to do this or you can do it safely by hand.
- Avoid page redirects
- Turn off ETags: ETags prevent pages from caching.
Very useful. We’re already doing some of these – output from PHP scripts is generally gzip compressed where allowed but we should probably turn it on for other content too. The benefits of this are significant with 90% compression on CSS, JavaScript and HTML.
Actually he didn’t promote image maps, but CSS sprites. There’s an excellent article at A List Apart about that technique.
Ah, that makes more sense! Never done it from scratch myself but used the technique for a star ratings system. Looks really nice but a real pain to do the calculations. I also wonder how well it would degrade on mobile devices – would you just get the huge image or does Pocket IE / Opera Mobile support enough CSS to render correctly?