This tutorial takes a practical, example-based approach to implementing those rules.
It's targeted towards web developers with a small budget, who are most likely using
shared hosting, and working under the various restrictions that come with such a
setup. Shared hosts make it harder to play with [2] configuration -- sometimes
it's even impossible -- so we'll take a look at what you can do, given certain common
restrictions, and assuming your host runs [3] and Apache.
The tutorial is divided into four parts:
1. basic optimization rules
2. optimizing assets (images, scripts, and styles)
3. optimizations specific to scripts
4. optimizations specific to styles
Credits and Suggested Reading
The article is not going to explain Yahoo!'s performance rules in detail, so you'd do well
to read through them on your own for a better understanding of their importance, the
reasoning behind the rules, and how they came to be. Here's the list of rules in
question:
1. Make fewer HTTP requests
2. Use a Content Delivery Network
3. Add an Expires header
4. Gzip components
5. Put [4] at the top
6. Move scripts to the bottom
Web Site Optimization: 13 Simple Steps
Apache
PHP
CSS
Web Site Optimization: 13 Simple Steps http://www.sitepoint.com/print/web-site-optimization-steps
2 of 17 2/17/2008 11:56 PM
7. Avoid CSS expressions
8. Make [5] and CSS external
9. Reduce [6] lookups
10. Minify JavaScript
11. Avoid redirects
12. Remove duplicate scripts
13. Configure ETags
You can read about these rules on the Yahoo! Developer Network [7] site. You can also check out the book "High Performance
Web Sites" by Steve Souders [8], and the performance research articles on the YUI blog by Tenni Theurer [9].
Basic Optimization Rules
Decrease Download Sizes
Decreasing download sizes isn't even in Yahoo!'s list of rules -- probably because it's so obvious. However I don't think it hurts
to reiterate the point -- let's call it Rule #0.
When we look at a simple web page we see:
some HTML code
different page components (assets) referenced by the HTML
The assets are images, scripts, styles, and perhaps some external media such as [10] movies or [11] applets
(remember those?). So, when it comes to download sizes, you should aim to have all the assets as lightweight as possible --
advice which also extends to the page's HTML content. Creating lean HTML code often means using better (semantic)
markup, which also overlaps with the [12] (search engine optimization) efforts that are a necessary part of the site
creation process. As most professional web developers know, a key characteristic of good markup is that it only describes the
content, not the presentation of the page (no layout tables!). Any layout or presentational elements should be moved to CSS.
Here's an example of a good approach to HTML markup for a navigation menu:
This sort of markup should provide "hooks" to allow for the effective use of CSS and make the menu look however you want it
to -- whether that means adding fancy bullets, borders, or rollovers, or placing the menu items into a horizontal menu. The
markup is minimal, which means there are fewer bytes to download; it's semantic, meaning it describes the content (a
navigation menu is a list of links); and finally, being minimal, it also gives you an SEO advantage: it's generally agreed that
search engines prefer a higher content-to-markup ratio in the pages that they index.
Once you're sure your markup is lightweight and semantic, you should go through your assets and make sure they are also of
minimal size. For example, check whether it's possible to compress images more without losing too much quality, or to choose
a different file format that gives you better compression. Tools such as PNGOUT [13] and pngcrush [14] are a good place to
start.
JavaScript
DNS
Flash Java
SEO
Web Site Optimization: 13 Simple Steps http://www.sitepoint.com/print/web-site-optimization-steps
3 of 17 2/17/2008 11:56 PM
Make Fewer HTTP Requests
Making fewer HTTP requests turns out to be the most important optimization technique, with the biggest impact [15]. If your
time is limited, and you can only complete one optimization task, pick this one. HTTP requests are generally the most
"expensive" activity that the browser performs while displaying your page. Therefore, you should ensure that your page makes
as few requests as possible.
How you can go about that, while maintaining the richness of your pages?
Combine scripts and style sheets: Do you have a few