The Quest for Speed

For web applications today speed is not just about bragging rights, instead speed is a deciding factor in: reducing the learning curve of applications for end users, increasing the adoption rate, improving conversion rates, growing time on site and numerous other metrics for web sites.

Historically, search engine companies (Google, Yahoo!, Bing etc) are among the original innovating web application developers and their success has afforded them with the resources to learn how to scale applications. In particular, Google has been working diligently (as does Yahoo) to contribute to the web developer community, increasing awareness and providing research about creating good experiences with web content. Today they’ve even released their solution to the performance issues surround Domain Name Service (DNS) and with their Google Public DNS project. DNS is the process by which your browser determines which server to query for the pages you request.

It has probably always played a role in the background in some way, but is now a talking point — the speed of a web site is instrumental in how Google determines the rank of your site in search engine result pages. While there may be numerous opinions on the topic, the fact remains that speed is vital to a positive user experience and a healthy eco-system, so those facts make any opinions quite moot. You can now find Google’s opinion on the speed of your web site in Webmaster Tools, in the site performance section (currently still a labs feature). Take a look and see how your site compares to the rest of the web.

WordPress is an extremely popular open source content management system and publishing tool. I contribute to the performance of WordPress via W3 Total Cache, which (from a bird’s eye view) accomplishes a number of goals:

• Make servers more green by reducing the resource demands in delivering dynamic content
• Reduce load time of sites, thereby providing the benefits stated above
• Allow bloggers and other WordPress plugin developers to continue to focus on producing content and easy-to-deploy functionality for WordPress without having to worry about performance penalties / implementation issues or keep an eye on their WordPress installation.

The action items to implement the largest performance wins for web applications traditionally include the following:

• Progressive render: It’s imperative that CSS and JavaScript are properly embedded into web pages to ensure that the user begins to see content displaying as quickly as possible. The term progressive render literally implies that the web site loads instantly with a water fall effect rather than showing users a white page for several seconds and drawing the entire page at once. Proper use of this technique is realized through careful placement and embedding of CSS and JavaScript in the head of the page. As well as loading JavaScript near the end of the page in addition to using pipelining techniques to overcome download limitations in some browsers.
• Reduce HTTP Transactions: This technique takes shape in 3 ways:

  HTTP Compression: the smaller the file, the faster it can be generated, sent and rendered or executed. Gzip or deflate compression is supported by modern browsers and is one of the most fundamental performance wins in web development.

  Minification: the staple technique of Yahoo.com, Google.com and Bing.com for years and instrumental in the “1 second page loads” they appear to have. Combining CSS and JavaScripts respectively, removing white space, comments, line breaks and even inserting CSS and JavaScript inline in the document, (if also compressed) ensures that the least amount of data is sent to the browser.

  Image Sprites: combining multiple images into a single file and using CSS to manipulate them on the page. Since your browser will download a larger image faster (in practice) than numerous smaller images, this is a real performance win when coupled with browser-side caching.

  These methods make sure that there are fewer “calls” to a web server to deliver a page. When it comes to performance, less is more.

• Caching: Cache everything and cache often! Words to that effect are the mantra of hard core web developers. This technique includes setting expiration time for CSS, JavaScript, and images etc that are downloaded from your site. It also includes, caching pages, database queries, RSS feeds and so forth so that your web server spends time sending content instead of generating it. Don’t forget that Content Delivery Networks are also a very important type of cache that significantly reduce the latency of content intended for a global audience.

Will it ever be enough? Doubtful. And there’s much more to it than the few items I listed. Google is already more than kicking tires on their new take on how web enabled devices should communicate. A very ambitious endeavor, but for Google who is bold enough to deploy HTML5 on their main property (Google.com), I’d have to say that they’ve got the resources to see it through. And as always it’s easy to see the wake of Steve Souders’ contributions to web application performance – no doubt a vital contributor at Google (the page speed Firefox plugin?), formerly of Yahoo fame.

The takeaway is this, on the horizon, there will be more talk about the performance of your site and that in turn will raise the bar and awareness in the open source community about how to make high performance applications, the reasons to do it and with which tools to measure those results.