How to boost your wordpress page speed performance in just 10 mintues

pagespeed insights

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

No optimisation

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.

cpanel menu

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.

cpanel on vidahost

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.

pagespeed2

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.

Google describes leveraging browser caching as setting an expiry date or a maximum age in the HTTP headers for static resources, instructing the browser to load previously downloaded resources from local disk rather than over the network. If your site has a lot of content that isn’t changing on a regular basis, such as images, template files, javascript etc… then instructing the visiting users’ browser to store these locally will reduce network load, and make your website appear faster for those returning visitors.

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:

[code]
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
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/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##
[/code]

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.

pagespeed3

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.

w3 total cache

If you’re using WordPress, one such easy win is to install the W3 Total Cache plugin. This plugin will take care of some of the remdial work in fixing those low priority recommendations. It will take care of minifying your CSS, javascript, and even your posts, pages, and feeds, saving you the trouble of doing all this by hand. Of course you could run your CSS, javascript etc.. through online tools such as http://www.willpeavy.com/minifier/ but it’s a labourious task. W3 Total Cache also helps to speed things up by caching search results pages and databse objects to disk.

Here’s the PageSpeed Insights screen shot of site with W3 Total Cache enabled

pagespeed4

As all I did was minify the main CSS, HTML and javascript files, I’m quick pleased with the result. We could of course go further by doing things suchs as reducing HTTP requests, embedding images, and optimising the order of scripts, but I’m pretty happy with a score of 92. Remember that this page originally started out with a score of 76, so 10 mintues work has resulted in an 18 point improvement.

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.

Be the first to leave a comment. Don’t be shy.

Join the Discussion

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>