How to speed up your website

Site speed is an issue that comes up a lot in our line of work. With the quality of pictures and video improving, and JavaScript becoming more robust, we (developers) are doing everything we can to keep sites lean and fast.

It can be an awkward for the marketing department, when it finally comes time to present a digital project to a room full of stakeholders aaand…(waiting for the site to load).

If the boss is bored after five seconds, imagine how your customers will feel.

Our goal, as forward-thinking developers – is to deliver rich visuals and functionality, across common devices, in a way that flows naturally with users’ precedent experience. This means we must make every effort to ensure seamless interaction through fast page loads.

Save money, make money

A faster site will save you money on your hosting and hardware costs and it will save you money by reducing the bounce rate of your users. Users will leave a slow site as it will frustrate them and detract from the experience.

Improve your Google search rankings

Back in April of 2010, Google added site speed to its search priority channels. Page relevance is still the major search channel, but if two pages have the same relevance, the faster page will get priority.

A short case study on Shopzilla

Shopzilla undertook the challenge of overhauling their site architecture to concentrate on performance of both the front and back ends. The project had huge payoffs.

Summary of results

• Decreased page load time by 1.5s.
• Increased conversion rate by 7-12%.
• Saved an estimated $480k in future hardware costs.

The takeaway: a faster site will save you money, and make you money. We’re ok with that right?

Determining your site’s performance

There are several free tools to help you determine what is slowing down your site. I’ll divide these into two categories: online tools and browser add-ons.

Online tools

Pingdom Tools will give you a basic site speed outline, tell you how many requests your site is making, the page size and load time. It will also give you a score relative to all the other sites that have been tested on Pingdom Tools.

Gtmetrix gives an in-depth analysis of what is slowing down your site and provides recommendations on how to improve your site speed. Most common recommendations are compiling all javascript and css files, and minifying them.

Browser Add-On Tools

Firebug has a ‘Net’ panel which will show you the size and load time of all the resources pertaining to your site. It’s become an extremely popular tool with web developers. It’s also useful for locating bad server requests.

ySlow is an addition to Firebug. ySlow will run a speed test on a site and provide recommendations on how to improve site speed. Gtmetrix uses the ySlow scale as one of the factors in their site speed analysis.

Google has a more comprehensive list of site speed analysis tools here.

Common causes of slow site

There are many reasons your site could be slow – here’s a list of the most common issues.

1. Too Many Server Requests

Every time the website has to retrieve an external resource from the server, it adds to the load time of the site. These external resources are generally CSS files, Javascript files, and images.

2. Bad Hardware

The actual speed of the hardware serving up your site can affect the load time of your site. Old server? You’ll likely have issues serving up large sites quickly.

3. Overweight Pages

The size of the external resources can drastically affect the load time of your site. For instance if your site has a lot of really big images, it’ll slow down your site significantly.

What can you do?

Seems daunting? Not to worry. There are simple things you can do to increase your site’s performance.

Improve your Code

One of the low hanging fruits here is minifying all your code and combining as much of it as possible into a single file. It’s not always possible to have a single Javascript and CSS file, but try to get as close as possible. This will drastically reduce the amount of server requests, therefore speeding up your site significantly.

There are several online and IDE plugins to help you minify your code. I’ve experimented with several and found some to be more reliable than others. My favourite so far is the YUI Compressor. You can run it locally through the instructions here: YUI Compressor, or use the online version here: Online YUI Compressor.

There’s also the online service called Cloudflare that will minify your files for you through a proxy server. I’ll touch on this more later.

Consolidate and compress your images

If you have multiple background images, you should combine as many of them as possible into a sprite. This will reduce the amount of server requests your site has to make to retrieve the images. Here’s a more in depth reference on Sprites.

It may not be possible to get all your images into a single sprite, but you need to get it into the smallest number of files you can. There are a number of sprite generators out there; I haven’t tried any of them as I prefer to make sprites by hand – but I do recommended using spriteMe.

Always make sure you’re using the correct image format. Make sure you are using .png, .jpg, or .gif correctly when saving images. If you’re unsure of the proper use-cases of each image format, you can research it here.

Compress your images as much as possible while still retaining the quality you need. We all know the Photoshop feature ‘save for web’, which does an ok job of compressing your images – but you can take it one step further with other compression tools. A favourite among developers is Yahoo! Smush.it, which will provide a higher lever of lossless compression for your images.

A mac specific PNG compressor is PNGpong which will add a widget to your dashboard and help you shave off some weight of your .png files.

Reliable Hosting

If you aren’t self-hosting, you won’t be able to tinker with your own hardware – but there are loads of good hosts out there. Some of our favourites here are:

• Bluehost
• Dreamhost
• Media Temple
• Laughing Squid
• Hostgator
• Rackspace Cloud

Content Delivery Network (CDN)

A content delivery network serves up your external resources from a server located closer to the end user. Here is a more detailed description.

There are a number of CDN service providers out there, which vary in price. Some of them are:

• MaxCDN
• Amazon Cloudfront:
• VPS.net
• CloudFlare

Cloudfare is a free service (yes they do have paid plans, but their free offerings are great) that helps speed up your site. They provide performance improvements, security, and an in-depth analytics suite in addition to a CDN.

Cloudflare is fairly easy to set up, takes about a day to propagate and well worth experimenting with.

WordPress-specific Tools for Optimization

There are several options to help speed up your WordPress powered site. We will go over a some best practices and some recommended plugins to help improve your site’s performance.

First, you don’t always want your plugins loading on every page – you only want them to load where they will be used. So good practice here is to tell your plugins where you want them to load. You can read more about this here.

Next, it’s important to load javascript through WordPress properly, as sometimes multiple javascript files that are exactly the same are uploaded, which causes unnecessary browser requests and errors. If you load javascript correctly, you can reduce this issue. Here is a good summary of the different ways you can load javascript in WordPress.

And last, there are a lot of plugins that can help optimize your WordPress install. Some of the more popular ones are:

• WP Super Cache
• W3 Total Cache
• WP Minify

Thanks for reading. If you have other tips and tricks that I didn’t cover here, please share them in our comments!