Marti's blog

This post will be the first of a long series focusing on optimizing Web sites and more specifically, those developed with AMP (Apache, MySQL and PHP). Optimizing web sites is important for two reasons:

1. Improving user experience by making the web load and display faster
2. Saving the site owner money by reducing hardware needs and bandwidth cost

Let's start with the client side.

File size

The most obvious thing you might want to optimize is file size.

HTML: there's not much to save here, you might want to skip on line feeds and indentation, but that's going to hurt legibility and make maintenance harder. Of course you should hand-write your HTML code and not use a visual editor, as they tend to add a lot of cruft.

CSS: there are a few things you can do here. The first one is to have your classes and styles well organized, because it'll translate into fewer classes and fewer properties. Do not forget that you can use several classes on an element. If several elements share some properties, you should be able to define these properties with a single rule that applies to all of them.
Secondly, you can shave off a few tricks using allowed CSS shortcuts. For example the rule { border-style: solid; border-width: 1px; border-color: #ffffff; } is the same as {border:solid 1px #fff}.

JPEG: you should obviously save your JPEG with a optimizing tool. Most good graphic packages have one. I've found out that progressive JPEG tend to be a bit smaller. Play around with the settings to see which size/quality ratio you can go with. Every picture will require different settings - those with red areas or red tones tend to show more compression artifacts and need more bytes, others have large blurry area that can be heavily compressed. If your graphic program adds EXIF or IPTC headers to your JPEG files, you can also strip those (using for example PlainViewer).

PNG: here too some graphical optimization tool should be used for saving. You'll want to see if a using a palette might save you some space or not, and if so how many colors you can limit yourself to. Once you are done with that there are some extra tools that can optimize further your file such as AdvanceComp which strip useless data and find a more optimal compression method.

GIF: the only reason to use GIF is for small animations (or very tiny pictures of a handful of bytes). Otherwise, use PNG which offers better compression.

Javascript: you can gain a lot of space by using a code compacter such as Dojo ShrinkSafe or Packer (keep your original files for maintenance, because the compacted version will be impossible to read for a human). Many AJAX libraries are also available in compacted form either directly or through third parties.

File numbers

More than file size, having too many related files (images, stylesheets, etc.) are what can make a page seem "slow" to load up (because each file requires a round-trip between the client and server). Obviously you should try to group your stylesheets and javascripts together into as few files as possible.

One issue you might have with this strategy is that pages will end up loading content that they don't need. If some pages need file A and B, and some other need B and C, and all those weight a lot of bytes and it's not very efficient to group and load A, B and C everywhere since each page only needs a subset. The solution to this problem is to write some simple server side script (PHP or other) to fetch your CSS and Javascript and package it in single file.

So instead of having :
<link rel="stylesheet" href="A.css" type="text/css"/>
<link rel="stylesheet" href="B.css" type="text/css"/>


You would have:
<link rel="stylesheet" href="styles.php?group=AB" type="text/css"/>


For graphics, I highly recommend the use a technique called CSS sprites, which groups several pictures into a big one and use CSS to grab and display them. It's especially efficient for all those little images that you might use in a GUI (buttons, rounded corners, etc.) as you can replace dozens of images with a single one.

File order

The order you link your files into your Web page matters for Javascript. Indeed, the browser will load all Javascript by order of appearance and meanwhile blocks further processing of the page and other elements. A suggested work around is to stuff all your Javascript loading at the end of the page rather than the beginning (technically speaking it will not improve total load times, but the user will get to see something faster).

A word about measuring performance

On the client side a good tool is the FireBug extension for Firefox, which has a "Net" tab that shows you the order in which each element is loaded and how long it takes.