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.
Size: 935 Bytes
Size: 3.43 KB
Size: 13.3 KB
PNG (8 Bit)
Size: 1.02 KB
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>
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.
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.