Improving website performance with Page Speed

It is often possible to make the contents of a web page take fewer bytes without changing the appearance or function of the page. Reducing the number of bytes a client has to download makes the page load faster. In this tutorial we look at three ways to reduce the size of web content. We also explain how to use Page Speed to help make resources smaller.

Page Speed is a Firefox extension that evaluates web pages and gives suggestions on how to improve them. Instructions for installing Page Speed are available athttp://code.google.com/speed/page-speed/download.html. I chose Page Speed because I am familiar with it. YSlow is a similar tool which also gives excellent advice to make your web pages faster.

Compress images

Image files are often created with extra information embedded in the file. For example, JPEG files written by many image programs include the name of the program that wrote them. PNG images can often be made smaller by changing the way the image is encoded. These transformations are lossless. That is, the compressed image looks identical to the uncompressed image, but uses fewer bytes.

The Page Speed rule “Optimize images” tries to losslessly compress all images in a page. When it succeeds, it shows the compressed versions. To use the minimized version of an image, in the Page Speed panel, click the link to the compressed version, save it, and use it instead of the original image

Minify JavaScript

Removing comments and white space from large JavaScript files can make them substantially smaller, without changing their functionality.

The Page Speed rule “Minify JavaScript” runs all JavaScript on a page through a JavaScript minimizer. If this generates a smaller file, Page Speed displays a link to that file. To use the minified JavaScript, click the link, save the minified file, and change your HTML to refer to the minified file.

You will want to keep the original JavaScript file around in case you want to change it in the future. Minified JavaScript is much harder to read and modify. If you modify your JavaScript frequently, a command line JavaScript minimizer that runs as part of your build process might be more convenient than Page Speed. JSMIN, available at http://www.crockford.com/javascript/jsmin.html, is such a program.

Remove unused CSS

CSS files contain rules that apply style attributes to elements in a web page. If a rule does not apply to any element in a page, removing it will result in fewer bytes being sent to the client, with no change in the appearance of the web page. However, because external style sheets may be included by more than one page, you must be careful to only remove rules that no page uses. The Page Speed rule “Remove unused CSS” can tell you which rules are not used in a given page. By running Page Speed on all pages that use an external stylesheet file, you can determine which rules are not used and remove them.

More ways to make your pages faster

The three suggestions above are a small sample of the issues Page Speed can detect and recommend fixes for. Page Speed and YSlow both rank their suggestions, so that you know which changes to your page are most likely to have a large impact. Running these tools on your page periodically and fixing issues they find will give your users faster pages.

To learn more, see Page Speed – Minimize payload size,

Thank you Google!