Do you want to get Fix Render-Blocking JavaScript and CSS in WordPress?
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.
In this post, we’ll teach you how to increase your Google PageSpeed score by fixing render-blocking JavaScript and CSS in WordPress.
What is Render-Blocking JavaScript and CSS, and how does it work?
Blocking should be displayed JavaScript and CSS are files that block a website from displaying a page until these files have been loaded.
Every WordPress website includes a theme and plugins that include JavaScript and CSS files on the front-end. These scripts may slow down your site’s page load speed and even prevent it from rendering.
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.
Render-blocking JavaScript and CSS are the names for these scripts and stylesheets.
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.
After that, let’s look at what you can do in WordPress to address render-blocking JavaScript and CSS.
We’ll go through two techniques for fixing WordPress’s render-blocking JavaScript and CSS. You may choose the one that is most appropriate for your website.
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.
The WP Rocket plugin must first be installed and activated. See our step-by-step guide on installing a WordPress plugin for more information.
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.
JavaScript and CSS optimization features are disabled by default. Because these optimizations may have an impact on the aesthetic or functionality of your website, the plugin enables you to turn them on and off as needed.
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.
Then, scroll down to the JavaScript Files section. You may check all of the settings for optimal performance improvement from here.
As with CSS, you may minify and combine JavaScript scripts.
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.
Continue scrolling down and tick the boxes next to the ‘Load JavaScript Defered’ and ‘Safe Mode for jQuery’ choices.
Non-essential JavaScripts will be delayed, and the jQuery safe mode will enable you to load jQuery for themes that may utilize it inline. If you’re positive your theme doesn’t contain inline jQuery anywhere, you may uncheck this option.
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.
The Autoptimize plugin should be installed and activated first. See our step-by-step guide on installing a WordPress plugin for more information.
To adjust the plugin settings, go to Settings » Autoptimize once it’s been activated.
To begin, go to the JavaScript Options block and tick the box next to the ‘Optimize JavaScript Code’ option. Check that the ‘Aggregate JS-files’ option is turned off.
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.
If there are still render-blocking scripts, return to the plugin’s preferences page and double-check the choices under JavaScript and CSS.
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?
All enqueued JavaScript and CSS are gathered by Autoptimize. After that, it minifies CSS and JavaScript files and sends async or delayed cached versions of them to your website.
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.
Troubleshooting
It may be difficult to entirely resolve all render-blocking JavaScript and CSS problems depending on how the plugins and your WordPress theme utilize JavaScript and CSS.
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.
We hope that this post has shown you how to repair JavaScript and CSS in WordPress that are rendering-blocking.
Comments are closed.