shopify agency of the year

Jan 07,2011 Juno Ecommerce

5 tips to speed up page load times

One of the most frustrating experiences online is when a website takes a long time to download.  The average threshold of people's patience for something to appear on the screen is now approaching around the 3 second mark due to faster internet connections and shorter attention spans.

If you own a website that makes you money then page load speeds could be costing you dearly.  For every second extra it takes for your website to appear you will lose more and more visitors, a 6 second delay for example could be eating into half of your potential profits!

Moving to a better web-host is the obvious answer to speed things up, just moving from a £6/month shared server to a £30/month dedicated server will show significant improvements.

Here's 5 more tips you may not have thought about to furthermore speed up page load times on your site:

Tip 1 - Optimise Images, Videos and other Components

Massive images and automatically playing videos are the biggest cause of delays.  Sometimes a 2MB background is the main culprit, especially when it's been saved as a PNG instead of a JPG.

Use the Tool for Firefox Called 'YSlow' to check the components of your website, generally you should try and keep the size under around 800kb overall, Amazon.co.uk is only 525kb and it includes a flash video:

Tip 2 - Combine and Optimise Javascript

Javascript is used on many ecommerce platforms and website that want to have that KILLER font but they can also really slow things down.  Some Javascript is very heavy on the KB's but mostly Javascript files do a few simple tasks.

Each time a browser comes across a Javascript file it is processed one-by-one in order of when it was found so if you have 15 .js files then that could be a long wait before you even start downloading the first image!  Combining Javascript solves this problem and also lowers the number of requests sent our by the browser also if you don't need a piece of code often then there is no need to make people download it every time, especially on the homepage.

Using a tool on a Firefox plugin called 'Firebug' visually shows the Javascript files downloading and running in sequence (the purple bar show an idle status waiting for the previous Javascripts to finish):

Tip 3 - Multiple Domains For Images and Image Sprites

When requesting images a browser can only download a maximum of six at any one time.  If your homepage has 50+ images on it then you'll have a queuing issue with the images (even if they are tiny icons!) and will experience slow page load times.  There's 2 ways to combat this problem:

Multiple Domains - You can trick the browser into downloading from multiple domains or multiple sub-domains.  Google maps uses a grid of square images to make up each complete picture, they typically have 24 images so Google uses 4 sub-domains to speed up the whole download process
(6 x 4 = 24):

Image Sprites - By using CSS positioning tricks you can use an image sprite which contains all of your common images within one large image.  As you are only downloading one image you can reduce the amount of time required to queue up multiple images, you can create entire homepages out of one image if you have the time and skill:

Tip 4 - PHP Flush

Content Managed Websites that use PHP can become very slow with very little going on.  Complex ecommerce sites built in PHP can really suffer from server lag as it builds each page dynamically on the fly before sending out the HTML code to the visitor who requests it.

A server can take a few seconds to build a webpage using PHP scripting and then afterwards the HTML script is sent out which then has to be managed as well; this processing time can take up many precious seconds.

One trick is to add the PHP Flush script in-between the <head> and the <body> parts of the code.  This breaks up the two areas of a web page and compiles and sends them separately to visitors.  While the visitor is downloading header information such as the style sheets and Javascript files the rest of the page will be built by the server using the PHP scripts.  The time saved is usually around a second and we guarantee that a website that loads up a second faster will make a higher profit than before.

The code for PHP Flushing is shown below, place it after the </head> and before the <body> to avoid any adverse effects:

<?php flush(); ?>

Tip 5 - Zipping and Caching

If your server supports Gzip then ensure it's switched on a.s.a.p.

Gzip compresses files server side and sends over the zipped version to visitors web browsers.  If you've ever compared files before and after they're zipped on your hard disk then you can see that it can reduce the file size by over 90% in some cases!  Over 99% of browsers accept zipped files and can very quickly unzip them as soon as they appear.

Caching content is one of the fastest ways to improve page load times.  It places files into the server's memory (bypassing the server's disk space) so the time it takes to retrieve each file is many, many times faster as it can be found straight away.

Wordpress sites are perfect for caching as most of the pages don't need to be dynamically generated like an old blog post for example.  This website JunoWebDesign.com for example has some fancy caching on, to see it in action try visiting a very old blog post (to cache it) and then RE-visit the same page again to notice the change in page speed.

Busy ecommerce websites can really benefit from caching the homepage and popular product pages.  One of our clients Ai Cache showed off their impressive caching software which remembers the most popular pages on an ecommerce sites and keeps them in the server's memory ready to serve visitors as soon as possible.

Warning: Intelligent caching is hard to achieve and can become a bit of a mine-field if done incorrectly.  You could only show cached versions of dynamically generated pages and get people jammed.  For example an ecommerce website with caching turned on could accidentally not update the shopping basket when a viewer visits the homepage after something is added to the cart and just see a frozen non-dynamic homepage.  If you're shopping online and your cart suddenly emptied you'd be very likely to leave that website!

Conclusion

Speed up your website now and you'll reap the rewards in a very short space of time.  When it comes to speed Google and Amazon are the ones to copy, they also are heavily involved in split testing techniques that can also also massively improve sales percentages without any extra traffic too.