Faster hosting == more conversions and better SEO

Sophisticated clients love to chat with us about search engine optimization (SEO), keyword placement, guest blogging, pay per click (PPC) and other techniques to increase the traffic to their websites and ultimately add to their bottom line.  They spend hours each month tracking changes in traffic patterns and spend thousands of dollars on advertising. They optimize the smallest details and change landing pages to rework traffic flow. But often, their results plateau and they don’t know where to look for the next step.

An important factor for search engine rank is site speed.  Search engines pay close attention to the speed of your website, because faster websites operated by more sophisticated webmasters are typically more important.   In fact the search engines consider it so important they give you tools to measure and help make your site faster:

https://developers.google.com/speed/pagespeed/
http://developer.yahoo.com/yslow/

More importantly, faster websites convert better. People don’t like to wait, even if the difference is barely perceptible.  You’re competing  against the likes of Amazon who has an unlimited budget and teams of experts watching for slowdowns.  A 2-4 second lag on each page, makes your business look like it’s being run by amateurs.  Often, repeat business is based on a “feeling” rather than actual product quality.  So you want customers who are just as impressed by the speed of your website as the quality of your product and customer service.

Getting rid of perceptible slowdowns is so important that even your iPhone or Android have built-in transitions such as swiping, sliding, zooming effects, spinning circles and “loading” progress bars. This eye candy is not just pretty, it’s there to help pass the time between launching applications.

Smart websites are built the same way, everything is optimized to reduce perceptible wait time and help remove any obstacles from the visitor to complete their purchase.  By the way, perceptible and actual load times are not the same thing.  It’s possible to have your pages start to render in the browser before the entire content has been downloaded from the server.

Website speed typically has more to do with the structure of the website rather then the size of pages or images. For instance, a page that consists of large blocking files which must be downloaded before the website starts to render, is going to be perceptually slower than one which places the blockers farther down the chain. The first option is to rearrange these files to load only when needed and move all external includes as far down the chain as possible. Google Analytics, for instance, should be loaded at the very bottom of the page, below all static content such as images.

However, this is not always an option because most websites today use a content management system (CMS) such as WordPress, Drupal, Joomla or Magento, which come with a prebuilt structure that cannot be rearranged. Additionally, plugins and themes for these systems have dependencies that require a certain structure.

But there are other easy things that can be done to dramatically improve the speed of delivery.

In the above example, each line item is an individual file. This is the breakdown of how long it takes to download each file. We are mostly interested in the top 10 entries’ blue area. As you can see the very first files are javascript (navigation) and css (design). These are large text files which block rendering and collectively soak up a full second of customer’s time.

The lowest hanging fruit in this case is to compress large text files in flight between the server and the visitor’s browser. Text files such as .js and .css, compress easily and are the biggest bang for your buck. Such a file may range between 50 and 500 KB but will compress 50-80%. When taken in aggregate for all your css, js and html/php files, it’s a very significant time savings.  Today’s servers have such an overabundance of hardware resources that the additional strain on CPU and RAM is not noticeable.  The trick is that it takes less time for the server to compress, transfer and have your browser decompress, than to simply transfer an uncompressed file.  Besides, this functionality has been built into browsers for a long time and it’s silly not to take advantage of it.

While the server and browser already support this functionality, it typically needs to be enabled explicitly on the server.  However, this needs to be done the correct way or it can backfire. Trying to compress the wrong type of file has serious penalties, so be careful.

This is the same website after server side optimizations have been applied. Notice how the blue portion of the top 10 lines have disappeared completely or have become significantly smaller.

Furthermore, the rest of the website files are downloaded much sooner and the website takes only 1.5 seconds to begin rendering instead of 2.6 seconds which is nearly twice as fast.

The takeaway here is the extreme reduction in transfer time is easily accomplished even without structural changes to the website.  It only has to be done once and now we can sit back and enjoy happier visitors and some very impressed search engines.

Artur August 30, 2013