Rob Saker's Blog

While large sites focus on content delivery networks and loading up on big iron to more quickly process requests, small web site operators that intelligently approach the problem can compete with large web site operators by making small optimizations.

What is the size of the opportunity with these changes? 20-25% reduction in response time. That reduction in effort also reduces the load on web and application servers, allowing them to focus on serving the dynamic elements of your site.  Before pursuing advanced capabilities, consider whether reducing 25% of your load is worth the effort.

Before you optimize a site, it’s important to understand how a web request works.  When a user requests a web page, it appears as if they’re connected directly to the web server.  In reality, the request kicks of a chain of events.

This is a simplified sample request:

• User/browser
• User’s Internet Service Provider
• Content owner’s ISP
• Hosting environment
  • Router/firewall
  • Load balancer
  • Web server
  • Application server
  • Database server

The information is then returned back along the same path.  Within each step may be multiple steps, such as multiple hops at an ISP.

For any simple web page that is requested, there may be dozens or hundreds of individual requests for images, style sheets, javascript files, HTML and media.

Basic Optimization Steps

There are several basic steps that can be taken to improve performance of web sites.  The main groupings of performance are:

• Minimize requests.  Reducing the number of unique hostnames required, cache files on the browser, combine files. Any requests that are avoided is performance gained.
• Minimize the size of information being transferred. HTTP or GZIP compression works by compressing text prior to transferring from the web server to the browser, then decompressing it at the browser.  The recent advances in browser technology ensures widespread support for this.  An average page on robsaker.com saves 150k in transfer per page by enabling compression.  Text (pages, javascript, CSS) compresses tightly, meaning the amount of bandwidth being transferred is significantly decreased, benefiting users with slower connections, undersized servers, or web sites that are many hops away from users. In addition to server compression, minification of code (removing unneeded white space characters) improves response time performance regardless of browser/server capabilities.
• Externalizing files.  Placing javascript and CSS in external .js and .css files allows for caching, both on caching networks and browsers.  This reduces the distance between the user and content, and can shave seconds off an individual page load time.
• Eliminate errors.  Browsers have historically been lax in enforcing coding standards.  The result? They’ll try to solve for all types of problems in code. Eliminating errors improves the user experience, decreases time spent by servers or browsers trying to “solve” problems, and is favorable in search engine calculations.

For a deep dive on these steps, visit the Y!Slow User Guide or pick up O’Reilly’s book on High Performance Web Sites for Front End Engineers. Smashing Magazine has also provided a good writeup on optimizing performance.

Bookmark & Share