Web Development

Maverick: I feel the need…
Maverick, Goose: …the need for speed!

I remember the movie as my boss imitated Maverick from Top Gun. He wanted to our company product to load fast, very fast.

Speed is a big issue today.

Here are some fascinating facts and statistics by KissMetrics1.

  • 47% of consumers expect a webpage to load in 2 seconds or less
  • 40% of people abandon a website that takes more than 3 seconds to load
  • A 1 second delay in page response can result in a 7% reduction in conversions
  • If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year
  • 79% of web shoppers who have trouble with web site performance say they won’t return to the site to buy again

Slow page loads costs money. Literally. And faster websites improve user experience. Time to speed up our sites!

Determine your sites performance

So, how fast does your website load again? There are few tools available online to evaluate the speed of your site.:

  • Page Speed – Google’s tool for examining your site’s load speed
  • YSlow! – a free tool that suggests enhancements you can do for your site

Now, let’s speed up our sites!

There have been a curnicopia (I always wanted to use that word in a blog post) of tips on how to speed up your sites. Here are well-tested tips to speed up your websites.

Put Scripts at the bottom

Unless you are new to web development, you would have probably encountered this rule on a lot of websites. Viewing some websites’ sources make you want to wonder why <script> tags are just above the <body>’s end tag.

The reason is simple really. When we put <script> tags at the bottom, they block rendering while they are being loaded executed/run.

<html>
    <body>
        <p>My page already loads faster!</p>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </body>
</html>

Minify Javascripts

Javascript files, while meant to be coded by individual beings, it is just some command to the browser. No matter how legible your code is, it won’t matter to the browser. Spaces in your javascript files are still bytes. Which means they are one of the few things your browser doesn’t need but will be downloaded. Shave off the extra bytes.

Try working with a minified and un-minified version of javascript files when you work and use the minified versions of the scripts for your websites.

Un-minified version
$(function(){
    $('#button').click(function{
        alert("I have been clicked!");
    })
});
Minified version
$(function(){$('#button').click(function{alert("I have been clicked!");})});

Minify HTML

Removing whitespace is commonly used when minifying HTML.

Default values are the keys here. HTML tag attributes just like many other things have their default values. This means that there are a ton of things we don’t need to write but write anyway just because we can.

Here are a few examples of tag attributes we don’t need to write:

<form method="get">
// Better alternative
<form>
<a href="http://yourwonderfulwebsite.com/home.html">
// Better alternative
<a href="/home.html">

Final Words

Remember, slow loading pages, costs money and faster loading pages improve customer experience.

Further Reading

There are tons of information on the web about performance. Here’s a list of very good articles with regards to performance and web speed.

1 KissMetrics