5 Cool Things You Can Do to Increase Site Speed (and Search Rankings): Part 2

In a comment to the previous post, I was asked how I had managed to save 10KB by optimizing HTML codes. A very correct question, indeed! If you simply replace a piece of code like this:

<table class=”product_box”>
<tr><td class=”product_box_title”> … </td></tr>
</table>

with a div-driven construction like

<div class=”product_box”>
<div class=”product_box_title”> … </div>
</div>

You won’t win anything but a couple of bytes. Where did I save kilobytes? The answer lies in the third practical advice that I’m going to give.

Advice №3: Move Template Elements to “Untouchable” Backgrounds via CSS

I have a strong belief that having each image on a page displayed as a separate <img src=”…”> is a bad idea. You may have noticed that I love giving references to recognized authorities, and that’s what I’ll do now too. Here’s what W3C recommendations say about using images (http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.7):

Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt=”red ball” would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (“”). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.

That’s exactly how I feel it should be. In my opinion, every image on the page must carry some meaning and be supplemented with an alt attribute. If you have an arrow, a graphical exclamation mark, or whatever else intended to emphasize some text, it shouldn’t be displayed as an image. Take a look at the following block from www.handybackup.net:

Earlier, all those green arrows were made as separate images contained in table cells, like this:

<table><tr>
<td><img src=”http://www.handybackup.net/templates/handy/images/mark_gray.gif” alt=”To Windows 7 Backup Page” title=”To Windows 7 Backup Page” /></td>
<td><a href=”/backup-windows-7.shtml” title=”Backup software for Windows 7″>Backup Windows 7</a></td>
</tr></table>

Each one carrying a funny meaningless alternate text, yeah. (Don’t blame me, this has been done by somebody else years ago!) During the redesign, I moved the arrow to a new class called pointer_green, which resulted in an effective reduction in the code length:

<span class=”pointer_green”><a href=”/backup-windows-7.shtml” title=”Backup software for Windows 7″>Backup Windows 7</a></span>

I did this to every template element that appeared for decoration purposes only. Besides direct optimization of HTML code this also resulted in a more correct copy/pasting from a browser to a text editor: when pasted into Microsoft Word, the above block now appears as a readable set of links, instead of ugly unformatted tables with a lot of unnecessary images. And even more: since the images became backgrounds, they can’t be “Saved as” – that’s why I called them “untouchable”.

There’s another very important thing about reducing HTML code. On the old site, CSS styling also had a lot of illogical constructions like this:

<div class=”someclass1″><ul class=”someclass2″><li class=”someclass3″>
<ul class=”someclass4″><li class=”someclass5″>…</li></ul>
</li></ul></div>

In most cases you can easily eliminate excess classes by moving to nested selectors.

This is simple arithmetic: proper use of nested classes and the move of template elements to CSS backgrounds allowed me to reduce an average page size (and therefore, loading time) by 15-20%!

Advice №4: Keep a Readable CSS for Your Work and an Optimized CSS for Your Site

The idea is very simple. Instead of specifying separate rules for all classes you have, you can take advantage of CSS inheritance and make common rules for all selectors with similar styling. Doing it to all classes will greatly shorten CSS file – but at the same time make specific styles hardly editable. That’s why it is recommended to keep two versions of CSS: one that you work with, and another that you publish on your site.

There are many great online tools that can do it, for example take a look at http://www.cssoptimiser.com/

Advice №5: Enable Server-Side Compression

We all know that text can usually be compressed by a factor of 4 to 6. Wouldn’t it be cool if the server could ZIP all readable information (such as HTML code, CSS, or JavaScript), send it, and the decompression took place on client side?

In the previous post I wrote about HTTP headers that browsers send to servers. An exemplary header included the following line:

Accept-Encoding: gzip,deflate

That’s exactly what happens. The browser requests a page and tells the server that it will accept a compressed version if there is one. Weighing less, compressed pages are downloaded and displayed faster.

There are many tools that can measure page download size. I personally recommend using Web Developer addon for Firefox: it has an amazing set of tools designed to help you build and analyze the Web. Install the extension, open the page, and then click View Document Size on the Information menu:

(One of the scripts is the Google Analytics script which comes compressed by default.)

How to turn on compression of the files send by your server? I asked our network administrator to enable the mod_deflate module on our Apache server, and added two lines to .htaccess, as specified in official Apache documentation (http://httpd.apache.org/docs/2.0/mod/mod_deflate.html):

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|exe|t?gz|zip|bz2|sit|rar|msi|pdf)$ no-gzip dont-vary

Here’s the result:

85KB instead of 128KB – compression made page download almost 35% faster!

Now you may ask: does this work for all browsers? The answer is no. It depends. But if you go to Google Analytics and see Visitors -> Browsers, you will find that 99% of your users come through more or less modern browsers. My point of view is that a website must provide the best possible experience for the largest number of users, so it’s not wise to slow everybody just because a couple of freaks love Internet Explorer 4 or their hand-written browsers.

5 Cool Things You Can Do to Increase Site Speed: Summary

Well, that’s all for now. Let’s sum up all that I recommend doing to a website:

1. Make Your Pages Load As Few Files as Possible. Why: Each downloaded file requires your browser to send HTTP headers which is about 1-2KB per request.
2. Distribute Downloads Across Several Servers. Why: Browsers don’t download simultaneously more than two objects from a single hostname.
3. Move Template Elements to “Untouchable” Backgrounds via CSS. Why: CSS reduces code size, increases readability and copy/paste-ability.
4. Keep a Readable CSS for Your Work and an Optimized CSS for Your Site. Why: Optimized CSS are smaller, but harder to modify.
5. Enable Server-Side Compression. Why: The less data transferred, the faster download.

I hope that you enjoyed reading these two posts on speeding websites as much as I enjoyed writing them:) If you have any comments or questions, feel free to ask me, and I’ll try to answer them in my next posts.

Posted by Alexander Rassokhin, Project Manager (and webmaster/SEO)

Tags: css, seo, speed

This entry was posted on Wednesday, April 28th, 2010 at 3:08 pm and is filed under Internet Marketing. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.