Website optimization

How much unnecessary time are your customers waiting for your pages download? How does is it affecting your bottom line? It seems that these days users care more about load time than bells and whistles. Additionally, page load times are becoming more important to your seach engine rankings too.

Some facts:

• 73% of mobile internet users say that they’ve encountered a website that was too slow to loaad.
• 51% of mobile internet users say that they’ve encountered a website that crashed, froze, or received an error.
• 38% of mobile internet users say that they’ve encountered a website that wasn’t available.
• 47% of consumers expect a web page 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.

(From the Minister of Propaganda at KISSmetrics)

 

Ways to reduce download times (in no order of preference, they all help)

Enable compression

Using GZIP compression can reduce the amount data downloaded to the browser by up to a whopping 70%!

Browser caching

Telling browser when content is likely to be out of date tells the browser to store that content locally, meaning that most of your images will stored on that users computer instead of downloading on every page load. Given that images are more often than not the largest portion of the data on a page, this can represent a massive saving.

Parallelize downloads across hostnames

The HTTP/1.1 specification suggests that browsers download no more than 2 components of your page in parallel per hostname. By serving your pages and assets from differing servers you can easily achieve more than this.

Defer loading/parsing of JavaScript

While loading a script the browser does not start any other downloads! By placing your scripts at the bottom of your page you ensure that the are loaded last (or pretty close to it). Another option is to use deferred scripts. The DEFER attribute is a clue to browsers that the script is not required to render any part of the page and can be downloaded after rendering. Unfortunately Firefox does not recognise the attribute and IE may defer the script load, but not as much as desired.

Minimize HTTP Requests

Reducing the number of request made to the server. This can be simply achieved by combing your javascript files and css files into 1. You can also use sprites to contain your background images. Use CSS background-position to display the desired portion. Another idea is to just place small javascript code inline in the page.

Optimize images

Optimize your images to be no larger in file size than must be. There are plenty of free tools for this task.

Minimize DNS lookups

A DNS is like a phone book that maps hostnames to IP addresses. Every time your browser has to look up a hostname, it takes time.

Minify JavaScript/CSS/HTML

Minifying your code in it's simplest form means removing any unnessary characters (primarly white space) from your code. You'd be suprised just how much you can reduce the source code by when you consider how many pages are viewed on your website every year.

Avoid CSS @import

In IE @import behaves exactly the same as at the bottom of the page. Best practise is to css at the top of the page that the page can progressively render correctly. Clearly this negates that in IE.

In summary there are lots of ways you can reduce download times for your web pages. In doing so, retaining users, making sales and saving on bandwidth costs.