Want to improve your WordPress website’s performance?

27 February 2018

CEB Creative's Blog Website Development Website Hints and Tips

CEB Creative’s support services include helping you improve your WordPress website performance.

You can use tools like Google’s Page Speed Insights and Pingdom’s Speed Test to help improve your WordPress website’s performance. These tools will show you where improvements can be made on your site but they aren’t always clear on how to implement these improvements. If you aren’t experienced with the WordPress PHP files or server-side environment then getting some professional help with this is advised.

Get help with improving your Google Page Speed score

Below I have documented some optimisation work I did, on a website I recently built to demonstrate how significant improvements can be made.

Getting started

thelittlecarnivorecompany.co.uk is an eCommerce website running WooCommerce. It’s not a massive site with around 40 products and 10 pages of content. The site is built on a premium theme. Straight out of the box, the theme gets a pretty good score on Page Speed Insights with 78/100 for mobile and 89/100 on a desktop.

If you are using an off-the-shelf theme then always check the demos page speed scores. If it’s in the red (poor) to start with you want to avoid it all together.

WordPress website performance

Step 1 – Analyse with Google’s Page Speed Insights Test

Once my site was finished and I’d added all my products Page Speed insights scored it 55/100 on mobile and 68/100 on a desktop straight off the bat. These are very reasonable scores but I really wanted to improve my website’s performance to at least match the demo themes scores so I started working my way through the list of Page Speed Insights recommendations.

Page Speed start

Step 2 – Compress HTML, CSS, JavaScript, Text, XML and fonts

First thing I did was to enable compression for HTML, CSS, JS, Text, XML and fonts.

This can be done by adding some code to your .htaccess file. This is where some server-side knowledge is required. Once I’d added the code and retested the results improved to 72/100 on mobile and 71/100 on a desktop.

Compress HTML, CSS, JavaScript, Text, XML and fonts

Step 3 – Optimising Images

Next, I optimised the images Page Speed Insights had found. This often gives a big performance boost and it did, I was now scoring 88/100 on a desktop.

optimising images

Step 4 – Adding the Autoptimize plugin

I needed to leverage browser caching so I added the plugin called Autoptimize. This is a great little tool to increase website performance but it needs to be used carefully. Once added and activated I ticked off the options to optimise HTML, CSS and Javascript. Quite often doing this breaks some of the styling or functions on the site so you need to use the advanced option to exclude certain files if needed. This is again something for the more advanced user.

This is also where Page Speed Insights gets interesting (and confusing). Doing this lowered my score to 46/100 on mobile and 80/100 on a desktop! At this point it might be tempting to just undo what you’ve done but don’t, persevere with it.

add autopt and optimse html css js

Step 5 – Inline CSS

The next issue I needed to address was to inline my CSS. You can do this very easily with Autoptimize and a website called Critical CSSSimply add your site to Critical CSS (you’ll need an account) and download the file. Copy and paste this into the inline CSS box in Autoptimize and enable it by ticking the option. You may need to exclude some script here as well if you have any styling issues pop up.

I re-tested and my score was now 55/100 on mobile and 82/100 on a desktop, heading in the right direction again.

Critical CSS and inline

Step 6 – Enabling Gzip compression

I hadn’t yet enabled Gzip compression so this was my next step. This requires you to add some code to the .htaccess file again just as we did in step 1.

Doing this pushed my mobile score back to where it was in step 2 to 72/100 and increased my desktop score to 88/100.

enable gzip compression

Step 7 – Avoid landing page redirects

I now have only two issues left which are:

  • Avoid landing page redirects – https://thelittlecarnivorecompany.co.uk/?wc-ajax=get_refreshed_fragments
  • Leverage browser caching – https://cebcreative.co.uk/wp-content/uploads/cached-scripts/analytics.js (2 hours)

The first issue is being caused by WooCommerce and is linked to the cart page. I did do some reading up on this and tried fixing it by adding some code to disable cart fragmentation on the front page in my functions.php file but it didn’t seem to have any effect.

I then tried a plugin called Disable Cart Fragments combined with adding some code to my wp-config.php file and this fixed the problem and my score went up another few notches to 75/100 on mobile and 91/100 on a desktop.

The second issue is caused by the Google Analytics .js which is a third party script so there isn’t much I can do about that. I don’t really want to cache it as it needs to collect live data from the site for the analytics data to be correct and kept up to date.

It is somewhat ironic that one of Google’s own tools prevent me from getting a 100/100 score though!

Disable Cart Fragments

In just over an hour I was able to get my site from scoring 55/100 on mobile and 68/100 on a desktop to scoring 75/100 on mobile and 91/100 on a desktop. This is even better than the demo themes score of 78/100 for mobile and 89/100 on a desktop.

Aim high but don’t worry if you fall short

Getting to 100/100 is often not possible when using third party scripts and functions such as Google Analytics. You should worry about it too much. Most sites score between 50-70 so anything above that would be considered good by Google. A score over 90 is very good going indeed particularly when using resource heavy plugin like WooCommerce.

If you need help increasing your Google Page Speed Insights score to improve your WordPress website’s performance contact CEB Creative today!

Help me fix my Page Speed Insights!

Got a project?

  • Would you like to receive information from CEB Creative? CEB Creative would like to occasionally send you information about their products, services and promotions.
  • This field is for validation purposes and should be left unchanged.