November 13, 2009 1 Comment
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.
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
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!