Read about our 20 years!

WordPress Performance Optimization

You have worked hard on this website and now it's finally up and running. It looks great, with beautiful images and insightful content, and you are very happy with the ease of updating the content with WordPress. Everything seems perfect, except for one thing... It’s just a little slow, sometimes.

When it comes to User Experience (and consequently the effectiveness of your website), website loading speed is a factor you cannot ignore. An Akamai study suggested that 40% of users will abandon a web page if it takes more than three seconds to load. As this is from 2009, we can only assume that people are even less patient in 2015. It basically doesn't matter how good your content is if users are leaving your website before even reaching its front page.

Performance Optimization is a big topic. It's not just about your website and how it's made, there are numerous other factors such as your hosting environment which influence the end user's experience. In this article, I will be focusing on relatively easy and quick, yet surprisingly effective solutions using WordPress plugins. I hope this article can open the door for you to the world of optimization.

 

Measure your results

Google PageSpeed Insights is a great performance measurement tool. The sample website, which I will be testing the plugins on today, uses a popular WordPress template (developed by a third party ) and has quite a few images which were provided by content developers who know little about image optimization.

Before doing anything, the first step is to rate the site on Google PageSpeed in order to compare results.

420x250-etape1In this example, the score is of 5.6MB, 15/100. It takes approximately 6 seconds to load (!). This is due to the volume of content on the front page, which included 4 slideshows. In this specific case, the number of non-optimised images was the main cause of this miserable score.

There is a fine balance between volume and optimisation, as the best way to get a high score is to have as little content as possible, but you do want to provide some important information on your front page as well. So you want to make sure that everything on your website is as valuable as it can be, by stripping off everything that is not actually needed. In general, if it takes more than 2 seconds to load your front page, you want to consider reducing the file size. How? Don't worry; Google has some tips to fix this.
There are 2 main operations that can be done to improve your page loading speed.

  1. Image Optimization
  2. File Compression and Caching

Let's start with compressing the images, which often makes the biggest difference and is easiest to implement!

 

Image optimization

Image optimization is the process of reducing the size of the image while trying to preserve the quality as much as possible. Unlike print materials which require high resolution and rich colors, images for the web can be compressed quite a bit before seeing any difference. In order to do this, I used EWWW Image Optimizer. The reason why I'm recommending this plugin is simply because of its ease of use (and it’s free for basic use).

  1. Install the plugin
  2. Optimize all images that have already been uploaded on the website
  3. New uploaded images will automatically be optimized

It’s actually as easy as that. I optimized all images that were already on the website with the default setting of EWWW Image Optimizer. Let's see the impact we made so far:

etape-3Now the site is at 3MB, scoring 34/100 on PageSpeed. The score still seems quite low, but we have already gained quite a bit in terms of loading time. The file size is almost cut in half.

*When you have large images, for example a full-width slideshow, it’s still important that the images be manually optimised before the plugin compression. After this tutorial, I picked some larger images and compressed them manually.

If your website is extremely image-heavy, you might want to go to lossy compression instead of lossless compression. While lossless compression reduces the file size without reducing the quality of the image, the lossy type compresses images with slight loss of quality, but the amount of file size you can reduce often pays off. Lossy compression is a paid option in EWWW Image Optimizer, but you can get the exact same functionality using Compress JPEG & PNG images and the first 500 images are free to compress each month. Let’s see the difference now…

420x250-visuel-photoHere we go. Compared to the original image (826KB), Lossless compressions successfully reduced to 721KB (13% reduction) and lossy compression successfully reduced to 228KB (72% reduction). The loss in quality is almost unnoticeable. You also want to be careful with loss of metadata with lossy compression. Every image contains certain sets of metadata, including the camera setting and date. Lossy compression typically strips off that information as well. It is a pretty common topic on photography blogs with users wanting to know the camera settings that were used when the photo was taken, for example.

The rule of thumb is to go for lossless compression if the image is your main content or lossy compression if the image is just a visual supplement to other forms of content.

 

File compression and caching

File compression is like image compression. When all files are finalized and ready to be up on the web, you can package them together like a zip file, reducing the file size quite a bit.

There are different kinds of caching. In this article, we are mainly using page caching and browser caching. Browser caching instructs users’ browsers to keep the previously loaded files for a certain amount of time so that users don’t have to load the page every time they go back.  Page caching creates cached files on the server so that it doesn’t have to render the same page every time users access it.

Unlike Image Optimization, File compression and caching can be a little tricky. But fear not, there is already an amazing plugin called W3 Total Cache that is going to take good care of you.

Configuring W3 Total Cache could warrant 2 or 3 more posts, so I will cover this briefly here. As a starting point, try enabling these 3 items on the general settings page.

  • Browser cache
  • Page cache
  • Minify

And now let's see the difference....

 

420x250-etape2Voilà, now we scored 85/100 and the file size is 1.85MB, which is almost one-third of where we started!

Don’t just stop there, though.  When it comes to caching, additional configuration is a MUST. And don’t forget to disable the plugin while developing the website, as it can be very annoying to have to clear the cache every time you make a change. It’s highly recommended to do extra research on this and properly configure the settings according to your needs. If it feels too overwhelming, we are always here to help you evaluate your site and configure the best settings for you too. You can improve the score even more by properly configuring the W3 Total Cache plugin.

You might wonder, how come google is still telling us to optimize images? Haven’t we done that? Let’s see. When you click on “show how to fix”, google gives you the list of the images to be optimised. In this case, some of the images in the slideshow were still too big. So I had to apply lossy compression on them specifically. “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, and “Leverage browser caching” can be taken care of by configuring W2 Total Cache plugin further, with attention.

But please remember that our goal is to provide the best user-experience and not just to get 100 on google speed insight. Achieving 100% perfect on such tests would often require either removing the desirable feature/content. Obviously, you don’t want to do that just so you can smile at the number on the screen.

All of the steps above took approximately 20-25 minutes and already made a huge difference in the website’s performance. While minifying Javascript and setting cache can be a little tricky, there is really nothing to lose by minifying CSS files and optimising images, so I would definitely recommend implementing at lease those 2 points.

Finally, before you make the website live, simply check your installed plugins; disable or uninstall any unused ones, as loading every active plugin takes time too. You can also use P3 plugin to check which plugin is taking the most space. Happy optimizing!