Boost Your Site! Optimise it with WordPress

Benefits

• This can help to prevent a high website bounce rate, as you will be able to make improvements if you find your website is performing poorly. 
• Optimising your site will help to boost your site’s performance in the future, meaning your users will get a better experience. 
• By following this blog post, you will be able to make a comparison between the performance of your site before following this blog as well as the positive improvements that have been made.

 

Setting Up

It is important to note that you may want to backup your website before following this tutorial – the reason for this is because there is the possibility that you may lose access to certain settings and procedures that you have implemented. 

(Side note, we’ve actually created a blog on how to backup your site, if you need to know how simply click here)

 

Website Performance Analysis

External Tool Method

Throughout this blog, we will be showing you how to use Pingdom – by using this 3rd party website, you will be able to ensure that if your website has a poor performance that it is not as a result of you having a low-quality internet connection, device or location. 

Pingdom Method

1. 1. To get started on the relevant Pingdom page simply click here 
   2. You will need to add the page that you are going to test into the URL field.
   3. Then choose the location that is linked to your target audience and then select “Start Test” 
   4. You will be provided with a summary table – this will outline the key metrics that you are looking for, and these are:

• • • Performance Grade 

The higher this score is, the better your website is performing

• • • Page Size

The total size of your page – it’s better if this figure is a low number.

• • • Load Time 

The number of seconds it takes for your page to load – this will be done using high-quality network conditions. The lower this result is, the better. 

1. 1. 1. • You will now need to save the URL of the test. 
         • Now you need to repeat this procedure with all the other pages you plan on optimising. 

 

Local Tool Method

In this case, the feature that you will be using is the Performance Audit feature – this is built into Chrome. 

1. You will need to open an incognito tab of the page you’re planning on testing.
2. If you click anywhere on the page, you will see a list of options, choose “Inspect”. You will then need to select “Audits”. 
   • There is also an option for you to test the performance of your website on a range of devices – to do this, look for “Emulation”, next to that you will see the choices you have. 
3. Now you will need to select “Perform an audit” before ticking the “Performance” checkbox, and then clicking the “Run Audit” button.
4. Once the audit has been completed, you will be able to view a performance report – this will outline how well your page loaded. 
   1. Metrics

You will be able to view what visitors to your site are able to see before it completely loads, as well as these metrics:

• • • First Meaningful Paint 

This is the number of milliseconds it took for your page to present meaningful content – the lower this figure is, the better your website is performing.

• • • First Interactive 

This shows how many milliseconds it takes for the majority of the page to become interactive – again this should be a low figure.

• • • Consistently Interactive 

This figure is the amount of time that it takes for your page to be fully operational – this needs to be a low number.

 

Website Performance Evaluation 

1. You will need to start on your Pingdom results page – use the URL you saved earlier. 
2. Now you should be able to see if your metrics are similar to your competition, and the ideal goals you have in mind in relation to website performance.
   • If you are happy with your metrics, then feel free to stop reading here. 
   • Alternatively, if your metrics are nowhere near where you think they should be, keep following the blog to improve.

 

Additional Auditing

1. 1. Using the URL you saved previously, open the Pingdom results page.
   2. You will now need to find the largest content you have:
      • Further down the page, you will find “Content size by content type” – you need to be looking for content which may be for adding to the page size. 
   3. Scroll down further until you see the “File Requests” section – now you need to organise your content by “File Size” – you should be able to see the files which are the largest at the top, and so the ones that will be having an impact on your site. 
   4. It’s important to consider whether you really need this files – if you decide that you don’t, then remove them from your site.

• • • Important – later on in the blog, we will explain how to optimise images, so if your large files are images, this may be beneficial for you.

Finding Unused Files

1. 1. Even further down the page, you will see “File Requests” – it is important that you look through this list, as you may find that there are some tools or scripts which are no longer in use. 
   2. Once you’ve made a list of the files that you no longer use, ask your developer to remove them, or do it yourself if you can. 

• • • If you use GTM to manage your tool’s scripts, then this process may be easier for you to carry out. 

 

Response Codes

1. 1. Now you will need to find the “Response codes” section further down in the report, you will need to identify response codes which aren’t “200 OK” – if all of them have this code, then you can skip this section. 
   2. If you find that you do have other response codes, then you will need to find them by scrolling through until you see the highlighted files (alternatively, you will see the ! symbol in a triangle.)
   3. Again you will need to make a list of these response codes. 
      • You will need to ask the developer about the following:

• • • • 301/302/307 Redirects

You will need to figure out if you can link to the final destination instead of carrying out a redirection. 

• • • • 404 Not Found 

This file no longer exists or there has been a typo – if it is not required, then remove it. 

 

Decreasing the Homepage’s Size

The steps that you have to take may differ from what is outlined below depending on the WordPress theme that you have implemented. 

1. Firstly, you will need to log into the WordPress Admin Panel; once you have done this, you will need to go over to the sidebar and select “Settings” and then “Reading”
2. Once you have found the field “Blog pages show at most”, you will need to change the value – keep in mind that the fewer blogs you display, the quicker the page will be able to load, however, this also means your readers will have to use an alternate method to access your blogs.

 

WordPress Plugins – Audit Process 

Not only can carrying out this process help to boost your website’s performance, but it will also improve security – this is a process which will need to be carried out on a regular basis.  

1. Login into the WordPress Admin Panel, and then select “Plugins” (you will find this on the sidebar). 
2. Now you will need to filter the plugins by “Active” – you can do this by selecting the link at the top.
3. You will now need to go further down the link to find plugins that are no longer in use – tick the boxes to the left.
   • Now select “Bulk Actions” from the dropdown and then “Deactivate” and finally “Apply”
   • Once you have deactivated these plugins, you will need to go through the “Active” list and once again look for outdated plugins. Update any plugins that need to be by selecting “Update Now”.
4. Now you need to go through your website and open some of the pages – this is to ensure that everything is working as it is supposed to after the changes.

 

WordPress W3 Total Cache Plugin Installation Process 

This is something which will have an effect on the performance of your website, and there is the possibility that it will cause website malfunctions. Before following this section of the blog, you will need to ensure that:

• Currently, you are working a local development area.
• Your website is backed up, and you are able to access this backup with ease. 
• It is important for you to make sure that you are not currently utilising cache plugins.

1. 1. You will need to log into the Admin Panel on WordPress.
   2. Select “Plugins” and then “Add New” 
   3. Type “W3 Total Cache” into the search bar, and then select “Install Now” and then “Activate”
   4. Look at the sidebar, select “Performance” and then “Dashboard”
   5. At the top, you will see “Compatibility check”, make sure to click on it.
   6. You will now see a list – you will need to see if there are any incompatibilities in the server settings with the following: “enhanced page and browser cache”. 
      • If you find that you have an incompatibility, then you will need to make an enquiry to your web-hosting company so that they can provide a solution.
   7. Select “General Settings” and then choose the following settings:

• • • Page Cache – Enable  
    • Page Cache Method – Disk: Enhanced 
      • In the event that your server settings aren’t compatible with the “Enhanced” choice and your Webhosting provider is not able to supply you with a solution, we would advise you to click “Disk: Basic”.
    • Minify

1. 1. 1. • You will need to select enable, and then “I understand the risks” 
           • This is something which should work for the majority of websites, however, there is the possibility that it could cause a malfunction. 
           • If you have a minification plugin or service implemented already, then you wouldn’t need to enable this feature.

• • Database Cache: Enable 

9. You will now need to ensure you click on the “Save Settings and Purge Caches” button. 
10. Now you will need to open your website and go through it, ensuring that everything is working as it should be. 
    • If you find that it is not, then the solution would be to undo the changes you have made, or you could disable features of the plugin, or the entire plugin itself. 

 

The website that users are able to see will be the one with all changes to the website – you will want to ensure that the website refreshes the content that is visible – this is something that you are able to do by clicking on the WordPress Admin header: “Performance”. Once you have selected this icon, you will need to make sure to select “Purge All Caches”. You also have the option of purging only certain caches, this is something you can do by selecting “Purge from cache” – this option will be visible next to WordPress posts and pages. 

 

Shortpixel Images Optimiser Plugin – Installation 

1. Start on the WordPress Admin Panel – you will now need to select “Plugins” from the sidebar, and then “Add New” 
2. Once you have done this, you will need to type “ShortPixel” into the search bar.
3. You will now be given the option of installing it, do it by clicking “Install Now” and then “Activate”. 
4. Go over to “Settings” on the sidebar, and then select “ShortPixel”
5. You will now see that you have been asked to enter an API key if you do not currently have it, then you will need to enter your email address, and then accept the terms of service and privacy policy. Now you will need to select the “Request Key” button.
6. This notification should appear: “Your API key is valid” – you will now be shown the Plugin Settings page. 
7. You will now need to choose the compression that you would prefer to have on your website, the following are examples of the options you will have:
   1. Lossy – this is the option you should choose if you are unsure of what would be the best option for you.
   2. Glossy 
   3. Lossless 
8. Ensure that you go back and click on the “Save and Go to Bulk Process” button. 
9. Once you have done this, select “Start Optimising” and make sure that you leave the tab open while the plugin optimises the images – the amount of time this takes will be dependent on the number of images that need to be optimised.
   • It’s important to note that when using the free plan, you are able to ensure 100 images each month are optimised, if you require more images than that to be optimised then you may benefit from a “One-Time” plan.
10. Once completed, you will find that all of your images have been fully optimised and it should take less time for your pages and posts to load. 

 

Re-Testing Pages

If you would like to see the difference between the performance in your website now, compared to when you started the process, then just carry out the tests you made during the start of the tutorial above. 

 

And… you’re done!

Congratulations, you have now successfully optimised your website using WordPress.

We hope that you found this blog post useful if you did, then make sure to check us out on social media so you can keep updated about upcoming blog posts.