6 WordPress plugins for better site optimisation

In this blog I will outline some key WordPress plugins which we use here at Embryo that you can use to improve the performance of your website, the plugins will improve scores by adding compression, expires, optimise files such as images, CSS, javascript and HTML and also caching. In addition, we’ll go through some performance and security benefits Cloudflare offers and also a handy script to improve the performance of Contact Form 7.

Testing and Benchmarking

To start off generating some benchmarks is an important step before you set out to fully optimise your site, it gives you an initial indication of how your website is performing and ways you can improve the scores, it’s worth running a test around 3 times to check consistency if the scores are inconsistent add the scores up then divide by 3 to get the average of the 3 scores and use that as your baseline. Some useful website speed test tools include Google Page Speed Insights, GTMetrix (Create a free account to select a server to test on) and Pingdom Website Speed Test. Out of the three, I feel GTMetrix gives the best consistency and I think this is because you can select the geographical location you want to use to run the test against your website compared to Page Speed Insights and it also gives a better breakdown of the results and how to improve them compared to Pingdom which is good at giving accurate results but lacks the information required to make the changes to improve the scores.

After each step of optimisation, it’s worth checking if the site is error-free, is still fully functional, there’s been no unexpected changes to the appearance and also if the change has had a positive or negative impact on the optimisation results.

Site Optimisation Plugins

I’m going to go through a list of plugins that I’ve used in the past in a suitable order of installing them, so you could follow the list through testing after installing/configuring each one and track your progress.

WPMU Dev

Smush Pro

The free version of Smush is a great way to start to optimise images, but Smush pro offers a wider range of features and 2x better image optimisation, one feature which is good with smush is Lazy Load, this allows the webpage to load in images below the fold after the page has loaded and the user is scrolling down the page, this removes a hefty amount of page size especially on image-heavy sites which in turn improves the page load time.

Smush Pro has the ability to use the WPMU Dev CDN which can also be used to deliver the images to the site in the webP file format which helps further reduce the page size, although having tested it this can be hit and miss and I’m not 100% sure why I don’t know if its because I’m expecting it to just work right away but it needs time to allow it time to process, it works better when added to a brand new site and not an old existing site or it’s the geographical location of the CDN servers which delay images from loading.

Along with smush, you could also optimise image using apps such as Tiny PNG I would suggest signing up for an API key and installing the app on your computer so you can drag whole folders into it. Similar to TinyPNG you could also use ImageOptim which just like TinyPNG is available on Mac, Windows and Linux.

Hummingbird Pro

Hummingbird Pro is a great plugin that mainly helps you with page and browser caching, compression and file optimisation, depending on the server you’re running, caching can be configured through the plugin if running Apache but some changes will need to be made on the server if you’re running Nginx, mainly adding expires and gzip config into the Nginx configuration, if you’re using Cloudflare you can connect it and manage expires within your Cloudflare settings.

Other useful settings include preloading pages, which preloads the page into the cache once a change has been made to it, removing query strings from assets, this improves page load times, unless required on your website you could also remove the Emoji CSS and JS this will reduce requests and page size and lastly prefetch DNS requests which are handy if you’re using popular third-party tools such as Google Analytics, Google Fonts or embedding videos from YouTube.

jQuery Updater

The jQuery Updater plugin updates the version of jQuery WordPress uses to a newer less vulnerable version of jQuery, this helps improve some scores in Google Page Speed insights for ‘Best Practices’ as it removes the vulnerable versions of jQuery and I’ve also noticed that it can in some cases improve some performance scores too so it must be better optimised than the legacy versions.

The reason that jQuery isn’t updated in WordPress is that if WordPress was to update jQuery across the board in an update older sites, themes and plugins that rely on the older versions are likely to break so using this plugin to update jQuery is a good workaround.

Autoptimize

Autoptimize is great for combining and minifying files, this is a great replacement for the Hummingbird file optimisation feature which to me is confusing and cumbersome when trying to optimise files within your website to improve performance, Autoptimize has useful and clear options for optimising CSS, JS and HTML it allows you to exclude different files and plugins from being optimised which is useful for fixing javascript and styling errors once files have been optimised.

An example of a file you might want to exclude could be the updated version of jQuery or even a Lazy Load script which might need to load in a certain order, a plugin you might want to exclude might be a contact form plugin or even an eCommerce plugin which could break once files have been combined and optimised which would affect your lead generation or web sales.

Once you’ve installed and configured this plugin before you go checking if an improvement has been made by optimising the files make sure the site is still fully functional also check the console tab in developer tools for javascript errors if there’s an issue they could give you inaccurate results because the page wasn’t able to fully load.

By optimising by combining and minifying will improve scores on most website speed test tools whether it’s Pingdom, GTMetrix or Lighthouse.

Async Javascript

The Async Javascript plugin will allow you to be able to test which method of executing your javascript files best suits your website whether it’s by Deferring or Asynchronous executing, you can hook it up to your GTMetrix account using your API key and it will run each test and provide the scores for each one, it’s worth pointing out just because the scores improve doesn’t mean that the scores are accurate because by altering how files are executed can have an impact on functionality jus like combining and minifying files so don’t ignore the warnings about checking if the site if fully functional.

Cache External Scripts

This plugin helps claw back some extra speed points after the SEO team have made changes to the site by adding tracking codes, these add extra requests which are difficult to cache and don’t have expires set which reduces the scores in the likes of GTMetrix and Page Speed insights, this simple plugin helps cache those requests and reduces the impact made by adding Google Analytics to the site.

Contact Form 7 ‘Refill’ Request

Contact Form 7 can be really handy but it does come with some frustrations especially when trying to optimise a website, when using contact form 7 in WordPress you might have come across a request called ‘refill’ amongst the other requests in the dev tools networks tab, this request is a captcha feature built into contact form 7 introduced to help fixed forms when using a caching plugin but it can sometimes impact load time by up to a couple of seconds per form and if you then add google ReCaptcha integration you’re impacted twice in terms of performance for captcha features because of the additional requests to/from Google for third-party scripts. After a short google search, I found that the refill can be disabled but it’s recommended that Recaptcha is enabled as an alternative, this removes the request made by Contact Form 7 reducing the load time.

Once the script below has been added to your functions.php file it will disable refill if Recaptcha is enabled make sure first it’s removing the refill request but also that the contact forms still submit. This script was from this blog written by Francesco Fortino.

add_action('wp_enqueue_scripts', 'wpcf7_recaptcha_no_refill', 15, 0);
function wpcf7_recaptcha_no_refill() {
$service = WPCF7_RECAPTCHA::get_instance();
if ( ! $service->is_active() ) {
return;
}
wp_add_inline_script('contact-form-7', 'wpcf7.cached = 0;', 'before' );
}

Using Cloudflare

Cloudflare is a great online platform that allows you to improve not only your website’s performance using its speed optimisation and CDN but also your website security by using their SSL and Firewall.

Some features you can use to help your website optimisation scores include Auto Minify, Brolti, Rocket loader and browser caching all with a free account you could then create page rules to always cache assets such as images in the WordPress uploads folder.

To do this go to Page Rules > Create Page Rule

(* means everything before such as HTTP/https and any subdomains and anything after so any subdirectories such as directories within uploads or themes)

Some security features you could use include, using the Cloudflare SSL certificate by setting the certificate to flexible if you don’t have a certificate installed on your server or setting it to Full if you do, you can then set up HTTP to automatically redirect to https, automatically rewrite HTTP to https and then add some firewall rules to protect WordPress.

To enable HTTPS redirects and Rewrites go to SSL/TLS > Edge Certificates

In here find Always Use HTTPS and Automatic HTTPS Rewrites and make sure they’re on.

To do protect vulnerable parts of WordPress with firewall rules go to Firewall > Firewall Rules > Create a firewall rule

How its worked out for us

We’ve recently put a new website live for Avail Mortgage Brokers which used these plugins & suggestions and we saw an improvement in performance especially on GTMetrix and Pingdom for page size and load time the before and after results we gathered are below. During optimisation the results we saw varied quite a bit like mentioned above for the Lighthouse (PSI), they ranged between 50’s to 80’s at different points of optimisation and even changed during the days after optimisation, so it’s hard to say what its true value is, the scores for GTMetrix and Pingdom stayed pretty consistent in the 80s and 90’s and only really dropped slightly after implementing Google Analytics/GTM, Google Recaptcha and Facebook Pixel.

GTMetrix

PageSpeed and YSlow out of 100 other scores lower number is better

Lighthouse (Desktop)

All scores out of 100

Lighthouse (Mobile)

All scores out of 100

Pingdom

Performance Grade out of 100 other scores lower number is better

What about Contact Form 7 Refill?

The refill request using the newer version of jquery was more efficient at loading the request as it was reduced to 0.365s so that’s a decrease by 4.5x compared to the previous 1.65s load time, so the impact on the page load time was less significant than before, below shows a small decrease in PageSpeed and increase or nearly half a second in load time when compared to Refill being disabled.