The article covers the below topics:
- How to Monitor Your Website’s Performance?
- Use the Autoptimize Plugin
- Use the W3 Total Cache Plugin
- Eliminate Render-Blocking CSS
Loading speed is the key factor for today’s modern website as visitors might change their way to other websites, if speed is the lacking factor. As per statistics, people act impatiently in case of loading time and therefore, you should proactively do the website optimization.
You need to get clarified with several terms that will benefit you a lot in future. This is for both a beginner as well as an expert as you might not know some of them, so let’s check them as below:
Cascading Stylesheets (CSS): CSS is required for adding complex styles to your website. HTML is used as the foundation by every site and so, CSS can be thought of as the wall paper and paint.
Above-the-fold content: When a website is loaded using any browser, only a part of it is seen at first. For checking the entire website, it is required to scroll down till the end. Above-the-fold content refers to the part of page that is seen immediately after its loading gets completed.
Remember for giving better experience to your visitors, it is important that your website loads fast. Today, people are quite impatient when a website loads slowly and the site that loads faster alongside takes the visitors away due to frustration, which can affect your website badly.
How to Monitor Your Website’s Performance?
Website performance can be monitored via plenty of tools which can accurately give you the time required for loading your pages. GTmetrix is an example that helps you know the detailed speed test results. You simply need to insert the URL to be analyzed and it loads a detailed report in seconds:
At the left of the GTmetrix dashboard, there are two scores depending on the optimization accuracy of your website. The website might require to be worked on and you can also learn about optimizing it with the PageSpeed tab as you scroll down:
Currently, we are going to check only your overall loading time which needs to be less than two seconds. Though your website loading time is over two seconds, you can reach the target. Don’t miss to check Google PageSpeed Insights for an actionable advice on website optimization:
This tool is different from GTmetrix as it assigns two scores for your site – one for mobile and other for desktop experiences:
When you click on the Show how to fix button, it will display exactly which scripts are creating problems. Once that information is with you, you can start working to eliminate them.
1. Use the Autoptimize Plugin
WordPress always has a plugin to fix almost any issue. Here we are going to use the Autoptimize plugin. It helps to decrease the impact of your website’s scripts on its loading time:
The plugin actually plays a magic behind the scenes for doing this. For example, when possible it binds the code of those scripts, so that the visitors won’t require to load several files. Additionally, it ‘minifies’ their code which comprises of eliminating all the empty characters from it such as tabs, breaks, and carriage returns. With this, the code’s reading level becomes difficult but it can minimize the file’s size, leading to faster page loads.
For plugin installation, go to your WordPress dashboard and click on the Plugins tab. Then click on the Add New button at the top of the window. A screen will appear with a search bar where you can search for Autoptimize. The plugin will pop up in the results below, then click on the Install Now button next to the plugin’s name:
After the installation is complete, a popup with a blue Activate button will appear next to the plugin’s name. Click on it and then you can go to the new Settings > Autoptimize tab on your dashboard:
However, it might happen that the plugin failed at eliminating every single script with just the default settings. If this happens with your website, go to the Settings > Autoptimize tab and click on the Show Advanced Settings button at the top of the screen. Now, tick on both the options – Also Aggregate Inline JS and Also Aggregate Inline CSS and save your changes. This needs to be enough to remove all the scripts that disturb your website loading speed. If it isn’t, you will need to use a more comprehensive plugin.
2. Use the W3 Total Cache Plugin
W3 Total Cache plugin is an alternative to Autoptimize. It’s not only comprehensive but also a one-stop solution for WordPress caching and optimization:
For the unskilled people – ‘caching’ stores some of its files on the computer of your visitors. This means they need to load only some data on consequent visits, leading to improved loading time.
After the plugin is installed and ready to use, go to the Performance > General Settings tab inside the WordPress dashboard. Search for the Minify section, check the Enabled setting box and select the Manual mode:
Don’t miss to save your new settings and then navigate to Performance > Minify and search for the JS section. Next use the “defer” setting for choosing the Non-blocking for both the body settings – Before </head> and After <body>:
Further, go to the JS file management section and ensure that you select your active theme and then click on the Add a Script button just below:
Eliminate Render-Blocking CSS
Finally, you need to secure your render-blocking CSS using a similar process. Simply go to the CSS file management section and select your active theme from the list at the right:
Click on the Add a style sheet button below the drop-down list that indicates your active theme.
Go back to the Google PageSpeed Insights results and find the list of render-blocking CSS files in your page.
Copy the URL of one of the files and paste it into the File URL field that has appeared after clicking on the Add a style sheet button.
Ensure your Template settings are set to All Templates.
Again click on the Add a style sheet tab and repeat the process for all CSS files that you need to.
When it’s completed, you will have a list of files that appear something as below:
Click on Save all settings button and test your website again with Google PageSpeed Insights. If you have done everything correctly, you won’t see any render-blocking scripts on your page. Also, the Google PageSpeed Insights score will be improved due to those scripts’ elimination. If you are interested in checking how this has affected your loading times, go to GTMetrix and run a new test. You will find that the loading times are lower than the prior website test you ran at the beginning of this guide.