One of the most critical aspects of running a modern website is ensuring it always loads as quickly as possible. Statistics say that people are very impatient when it comes to loading times, so you need to be proactive when it comes to optimizing your website.
Before we go any further, there are a lot of terms we need to clarify for your benefit. Regardless of whether you’re a beginner or expert, you may not be familiar with some of them, so let’s take a minute to introduce the terms we’ll use throughout the piece:
- Cascading Stylesheets (CSS). If you want to add complex styles to your website, you’re going to need to use CSS. Every site uses HTML as its foundation, so to speak, and you can think about CSS as the wallpaper and paint.
- Above-the-fold content. When you load a website using any browser, you can only see part of it at first. To check out the entire thing, you need to scroll down until the end. The part of the page you can see as soon as it’s done loading is what we call above-the-fold content.
The faster your website loads, the better the experience will be for your visitors. People don’t have much patience when it comes to slow websites, and a site that crawls along can drive visitors away out of frustration, which can be a killer blow.
How to Monitor Your Website’s Performance
When it comes to your website’s performance, there are plenty of tools you can use to tell you exactly how long your pages take to load. GTmetrix, for example, provides you with thorough speed test results. You simply tell the service which URL to analyze, and it’ll return a report in seconds:
To the left of the screen, you’ll see two scores GTmetrix gives your site depending on how well-optimized it is. The website in that example could use a bit of work, and you can learn about how to optimize it if you scroll down to the PageSpeed tab:
For now, we’re going to focus only on your overall loading time, and less than two seconds is a good target. However, there’s always some gains to be made, even if you’re below that mark. For more actionable advice on how to optimize your website, check out Google PageSpeed Insights:
Unlike GTmetrix, this tool simply assigns your site two scores, for both mobile and browser experiences:
Clicking on the Show how to fix button will tell you exactly which scripts are behind your problems. Once you have that information, you can get to work on eliminating them.
1. Use the Autoptimize Plugin
When it comes to WordPress, there almost always a plugin to fix practically any issue. For our needs, the Autoptimize plugin is what we’re after. It simply enables you to lessen the impact your website’s scripts have on its loading times:
To do this, the plugin works a lot of magic behind the scenes. For example, it combines the code of those scripts when possible, so visitors don’t have to load as many files. It also ‘minifies’ their code, which involves removing all the empty characters from it, including line breaks, tabs, and carriage returns. While the code becomes difficult to read, it can reduce the file’s size, resulting in faster page loading times.
To install the plugin, go to your WordPress dashboard and into the Plugins tab. Now click on the Add New button near the top of the window. On the next screen, you’ll see a search bar where you should type in Autoptimize, then wait for the plugin to pop up in the results below. Go ahead and click on the Install Now button next to the plugin’s name:
After the installation is over, a blue Activate button will show up next to the plugin’s name. Click on that button, and now you can go to the new Settings > Autoptimize tab on your dashboard:
However, it may be the case that the plugin wasn’t able to eliminate every single script with just the default settings. If your website falls into that category, return to the Settings > Autoptimize tab and click on the Show Advanced Settings button near the top of the screen. Now, enable the two options that read Also Aggregate Inline JS and Also Aggregate Inline CSS and save your changes. That should be enough to eliminate all the offending scripts from your website. If not, you’ll need to use a more thorough plugin.
2. Use the W3 Total Cache Plugin
An alternative to Autoptimize is the W3 Total Cache plugin. It’s a comprehensive, all-in-one solution for WordPress caching and optimization:
For the uninitiated, ‘caching’ stores some of its files on your visitors’ computers. Doing so means they won’t have to load as much data on subsequent visits, which improves loading times.
Once the plugin is ready to use, go to the Performance > General Settings tab within WordPress. Inside, find the Minify section, tick the Enabled setting and choose the Manual mode:
Remember to save your new settings, then go to Performance > Minify and look for the JS section. Now choose the Non-blocking using “defer” setting for both the Before </head> and After <body> settings:
Moving on, look down to the JS file management section and make sure you select your active theme, then click on the Add a Script button right below:
Eliminate Render-Blocking CSS
Now it’s time to take care of your render-blocking CSS using a similar process. Just scroll down to the CSS file management section and choose your active theme from the list to the right:
- Click on the Add a style sheet button below the dropdown list indicating your active theme.
- Return to your Google PageSpeed Insights results and locate the list of render-blocking CSS files in your page.
- Copy one of the files’ URL and paste it into the File URL field that popped up after clicking on the Add a style sheet button.
- Make sure your Template settings are set to All Templates.
- Click on the Add a style sheet button again and repeat the process for as many CSS files as you have to.
When you’re done, you should have a list of files that looks something like this:
Now, remember to save your changes by clicking on the Save all settings button. Afterward, test your website again using Google PageSpeed Insights. If you did everything right, there shouldn’t be any more render-blocking scripts left on your page. Eliminating those scripts should’ve given you a boost to your Google PageSpeed Insights score. If you want to check out exactly how this affected your loading times, return to GTMetrix and run a new test. Your loading times should be lower than during the test you ran near the beginning of this guide, so pat yourself on the back!
Let’s recap the two easiest ways to fix this issue in WordPress: