In this article:
- Google PageSpeed Insights test
While it’s important for a browser to load the styling and script of a webpage before rendering it, this extra delay can be avoided without harming the look of a webpage. What’s more, doing so will also minimize loading time.
The trick is to delay the loading of scripts and style-sheet that don’t affect the section of a webpage a visitor sees immediately upon landing.
In other words, preventing the browser from loading any file that doesn’t affect the upper section of a webpage which a user will see before scrolling down, will solve this problem. This section of a webpage is referred to as Above the Fold (ATF) content.
Before we dive deep into this article, it’s important we get you familiarized with Google PageSpeed Insight tool.
Google PageSpeed Insights Test
And there is no better tool for testing the performance of a website than Google PageSpeed Insights. So head over there and let’s run a couple of tests.
Type in the link to your website in the URL section. After that, click the ANALYZE button.
Once you are done running the test, your website performance score will be displayed on the screen.
Best performing sites are those with scores between the ranges of 90 -100. Tough call? Bet it is, but it’s achievable.
If your website performance comes up short, Google will throw in a couple of suggestions to make it perform better. Most likely, one of those suggestions will be to eliminate render-blocking resources.
Leave this tab open because we will be revisiting it later.
Already guessing there are plugins which can fix this problem without you having to write a single line of code? Well, if you are, you are pretty correct.
You may also simply request our speed optimization service and we will take care of all identified issues in your site.
W3 Total Cache is a great performance improvement plugin for WordPress. Besides handling caching problems, it’s also a great tool for fixing loading problems caused by style sheets and scripts.
So the first thing you will want to do is to install and activate the plugin.
After installation and activation, navigate to Performance >> General Settings
Next, scroll down to the Minify section. Here, enable Minify and then set the minify mode to manual.
Then click the Save all setting button.
With the minify option enabled, the next thing to do is to fetch links to the style-sheets and scripts delaying the full rendering of your webpages.
This is where Google PageSpeed Insights tool becomes handy once more. So head back to the tab you had earlier left open.
Once there, click the Eliminate render-blocking resources tab.
Links to scripts and CSS files that need to be minified will be displayed.
As you can see, the links to the files have been truncated. To get the full URL, hover over any link, right-click and copy link address.
We are going to be minifying JS files first, so copy any of the .js links.
With the link copied, head over to your WordPress dashboard again. This time, navigate to Performance >> Minify
Scroll down until you locate JS section. In the JS minify settings section, you will see </head> tag area. Set Embed type to Non-blocking using “async”.
Next, turn your attention to JS file management subsection. Click the Add a script button.
Paste the link to the JS resources you had earlier copied in the provided field.
After adding JS scripts, while on the same page, scroll down to the CSS section. With CSS minify settings enabled, click the Add a stylesheet button.
Do exactly the same thing you did in the JS section. Only ensure you are copying links to CSS styling from Google PageSpeed Insights and not links to JS resources.
Once you are done copying and pasting, click the Save Settings & Purge Cache button.
Now head back to Google PageSpeed Insights and re-analyze your website. You should see considerable improvement.
Let’s now look at the second plugin that can help us solve this problem.
As you would expect, the first thing you will have to do is to install and activate the plugin. After installation and activation, right from your dashboard, navigate to Settings >> Autoptimize.
Run a test on Google’s speed test tool once more to see how your website performs. There will definitely be an improvement.
If you are really serious about improving the performance of your website, you just have to put in the efforts to make your website load faster.
In this post, we’ve shown you how render-blocking script and styling resources can slow your website down. We went further to show you the two plugins you can use to fix this problem: W3 Total Cache and Autoptimize.
Load speed is one of the numerous factors that influence the SEO of a website. As such, focusing solely on it, while neglecting other factors may not give you the results you desire. In this our SEO guide, we discussed steps – in addition to improving loading speed – you can take to make your website rank better. We encourage you to go over it.