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:
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.
# .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>
Now that you've cut out unnecessary HTTP requests, it's time to make the remaining requests faster.
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>
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.
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.
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.
All original work on this site is covered by a Creative Commons Attribution 3.0 license unless otherwise specified.
You may share or use any code or images from this site in any manner, for free, so long as reasonable effort has been made to give credit where due.
The views expressed in the posts and comments on this blog do not necessarily reflect those of my current or former employers.