Blog

Wordpress

Speed Up Your WordPress Website

In my previous article I showed you how begin the search engine optimisation of your WordPress website.  In this article I will explain how you can further optimise your site to improve page load times.

What does this matter you may ask?  Quite simply slow websites put visitors off.  If your website is slow visitors may not even wait for the page to load and leave to find another faster website.  This is especially relevant when your visitors are viewing your site using their smart phone on the move.   Not to mention this is now one of the factors thought to be used in Google's page ranking algorithm, that is to say not only does it provide a better experience for your visitors but also helps with search engine optimisation.

The tips in this article can easily reduce the download size of a single page request from in excess of 1MB to 200KB, and even less in subsequent page visits, without any noticeable change in the website.  Whilst this reduction may not be noticeable for visitors with super-fast broadband, there are still a large percentage of visitors that have slow connections. It is especially relevant when you consider mobile connections on smart phones and tablets where the 800KB difference could result in a long wait.

Then first thing that you should do is download the Google Chrome browser and install Google’s Page Speed Plugin.  Alternatively you can use their Online Page Speed Tool.  This will help you to analyse your site's performance and determine where any bottlenecks are.

I suggest you start with any images used in your WordPress template and the site in general as this is generally where the biggest improvement can be made.  Ensure that the images are optimised using image editing software for use on the web. What do I mean by this?

Images are usually saved in one of three formats for use on websites, these being JPEG (.jpg) GIF (.gif) and PNG (.png).  Each format has it’s own pro’s and cons and compresses the file size by varying methods and degrees but very basically:

GIF format limits the image to 256 colours and enables you to have transparent backgrounds.  This is used mainly for icons and template background images. The images it produces usually have very low file sizes.

PNG images are further split into three different formats, 8 bit, 24 bit and 32 bit.

The 8 bit format is similar to the GIF format with the exception that Internet Explorer 6, and some other older browsers, do not support the transparent background.   If transparency or Internet Explorer 6 are not an issue for you then the 8 bit PNG format will usually produce a smaller file size than GIF.

The 24-bit format is similar to the JPEG format at 100% quality with the exception that it does support transparency.

The 32 bit format produces great images and even lets you set the alpha transparency level which can produce better effects for background images.  The trade-off however is that file sizes tend to be much larger than the 24 bit PNG and JPEG formats.

JPEG format is used generally for photographic images and enables a good compression of images to reduce file size although there can be a loss of some quality.  JPEG images do not support transparency.

GIF RSS Icon GIF
Size: 935 Bytes
JPEG RSS Icon at 80% Quality JPEG (80%)
Size: 3.43 KB
JPEG RSS Icon at 100% Quality JPEG (100%)
Size: 13.3 KB
PNG RSS Icon - 8 Bit PNG (8 Bit)
Size: 1.02 KB
PNG RSS Icon - 24 Bit PNG (24 Bit)
Size: 7.98 KB

As seen in the examples above the same image can have varying file sizes whilst looking virtually identical. It is important to ensure that you choose the right image format to reduce the file size of images and also use suitable image editing software to optimise them.

Once you have optimised the images on your site the next step is to enable image caching.  This enables the browser to store the images rather than keep downloading the same file every time the visitor navigates from page to page.

This is especially relevant for the files that make up your WordPress template which are show on many pages. Caching images will have a large impact, especially for mobile browsers, after the initial page load.  This should make navigating your website a much faster experience.

In order to initiate browser caching for images you should add the following to the .htaccess file in the web root folder:

1
2
3
4
5
# cache images for 10 days
<FilesMatch ".(ico|jpg|jpeg|png|gif)$">
  Header set Cache-Control "max-age=864000, public, must-revalidate"
  Header unset Last-Modified
</FilesMatch>

Now you have optimised your images the next task is optimising the WordPress template CSS style sheets and Javascript files.  Modern websites often contain many style sheets and Javascript files. In order to further reduce the total download size of your website pages these should be minified, i.e. all unnecessary whitespace and comments removed.  This can often save 100's of Kilobytes of file size.  There are several ways to approach this, each with their own benefits.

You can simply use an online CSS and Javascript minification service such as minifycss.com or jscompress.com to minify each file and use the minified files in your template.  I personally find this a hassle as it means that if I want to make any changes to the template I have to re minify them.   In order to take this a step further you can combine the minified CSS files into one file and also the minified Javascript files into another file reducing the number of files that need to be downloaded on each page request.

Alternatively you can install the Better WordPress Minify Plugin which dynamically does all of this for you whilst leaving the original files intact.  I find this makes debugging and altering the site much easier.

One final step is to initiate browser caching for both your CSS and Javascript files also by placing the following code in your .htaccess file in the web root:

1
2
3
4
5
# cache imagesfor 10 days
<FilesMatch ".(css|js)$">
  Header set Cache-Control "max-age=864000, public, must-revalidate"
  Header unset Last-Modified
</FilesMatch>

And there you have it, WordPress Page Speed optimisation for faster browsing, reduced load on the server and better search engine ranking, and all in less than a days work.

Related Posts

Discussion

3 Comment(s)

  1. Back Pain Relief

    March 24, 2012 at 7:18 pm

    woot, thankyou! I finally came to a site where the webmaster knows what they’re talking about. Do you know how many results are in Google when I search.. too many! It’s so annoying having to go from page after page after page, wasting my day away with thousands of people just copying eachother’s articles… bah. Anyway, thankyou very much for the info anyway, much appreciated.

  2. Paulita Washell

    March 29, 2012 at 5:58 am

    I was just searching for this info for some time. After 6 hours of continuous Googleing, finally I got it in your web site. I wonder what’s the Google’s issue that does not rank this kind of informative web sites closer to the top. Normally the top sites are full of garbage.

  3. Willy Gasco

    April 6, 2012 at 1:14 pm

    I like this blog very much so much excellent info.

Leave a Reply