How-To : Speed up your site (part 1)

The time it takes for a page to load can make a big impact to costumers. The longer it takes to load, the higher your bounce rate will be. Here are some of the tricks I’ve picked up to help speed up that loading time for customers.

Build HTML on the client’s computer

What I mean by this is you use javascript to actually build the website. Only send the minimal amount of data in your html file itself. The rest should exist in a .js file that the user can cache and reuse to build your sites. For example, say you are building this table

Username	Address	Phone number
gtucker	123 Fake Street	915-555-1234

if you were to use simple html and had 100 rows, the user would have to download 3,700 characters (each row adding 37 characters), plus any data in the actual table. If you were to make a .js file like this :

function buildTable(rows){
   var html = [];
   html.push('<table><tr><th>Username</th><th>Address</th><th>Phone number</th><tr>');

   for(var i = 0; i < rows.length; i++){
      html.push('<tr>');
      for(var j = 0; j < rows[i].length; j++){
         html.push('<td>');
         html.push(rows[i][j]);
         html.push('</td>');
      }
      html.push('</tr>');
   }
   html.push('</table>');

   document.getElementById('myElement').innerHTML = html.join('');
}

Then in your html file call the function like this:

buildTable([
   ['Gordon Tucker','123 Fake Street','915-555-1234'],
   ['Gordon Tucker','123 Fake Street','915-555-1234'],
   ['Gordon Tucker','123 Fake Street','915-555-1234'],
   ['Gordon Tucker','123 Fake Street','915-555-1234']
]);

It suddenly becomes a lot more scalable. For 100 rows, it will be 1,100 characters (11 for each row). I'm ignoring the javascript file for now, since there are plenty of optimization techniques to make it smaller.

You might say, whats the big deal between 1,100 characters and 3,700 characters, both are tiny amounts. The difference is in scale (think of having 2000 rows of data...) Also remember that the more complex the HTML is going to be, the bigger the improvement you will see with this technique. Remember, no matter how much html you want to use, the data a user would have to download would stay relatively small.

May not seem like a ton, but techniques like this combined with others can dramatically improve your site's speed.

Hope this helps someone out there.

I'll try to get an example page up on Our site soon.