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)

As I wrote in the previous post, one of the reasons to move Handy Backup site from table-based layout to CSS-driven div’s was Google Webmaster Central blog’s announcement that they included website speed in search ranking algorithms. Getting rid of endless <table>’s, <tr>’s and <td>’s, as well as optimization of CSS allowed me to reduce raw HTML codes by at least 10KB per page, which has of course made its little contribution to the loading time. But after that I decided to delve further to the subject and found that there are many other things that a webmaster can do to improve his site’s performance and visitor experience.

In this post I’ll discuss what makes up a website’s loading speed and what can be done to fasten it.

Optimizing the Number of HTTP Headers

It is important to understand the very nature of browser-server interaction. After the DNS provides your computer with an IP address of the site you want to open, the first thing the browser does is send a number of HTTP headers to tell the server your caching and encoding options, as well as GETs, POSTs, cookies and other information. Here’s how it looks:

GET / HTTP/1.1
Host: www.handybackup.net
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 GTB7.0 (.NET CLR 3.5.30729)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Cookie: …

Requests like this are made for every single object found on the page including HTML code, each CSS stylesheet, JS script, image, flash object, favicon and any other file that ever gets downloaded to be shown on the page. If you want to track the headers your browser sends while you browse the Internet, there is a variety of tools that can help you do it, for example Live HTTP Headers add-on for Firefox. Particularly, for www.handybackup.net Live HTTP Headers showed me 35 records like the above that my browser sent to the server:

One HTML page (homepage)
Two Javascript files (menu and Google Analytics)
One strange request to /__utm.gif?…, obviously made by Google Analytics script
One CSS stylesheet file
9 images in HTML code (<img> tags)
20 images received as backgrounds specified in CSS
A favicon

All told, that took over 30KB of data for a single page!

Advice №1: Make Your Pages Load As Few Files as Possible

How to do it. For CSS/JS files, there is a sweet open-source application called Minify, designed to create a single download from multiple CSS or JavaScript files. No matter how many external files your website wants to load, Minify dynamically combines them in one, making the browser send only one HTTP header.

For images, there is a well-established technique called CSS spriting. It’s a very powerful method, when you combine many small pictures into one, and then use the background-image and background-position style properties to show the desired segment. It can help you reduce 30 images and 20KB of HTTP headers to only one merged image and one HTTP header.

I don’t use it much at www.handybackup.net, there’s only one place where I’ve tried it to date:

See the language menu and all those little flags? Since they appear on all pages of the site, I’ve combined them into a single file (http://www.handybackup.net/templates/handy/images/flags.png) and split it via styles, like this: .flag_fr {background: url(/templates/handy/images/flags.png) no-repeat 0 -36px;}

Of course, it is not wise to combine absolutely all images that you have. Firstly, you don’t use them all on every single page of the site, do you? And secondly, there are images that people may want to download separately, e.g. pictures of software boxes, logotypes, etc. – there’s no reason to not let them do it.

Advice №2: Distribute Downloads Across Several Servers

The second thing about HTTP headers is probably even more important. Even if you have ultra fast Internet connection, your browser simply won’t send 35 HTTP headers simultaneously, but will load objects consecutively. This has some solid reasoning explained in HTTP/1.1 specification (http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4):

Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy. A proxy SHOULD use up to 2*N connections to another server or proxy, where N is the number of simultaneously active users. These guidelines are intended to improve HTTP response times and avoid congestion.

A solution for this is to put your files at different hosts. The easiest way is to create several subdomains, e.g. images1.site.com, images2.site.com and put your images there. I don’t use this technique (yet), so I can’t give any advices on how to make such changes to the website. But I guess there must be a simple server side solution, like a PHP script, that automatically replaces old image sources with new ones, so you don’t have to edit everything manually.

There is one last thing related to HTTP headers that I haven’t mentioned yet. It is important to remember that HTTP headers are outgoing traffic which means that for asynchronous connections (like ADSL) it may be 20 times slower, than the incoming traffic. And this increases the significance of reducing their number even more.

In the next post I’ll speak about HTML, CSS and server-side compression – I welcome you to subscribe to the blog, so you won’t miss it.

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

I have just finished a very massive piece of work related to converting the official Handy Backup website to tableless HTML/CSS layout. It took almost two weeks of intensive coding and testing, and I sincerely hope that I didn’t miss anything important.
The whole site was originally built in tables that, roughly speaking, started in one template, continued in another and ended in the third one. Although the tables were hand-coded in the CMS across several database tables, the structure itself was not overcomplicated, and I could start with some specific category or page, e.g. homepage. But I always wanted to know if Google really cared for correct markup, so I decided to conduct a large experiment that would affect the entire site rather than a small set of pages.

Why It is Recommended to Avoid Tables

Generally, there’s nothing wrong with using tables. Table markup is great to present tabular information (who’d argue?), and there are many things can’t be properly done without them at all (I’ll talk about it in the end of the post). But if you read the official W3C specifications of HTML 4.01, you will see clear recommendations to not use tables for page formatting (http://www.w3.org/TR/html401/struct/tables.html):

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

Besides the above, I can also see three other important points against tables:

1. Flexibility. It is much, much more difficult to make changes to your website if it is based on tables, than div/css. Say that you have a page with several similar blocks containing product info, and a general description for a brand/category (similarly to what I have at Handy Backup’s main page).

Any change will require you to find the respective <td> in the code and manually fix it… Okay, for minor stuff like changing the places of two blocks, this can be done two steps. But, for example, to remove a product you will also need to change the colspan attribute in the bottom row (and since in most cases pages are more complex than a 2*3 table, you will need to do it in all rows!) And for dynamically generated pages, e.g. when a page must display all products from a category, your CMS will also need to generate a dynamic table which may become a real problem. The biggest advantage of CSS is that it gives you the control over layout via a single file and takes the hassle out of going to the code.

2. Secondly, speed. Pages that are made with the use of several levels of nested tables are loaded and rendered slower that those with clean CSS-based divs. A couple of days ago official Google Webmaster Central blog announced that Google is finally including site loading speed as a factor of search ranking:

Speeding up websites is important – not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. [...] We encourage you to start looking at your site’s speed [...] not only to improve your ranking in search engines, but also to improve everyone’s experience on the Internet.

Getting rid of the countless HTML table markup tags (<table>, <tr>, <td>, plus with a variety of attributes like width, height, colspan/rowspan, cellpadding, etc.) also reduces page size (directly, in terms of code) and makes it load faster. Of course, it’s too early to discuss how loading speed will change the SEO industry, but it’s always best to plan ahead, rather than trying to catch up with the competition.

3. Another important aspect is readability of the page. Here’s a quote from Google Webmaster Central (http://www.google.com/support/webmasters/bin/answer.py?answer=100782):

While your site may appear correctly in some browsers even if your HTML is not valid, there’s no guarantee that it will appear correctly in all browsers – or in all future browsers. Clean, valid HTML is a good insurance policy, and using CSS separates presentation from content, and can help pages render and load faster.

Worldwide expansion of smartphones, PDAs and various mobile devices has increased the significance of being able to deliver different site layouts to different types of visitors. On a small screen, tables with their fixed widths require you to scroll horizontally: this is not only inconvenient for mobile users, but also limits the exposure of the information contained in the right blocks. In the above example, the visitor is more likely to scroll down, than to the right, completely missing products 2 and 3.

The problem is easily solved by making the page load a different CSS file if the server detects that the visitor comes from a mobile browser. The idea is to create some “mobile.css“, that will bring most important divs to the top, hide stuff you don’t need, define how to show blocks appearing on the “onmouseover” events, etc. In a nutshell: make your site deliver the best possible experience.

After all, formatting text via divs and CSS makes it much more human-readable if you go to a source code of the page, or disable styles. Search engine indexing robots are like text browsers, they don’t recognize any backgrounds or images, and there’s a common SEO advice obtained by trial and error: the higher text/markup ratio, the better.

A quick Google search returned a bunch of Table-to-CSS converters: I didn’t actually try any of them, but according to the descriptions, they should work well for “straightforward” conversions, i.e. for tables that you can directly replace with divs. For complex websites where the tables are distributed across several files or database tables, it is recommended to do everything manually.

Something I Couldn’t Do Without Tables

Sometimes, CSS layout can’t completely replace the functionality given by tables. During the redesign, I’ve encountered the following problem: there’s no way to vertically align multi-line text in a block via CSS. For a single line you can make something like “height: 30px; line-height: 30px;“, but if you need to center more than one line, there’s no clear solution. Generally, it should be done with the “display: inline-block;” attribute, but it is not supported by IE6, IE7 and Firefox 2. There are some hacks, but the easiest way to do it is to create a table with a <td valign=”middle”>.

Handy Backup website has many hundreds of pages, and I am quite sure that if the changes I made really affect SEO in any way, I will notice it. If there are any changes, I’ll be sure to describe them here – stay tuned!

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

As many of you may be aware, most of the Handy Backup development and marketing team is located in Novosibirsk, Russia. Spring here, especially March, is a great and crazy time loved by ones and hated by the others – it’s a beautiful atmosphere of a war between cold in the air (it’s rarely warmer than 0°C or 32°F) and waking warmth in the hearts.

However, there’s one day this month that absolutely all Russians love: an International Women’s Day, celebrated on 8^th of March each year. Started a hundred years ago as a Socialist political event, today it has grown to a mixture of Valentine’s Day and Mother’s Day, when men express appreciation to all the women in their lives and give them flowers (traditionally, tulips) and small gifts.

International Women’s Day in Novosoft

To be honest, the 2010 International Women’s Day is the first one in my life that I’ve put so many efforts into. I didn’t participate in organization of the previous year’s celebration (and in fact it was quite boring), so this year I decided to take the initiative. What I wanted is to create something really SPECIAL and CREATIVE to congratulate our company’s ladies with, rather than just common flowers and tea with sweets. So I decided… to shot a movie!

A short distraction. As a copywriter/marketer responsible for promotion of Handy Backup for the past two years, I’ve learnt that a big part of Internet marketing is about explaining people why the product or the service you deliver is exactly what they are looking for. This requires two qualities: to be able to imagine yourself in your customers’ shoes, and to have strong writing skills to describe your message in a way that can touch them. And I think they helped me a lot! :)

The Video

Since 8^th March is an official holiday and this year it happened to be Monday, most Russian companies congratulated their women on Friday the 5th. And this went into the main idea of the video: on Thursday men suddenly realize that they have only one day left to prepare the next day’s celebration and gather in a conference room to discuss it. After finding out that they are completely out of money, they decide to earn them… I’ll spare you the minutes and won’t go further into details, you’d better see it by yourself:

(This video is currently in Russian, but I’ll try to make an English version in a couple of days.)

During the last seconds of the video we solemnly brought in the tulips that we had “earned so hard”. It was a hit and all the Novosoft ladies were so much impressed!!

And the Moral is…

Since this blog is meant to be about Internet Marketing, here’s the moral: be creative. Put your soul into your work and you’ll win recognition and love of your audience! :)

Posted by Alexander Rassokhin, Project Manager