Over the past few years a websites page speed has become an increasingly important ranking factor in search engine results. I currently a number of websites, mostly built on WordPress, though a few still run Modx, and page speed is something that has always concerned me.
With that in mind I’ve created this quick and dirty guide to boosting the performance of your website in just 10 minutes.
The two main factors in determining a website’s page speed are server set-up, and the coding of your website. I’ll start with the server first.
It’s important to choose the right hosting partner for your site. With a plethora of available hosts out there, it can often be difficult to differentiate between them. When choosing a host for my websites first and foremost I look at reputation. I’ll then check price, features, and freedom. I remember working at one agency that hosted all it’s client’s sites with Donhost. When it came time to upgrade the sites to a content managed platform, it was a nightmare as Donhost only allowed a single database, and limited DNS controls.
Heart Internet has gained massive popularity over the past few years, partly due to the use of Suzi Perry in it’s ad campaigns, and partly due to its good value and rich feature set. In fact I remember moving some 30+ sites from Donhosts to Heart back in 2009. It offers reliable reliable hosting, at a decent price, but these days due to limitations on things like add-on domains, and mailbox sizes (400mb), and the use of eXtend as oppose to cPanel, I’d struggle to recommend it.
My preferred choice of host for personal or small business websites and blogs is Vidahost. Specifically their Medium Package at £59 per year, or £5.99 a month. This allows upto 16 hosted sites, has SSH access, and the ability to set cron jobs. The most compelling reason for me though was the speed of their servers, and an average support time of just 12 minutes. You can get 10% off hosting with Vidahost by visiting www.vidahost.com and using the code webhostdl10
Testing page speed
There are some great tools around for testing a websites page speed, but I find that Google’s Page Speed Insights to the best for my needs. Just enter your domain, hit “analyze“, and you’ll be presented with a report similar to the one below, highlighting a number of actions to take to speed up your site.
As you can see, in it’s original guise the site tested, received a reasonable score of 76 out of 100. This could be be improved on though by following the recommendations in the Pagespeed report.
Let’s take a look at the recommendations in more detail.
PageSpeed Insights lists it’s recommendations in order of priority. Addressing the highest priority will yield the highest gains.
The highest priority suggestion will usually be to ‘Enable compression.’ Compressing files at on-the-fly at server level reduces the amount of data sent over the network, and so speeds up page loading times. In this case it’s suggested that enabling compression will result in a 74% reduction in the amount of data sent. That’s got to be a good start.
How to enable gzip website compression
If you’ve followed my recommendation earlier and signed up with Vidahost, then this is where you’ll thank me, as enabling compression is a their platform is a doddle. Simply log into your control panel and navigate to the ‘software/services’ section.
There you’ll see an icon that looks like a document with a green downward arrow called ‘optimise website.’ Clicking on that icon will bring up a menu allowing you to compress all content, or just compress the specified MIME types. Once you’ve made your selection hit ‘update settings’ and you’re done.
The affects should be instantaneous but just to be sure give it a few minutes then head on over to PageSpeed Insights to see the difference.
As you can see, enabling gzip compression on the server has increased the PageSpeed score by 10 points from 76 to 86. Not bad for a couple of minutes work. The actual results that you achieve will vary depending on your website and server.
How to leverage browser caching in wordpress and other sites
With no more high priority items we can move on to take a look at some of the other items slowing the page down. In particular we’re going to address the ‘leverage browser caching warning.
On this particular site this warning was only given a medium priority, but depending on the make up of your site it could be a high priority item.
The site that I’m working on is built using WordPress, but this technique should work across all websites hosted with apache.
FTP into the root of your site, and open up the .htaccess file. This file might hidden, so make sure that you can see hidden files. If .htaccess doesn’t exist, then create a blank text file and save it as .htaccess.
With the file open, you need to add the code that will tell the browser which types of files to cache, and for how long.
Here’s the code I’m using:
## EXPIRES CACHING ##
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType text/css "access 1 week"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
## EXPIRES CACHING ##
Add that to the top of your .htaccess file, and adjust the time values to suit your site. You can use seconds, hours, days, weeks, months, and years, so there’s plenty of flexibility.
As this was only a medium priotrity task on the site I was working on it didn’t make a huge difference to the PageSpeed score, but it only takes thirty seconds, so it’s deffinately worth while.
On site optimisation
As you can see from the image the above the remaining issues are mostly minor, and are on site based as opposed to server side. I’m not going to go through each of these individually as at the moment I’m focusing on quick easy wins.
Here’s the PageSpeed Insights screen shot of site with W3 Total Cache enabled
If there was one additional task I’d carry it out, it would be to serve correctly scaled images, however as I want users to be able to access larger product images, that would mean automatically resizing images on the fly, or creating duplicate images at multiple size points. That goes beyound the scope of what I’m trying to achieve with this article.
If you’ve been following the tips in this article I’m keen to here how much you’ve boosted your PageSpeed score by. Alternatively, if you’ve got any quick tips that think should be included, please comment below.