YSlow is a tool developed by Yahoo as a plugin for Firebug.
It offers lots of information and advice that can help you target important aspects of your website's performance.
YSlow evaluates your pages and displays a sort of report card based on a bunch of weighted evaluations. One "grade"
it gives you that is not as useful for small- to medium-sized sites is Use a Content Delivery Network.
However, you can tell YSlow not to count this grade in your overall page score by typing about:config
in Firefox's address bar, creating the key
extensions.firebug.yslow.pointsNotCDN and setting its value to 0.
YSlow offers other features such as cache statistics, which shows what your visitors have to download the first time they
hit your page, versus what they have to download on subsequent visits. Make sure the second column is as small as possible
to offer loyal users a faster website.
Smush.it is a great site that gets rid of metadata in your images, reducing their file sizes without reducing image quality. For some images, this can mean very significant savings. They even have extensions and bookmarklets that help you quickly and easily optimize an entire page at once. Very cool.
Image format can play a major role in both size and quality. Choosing a format that suits the type of image you're making can drastically reduce the filesize. The YUI blog has a recent post that says basically everything I was going say here, but here's a quick summary:
- JPG should be used for real-world photographs, despite its generation loss.
- GIF should be used for animations, and for some pixel art GIF results in a smaller file size than PNG.
- PNG (usually 8-bit) should be used for everything that's not covered by the other two formats.
Minimize HTTP Requests
It takes less time for your visitors to download one 100k file than it does to download four 25k files. HTTP requests add to the overall download time for your pages, so do everything you can to eliminate them.
- CSS Sprites and image maps are methods of combining multiple images into a single file. One sprite and careful positioning can cut several requests, saving your visitors precious seconds.
- favicon.ico — make one, and make it tiny. You should make your favicon as small as possible to improve cacheability. If you don't have one at all, browsers can attempt to request it again on every single one of your pages. Worse yet, when they don't find it they have to make a second request to get your 404 page. Making even a simple favicon will not only avoid those "double requests", and a cached icon will eliminate dozens of potential requests, saving loyal visitors time on every page.
- Cacheability (which probably isn't a word) means making sure your visitors don't have to
redownload the same images every time they come back to your site, or even as they navigate from page to page.
Get the INode out of your ETags, set an
Expires header date in the future, and make
sure (only if you use ETags as mentioned) to unset the Last Modified header to make sure your images can be cached.
# .htaccess file in your document root <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus one month" </IfModule> <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$"> FileETag -INode MTime Size Header unset Last-Modified </FilesMatch>
Maximize Parallel Downloads
Now that you've cut out unnecessary HTTP requests, it's time to make the remaining requests faster.
- Flush early, flush often — no, that's not about bathroom etiquette. Flushing content
to the browser immediately after the document
headlets the browser fetch your CSS file while the rest of the page is processed, and flushing again before the scripts at the bottom of your page gives the impression of faster rendering while those scripts are fetched and executed.
<!DOCTYPE ...> <html> <head> </head> <?php ob_flush(); flush(); ?> <body> ... <!-- page content --> <?php ob_flush(); flush(); ?> <script src=...> </body> </html>
- Serve images from another subdomain — Browsers may be configured to download only two
items at a time from a single host. If you serve plain text from
www.yoursite.comand images from
images.yoursite.com, those same browsers should be able to download four components at a time. Obviously this also depends on the structure of your page and your visitors' browser configuration. More details and spiffy graphs are at Maximizing Parallel Downloads in the Carpool Lane.
Before and After
Preload. Once your document finishes loading, start anticipating where your visitor will go next. Google and Yahoo each load additional components after their search homepages finish loading, because they can safely guess where you'll end up next (their search results page). For other sites it's not as easy to anticipate, but often you can use browser "down time" to prefetch components. Don't get too enthuastic about preloading, though, or you may just end up wasting bandwidth.
Postload. As Yahoo puts it, "What's absolutely required in order to render the page initially?". The rest of the content and components can wait. If you have some content split up into tabs or cards, only load the first item on startup. Load the rest of the content once the page is fully rendered. Don't make the visitor wait for content they can't use or see yet.
One Size Fits One
Don't scale images at render time via HTML or CSS. If your image is 100x100, your CSS should indicate as much. Don't scale a big image down, just resize it — otherwise the visitor still has to download the big image, but doesn't get the benefit of increased resolution. Scaling a small image up can save download time, but at the expense of image quality.