Background
At the start of 2013, my son Sam redesigned my Clyde Street blog. He wrote about the changes he had made to my existing WordPress site.
In a follow up post here, Sam discusses how he has been working to improve the responsiveness of the site.
I am delighted to share his back office work here.
Introduction
I have been looking at website performance. The WordPress multi-site install has worked well but is really slow. As a result I have been doing lots of research and trial and improvement in an attempt to speed up the site.
I learned a lot through that process and I thought that I could apply what I had learned to the Clyde Street blog. In this post, I describe the tools I have used.
Test the current speed
First things first. If you want to improve the performance of your site you need to take benchmarks of what the current performance is. I used three tools to achieve this:
- YSlow plugin for Firebug on Firefox gives useful feedback about the areas that are slowing down your site and also gives you a grade and a mark out of 100.
- Google PageSpeed Insights: part of the Google search algorithm is how fast your page loads. Google allows you to see how well your page does in this speed test. The result is marked out of 100.
- P3 – Plugin Performance Profiler: on WordPress it can often be the plugins that you have installed that are slowing your site down. This profiler allows you to run a report and find what plugins are taking up the most resources.
After running these three tools I found that although the plugins were not slowing down the site too much, the overall results for the site were very poor:
Fixes using Plugins
Caching
This is an area I have ignored for a long time but caching is really the easiest way to improve your site speed. A static version of the site is created and served to visitors. I used WP Super Cache plugin and ensured I checked the box that rebuilds the page after you add something new to ensure that your visitors see the latest content.
Image Optimisation
Google places a lot of emphasis on this. The images that you upload need to be optimised. I reduced the size of the Clyde Street page by about 5mb (a lot) and this alone bumped my Google score up by around 40 points.
To do this I used the EWWW Image Optimizer plugin (there are other tools that can do this just as well). I purchased an API key for cloud optimisation. This cloud option reduces load on your server and does a better optimisation job. It costs $3 a month. I normally do not pay for plugins but this saved so much hassle (and did such a good job) that I thought it was worth it.
I ran a bulk optimisation task to reduce image size.
There were a few images that Google said could be optimised better and so I downloaded these and uploaded them to tinyjpg which is a website that specialises in reducing image size. Then I re-uploaded these images and that made Google happier, although to be perfect you would also downsize all your images to the exact size required. This may be possible for some sites but for most this is just a bit too much work.
Fixes for the theme
The areas that are harder to fix are inbuilt problems within the WordPress Theme you have chosen. Some themes use a lot of javascript and a lot of css and the impact of these on the performance of the site is difficult to resolve.
My Tip: run speed tests on your theme before you buy it to check if it is optimised for speed.
There was some other tweaking I did based on the recommendations from the speed test. I reduced the number of Google fonts that were used (reducing the number of font files being loaded). In addition, I reduced the number of posts that are displayed on the home page thereby reducing the number of images displayed and the time it takes to load them.
Test the results
Following this work (and during), I checked the results of my work and despite there being areas for improvement, the score for the site had improved dramatically from 6/100 to 70/100 in Page Insights and from 65 to 81 in YSlow. These are great improvements that speed up the website significantly and therefore improve users’ experience and reduce load on your server. I was not as successful with mobile and I believe this is mainly due to the template that the site is using that was not designed with a “mobile first” mindset.
Things that did not work
I have read about “lazy loading”. This is where the images are loaded onto the page when the user scrolls down to the point where the image will be displayed. This reduces initial load time. I tried a few plugins to accomplish this but I was not successful. It may have been because the plugin was conflicting with the javascript of the site. As I wanted this to be a quick project, I abandoned this but it may be worth trying for if you have more time.
Areas for investigation
You could spend your entire career dedicated to this area of activity and there are always performance tweaks that can be made. The next thing that I will try is using a content delivery network (CDN) to deliver the images. CDNs have distributed servers that deliver your website content from a location nearest to the user. Currently, all the Clyde Street data comes from a server in the United States but if I used a CDN, the static content (images, css and javascript) would get to the user from the closest server be that in Sydney, London or South Africa. Apparently this is a big improvement but as I have not tested it, I am yet to find out how it works for me.
Conclusion
I ignored website performance for a long time. I assumed it would be really tricky and boring but actually, if you are using WordPress is is something you can fix very quickly and easily. My goal was not to make the website amazingly fast, for this sort of optimisation you would need skills better than mine (and lots of time) but in an hour I halved the load time of Clyde Street and the site is now ranked respectably by Google in its Page Speed tests and so I know that the website speed will not be holding the site back. I would suggest that if you devote a small amount of time to your website’s performance you will start to experience real benefits.
