If you use Google PageSpeed Insights to evaluate your website, you’ll probably receive a recommendation to remove render-blocking scripts and CSS. However, it gives no instructions on how to do so on a WordPress site.
Before the remainder of the HTML on the page can be loaded, the user’s browser must first load the scripts and CSS. Users with a slower Internet connection will have to wait a few milliseconds longer to view the page.
Owners of websites attempting to get a Google PageSpeed score of 100 will need to address this problem in order to reach that flawless score.
What is the PageSpeed Score of Google?
Google PageSpeed Insights is a website performance test tool designed to assist website owners in optimizing and testing their sites. This tool compares your website to Google’s speed requirements and makes recommendations on how to enhance your site’s page load time.
It gives you a score depending on how many regulations your website passes. Most websites get between 50 and 70 visitors each day. Some website owners, on the other hand, feel obligated to reach 100 percent (the highest a page can score).
Is a perfect “100” Google PageSpeed Score Really Necessary?
The goal of Google PageSpeed Insights is to offer you with recommendations for improving your website’s speed and performance. You are not obligated to follow these guidelines to the letter.
Keep in mind that website speed is only one of many SEO criteria that Google uses to decide how to rank your site. The importance of speed is due to the fact that it enhances the user experience on your website.
More than simply speed is required for a better user experience. You must also provide valuable information, a better user experience, and compelling text, picture, and video material.
Your objective should be to build a website that loads quickly and provides a positive user experience.
We advocate using Google Pagespeed Guidelines as guidelines, and if you can easily adopt them without compromising user experience, that’s even better. Otherwise, you should try to do as much as you can and then let the rest go.
1. Use WP Rocket to fix Render Blocking Scripts and CSS.
We’ll use the WP Rocket plugin for this strategy. It is the greatest WordPress caching plugin on the market, and it enables you to immediately boost the speed of your website without requiring any technical knowledge or a lengthy set-up.
WP Rocket is ready to use right now, and it will enable caching with the best settings for your website. More information is available in our comprehensive guide on installing and configuring WP Rocket in WordPress.
To do so, go to Settings » WP Rocket and choose the ‘File Optimization’ option from the drop-down menu. Scroll down to the CSS Files section and choose the choices to Minify CSS, Combine CSS Files, and Optimize CSS Delivery.
WP Rocket will try to minify all of your CSS files, merge them, and only load CSS that is required for the visible portion of your website. Because this might influence the design of your website, you should properly test it on a variety of devices and screen sizes.
You may also disable the loading of the jQuery Migrate file in WordPress. It’s a script loaded by WordPress to ensure compatibility with plugins and themes that use older versions of jQuery.
Although most websites do not need this file, you should examine your website to ensure that deleting it will not have an impact on your theme or plugins.
Remember to click the Save Changes button to save your changes.
After that, you may wish to clean the cache in WP Rocket before running Google Page Speed Insights on your website again.
We were able to attain a perfect score on the desktop on our test site, and the render-blocking problem was resolved in both mobile and desktop scores.
2. Use Autoptimize to fix Render Blocking Scripts and CSS.
We’ll use a different plugin for this strategy, which is designed to improve the delivery of your website’s CSS and JS files. While this plugin accomplishes the job, it lacks the additional significant capabilities included in WP Rocket.
To adjust the plugin settings, go to Settings » Autoptimize once it’s been activated.
Then, scroll down to the CSS Options box and choose ‘Optimize CSS Code.’ Check that the ‘Aggregate CSS-files’ option is turned off.
You can now save your changes by clicking the ‘Save Changes and Empty Cache’ button.
Use the Page Speed Insights tool to evaluate your website. With these minimal adjustments, we were able to resolve the render-blocking problem on our sample site.
You may, for example, enable the plugin to include inline JS and delete scripts that are normally banned, such as seal.js and jquery.js.
To save your changes and clear the plugin cache, click the ‘Save changes and Empty Cache’ button.
After you’ve finished, use the Page Speed tool to verify your website once again.
What is the mechanism behind it?
This helps you to resolve the problem with render-blocking scripts and styles. Please bear in mind, however, that it may have an impact on the performance or design of your website.
While the tools listed above may assist, your plugins may need scripts with a higher priority level to function effectively. In such scenario, the fixes listed above may damage the functionality of such plugins or cause them to act strangely.
Certain difficulties, such as improving CSS delivery for above-the-fold content, may still be shown by Google. WP Rocket lets you address this by manually inserting the Critical CSS needed to show your theme’s above-the-fold region.
However, figuring out what CSS code you’ll need to show text above the fold might be challenging.