How we optimised load time on an image heavy WordPress website

I’m sure most of you have experienced this before.. You visit a beautiful website with loads of nice images, only for the website to load REALLY slowly. This can be massively frustrating for both the developer and also the user, as slow websites will most definitely lead to users leaving your website prematurely. We encountered exactly this problem with one of the client projects we worked on a while back for McMaster Yachts, but luckily we caught it during the development stage of the project, before it went live. That gave us chance to do something about it. As you can see, the McMaster website makes use of large and beautiful pictures to show off the luxury yachts available to charter and buy. But this (amongst other things) posed a problem with the load time of the website.

Using Pingdom to establish areas for improvement

While researching more about web optimization we stumbled upon an extremely useful website called Pingdom Tools. 4 This tool takes your URL and returns a very detailed list of requests that are made to your website when it loads up and how long each request takes. 3 The most common issues tend to be:

  • large image sizes
  • non minified code
  • poor caching

There are quite a lot of solutions out there for these type of problems, but I am going to share with you specifically how we sped up the loading time for McMaster Yachts, and what tools we used to do it.

Compressing and optimising images

First of all we noticed that most of the images on the McMaster site were saved out as PNG files and at very high quality. The images for the McMaster site needed to be large and high quality due to the nature of the website’s design, but they definitely didn’t need to be PNGs, as they didn’t require any transparency. PNG files tend to be the biggest in size as they are capable of storing a lot more data. Initially some of the images in question were around 2MB, which with some work, we were able to get down to 200KB. First we took the PNG file and saved it out as a JPG (of course using Photoshop’s ‘save for web‘ option) on a slightly lower quality setting. To do this is easy, you just follow these simple steps in Photoshop:

  • Open up the image in question
  • Click“File” -> “Save for Web & Devices”
  • Now choose the file extension you want (shown in the image below) and what quality you’d like to save it at.

5 Doing this alone though wasn’t enough. To make the image size even smaller we used a tool called JPEGmini Lite. This is a very user friendly and effective tool to compress your images even further without noticeable quality loss. All you have to do is drag and drop your files into the application and it does the rest for you. It’s free to optimise / compress up to 20 images daily. The awesome thing about JPEGmini Lite is that it counts up the total amount of space you’re saving with each image, so you can actually see how many megabytes you’re trimming the images down by. Screen Shot 2015-10-12 at 15.28.22

Minifying your code

The next step was looking at the code itself. Minifying your code can cut down a lot more on the loading time of your page then people give it credit for. There are multiple ways you can go about doing this. Some people might already be using software that does it automatically such as Codekit. There are also free online tools that can help here. One frequently used website for this is MinifyCode.

Caching

Lastly we added a caching plugin called W3 Total Cache to the McMaster Yachts website. This plugin works very well out of the box and if you are not doing anything fancy with your images, you can simply activate the plugin and it will work its magic. One thing to note is that W3 Total Cache does not like other plugins or code that “lazy loads” images. For some reason these two don’t mix well together. If you do use lazy loading with this plugin make sure to test if everything is working correctly.

Looking to find ways to speed up your own website?

Another tool we used which you can’t overlook if you’re looking for tips on speeding up your own website, is Google PageSpeed Insights. It comes built in to the Chrome web browser (or you can run a test by visiting this web page) and lets you analyse your webpage’s speed. Screen Shot 2015-10-12 at 16.19.13 You simply load up the Web Developer Tools bar (CTRL (Command) + Shift + I) and click “PageSpeed”. Then there’s an “Analyse” button. Run the tool and it will tell you where you can make improvements.

All in all…

We hope you found this useful. Our advice would be to use a combination of both the Pingdom Tool and also Google PageSpeed Insights. These tools will help you see where to focus your efforts and get the biggest wins in terms of page load time. Happy optimising!

Subscribe to our newsletter

Get access to all our guides and resources

We will never treat your email address badly. We’ll love and cherish it and treat it right.

Would you like to be notified each time we post new digital media?