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.

Above and beyond the design we also worked to optimize the site’s load and render performance as well as making the server stand up the traffic demands that yoast.com generates.

Hand drawn illustrations, advanced CSS and completely unique styling make this re-design project one we’re very proud of.

This project has been showcased quite a bit on the various design galleries and received numerous mentions from around the blogosphere including:

• 10 Simple and Impressive Design Techniques
• Blog Headers: 20 Great Examples and Best Practices
• Design Spotlight: Yoast

Think Outside the Design
The value of web standards really amounts to recommended use of markup to semantically describe content. Once mastered, the web developer is able to make intelligent and conscious decisions on the “right” compromises to be made for a given project. We are constantly working towards standardization and have had dialogs about the best practices for markup in various situations, it’s the World Wide Web Consortium’s role to define the purpose of markup; the platform for web site optimization. Web site optimization has little to do with search engine optimization or any of the W3C’s validation tools. Instead web site optimization deals with steps taken to improve user experience by:

• reducing page weight
• re-factoring of markup, CSS and/or Client Side Scripting
• making content accessible
• making content semantic
• reusing imagery
• optimizing the weight of imagery
• caching and deferred loading
• reducing latency to reduce download or render time

In short, the goal is to use the minimum code to achieve the desired result. Unfortunately, clients may not always afford us the proper time or resources required to give the most polished result possible.

Think it Through
Web standards in and of itself does not necessarily contribute to reduced file sizes, however what it does do is endorse healthy use of semantic markup that does give way to reduced page weight through table-less markup and a focus on cascading styles sheets for presentational material. By using document object model scripting, procedural code no longer needs to live inline in the html document itself. Take advantage of your page’s semantic structure to use the DOM to the fullest.

Code becomes art when we take our code to the next level by re-factoring it to maximize it accessibility, by reducing our dependency on the markup for presentation and procedural user interface components. What remains to be done when all of the content in a document is rendered as the design calls for, content properly described with your tags, images optimized for reuse and weight? Now, we consider scale, what happens when this site we’ve worked so hard to optimize becomes highly trafficked (think: Digg Effect) — or if the site already is, let’s make sure to optimize the server’s role in the user experience.

Caching is one of the chief techniques to be leveraged to improve user experience both on the client-side and the server-side. Making objects like cascading style sheets and JavaScript files external can also benefit from the technique of combining files to reduce latency. It’s much less “work” to download a larger file once than it is to download (or check for freshness of) several files. Unfortunately, many of the most visited sites could benefit greatly from even a dash of web site optimization. Issues like multiple CSS file or JavaScript files demonstrate little regard for the benefit they could provide their visitors as well as their own bottom line.

Move on to compression; consider pre-compressing your CSS and combined JavaScript files to reduce server load for high traffic sites. Go a step further and create a proxy that makes sure to return the “not modified” codes to user-agents checking for freshness of objects in your site after first download.

Without getting into code for each portion, let’s consider the typical components of a “well-designed” HTML document:

1. masthead
2. navigation
3. breadcrumbs
4. body
5. sidebar
6. footer

Within each there are a myriad of possible methods to semantically describe the content of the components. Let’s have a look at a few basic cases:

• Unordered Lists for navigation, breadcrumbs and copy in list items.
• Non-tabular layout for forms and use of labels and access keys for accessibility
• Use of <p>, <em>, <strong>, <dl>, <h*>, <table> tags for content

Diving into a single common challenge can show how understanding of web standards cascades into an optimized user experience, let’s look at a technique that combines several techniques by several authors, each of which contributing to many fundamental factors of web site optimization; specifically: image reuse, semantics, presentational separation, caching, latency reduction, image optimization, and accessibility/platform independence. Anyway, on to the challenge — image based main navigation with hover effects. Without being distracted with pseudo-code let’s have a look at how using what we know about web standards leads naturally to web site optimization and a very desirable result for the user:

1. Start with an unordered list, in the case of drop down menus, let’s make that a nested unordered list
2. The unordered list is styled as required using CSS such that any copy is moved out of view by hiding overflow and indenting the copy out of view of user agents that support CSS, but still leaving it accessible to screen readers etc
3. Now imagery is added for each of the tabs for the various states (hover, visited, active etc) as necessary

Normally this is where things would end. At this point we have the desired result, but it’s not an optimal experience for the user. Again to the credit of numerous designers and developers turned authors out there additional techniques can be applied to optimize the menu quite a bit:

1. Combine all of the images for each button in the navigation into a single file
2. Combine all of the image states the navigation into a single file and use CSS to shift the desired portion of the image into view when required
3. Put any JavaScript required for desired effects; e.g. transparency, sliding effects support for browsers that don’t support standards as we would like etc an external file

In the previous three steps, we’ve:

1. Reduced the latency required to load the main navigation imagery and the overall render time for a given page
2. “Pre-Loaded” and cached the other anchor states for the navigation without using any client side scripting
3. Cached the JavaScript for the navigation by making it external (the same is obviously true for the CSS), improving the render time for subsequent page views

Now apply a few more techniques to the site as a whole:

1. Take advantage of the compression support of popular browsers and compress JavaScript and CSS so that it can be sent instead of the larger uncompressed versions
2. Combine our CSS files and JavaScript files respectively, similar to the combining technique for the navigation imagery to reduce latency
   Cache these compressed versions of the combined files on the server so that
3. Cache these compressed versions of the combined files on the server so that every page view requested doesn’t require the web server to have to prepare the same files over-and-over on-the-fly. Instead the server can send static files immediately (which it can do with tremendous ease).

With the various techniques we all apply to our projects just adding a few more steps of optimization greatly improves the user experience.

Make it Your Own
Standards simply help us agree on what markup is intended to do and how it’s elements work together for describing content, web site optimization picks up where web standards leaves off. The W3C encourages us to use markup to describe the content and separate the presentation and functionality from markup as much as possible. Once we get used to the idea our time is best spent optimizing our code to work in the real world. I’ve intentionally left out the “how” because that’s an ongoing debate whose conclusions are at best situational. There are quite a few frameworks out there that help developers apply many of these principles to their projects right out-of-the-box, but it’s not too difficult to build your own framework for your own style of work.

So what’s the final word? Well, similar to the stance that Ethan Marcotte put forward I suggest that web standards be the baseline that we use to optimize sites to perform for the targeted user agents. One day it may be easier to leverage standards to achieve a predictable user-experience across all user-agents, but for now it’s best to have more skills and mastery than are required to render a job well done.