A lot of web developers tend to overlook or ignore the file sizes of the files that compose their websites. I’ve seen many websites that are well over a megabyte for just the home page with all its components. I’ve even seen a few that were over 3 megabytes. While most americans have broadband of some fashion, there are still a significant portion (~20%) that do not have broadband, and even those that do will get impatient waiting for a page to load, and may click off before you have a chance to wow them with your content.
I tend to use several techniques to keep my overall document size reasonable:
- Compressed Images – JPEG (for complex images) between 40 and 65 percent quality, depending on where compression artifacts become too noticeable; GIF (for simple images) color palette restrictions between 8 and 128 colors, depending on where the artifacts become too noticeable. Of course I also use PNG images where a really good alpha channel is needed, but I use them sparingly, as full alpha transparencies dont compress well.
- Minified Javascript and CSS files. I like the YUI Compressor for this.
- Server-side compression. Even minified files can be squeezed even smaller with the use of server-side compression.
Server-side compression is super-simple to implement, as long as you have access to an .htaccess file or a friendly server administrator. Here’s a syntax that works for me on a couple of servers I run (This is Apache specific, for other servers find a mod_deflate equivalent):
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css AddOutputFilterByType DEFLATE text/x-js application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
The two AddOutputFilterByType lines can be combined into one or split up however you choose if you’re a stickler for keeping your text in configuration files readable. This can be inserted in the virtualhost definition or in your .htaccess file. Using this alone, I consistently shave off between 60 and 100 kilobytes off my download size. Enjoy!