How to Eliminate Render-Blocking JavaScript and CSS on WordPress

 If you look at Google’s Pagespeed rules, one of them is to eliminate render-block JavaScript and CSS. Any failure in it will result in a slow page loading speed. 

Well, every time you install a new theme or plugin, they add a JavaScript and CSS code on the front-end. As a result, the browser may require more time to load the page.

Up-to-the-fold (ATF) means the portion of your webpage that appears when the page first loads. Any part of the page you have to scroll down to access is non-ATF.

Therefore, if non-relevant JavaScript and CSS code is provided when visitors load on your website, you may receive an alert to reduce the number of render-blocking JavaScript and CSS in content resources above.

Detecting Render-Blocking JavaScript and CSS Using Google Pagespeed Insights The 

first step to fix render-blocks is testing the speed of your site using Google PageSpeed ​​Insights. To do this, follow these steps:

Go to the page, and paste the URL of your website into the “Enter a web page URL” field. 
Click on Analysis to get the report.

If you also get the suggestion to eliminate render-blocking JavaScript and CSS in above-and-fold content, you’ll need to fix the problem. 
Render-blocking JavaScript and CSS eliminate warnings in the above content. Just do your best to get a good score without sacrificing user experience.

If you have scripts on your WordPress site that are required for a strong UX, you should not remove them just to get a slightly higher score on PageSpeed ​​Insights.

The rules that Google runs on your website are just guidelines and should be taken as such. WordPress, it is easy to render JavaScript-CSS resources on your WordPress site. You can use the three plugins listed below:

W3 Total Cache is one of our favorites W3 Total Cache plugin. Once it is installed and activated, follow these steps on your WordPress admin dashboard:

Go to Display -> General Settings. 

Find the minimum title on the page. Then, you will see some options under this title. 
Tick ​​the Enable box for Minify. Then, for the Minify Mode option, choose Manual. 
Press Save All Settings. 

Minimizing CSS and JS Script Resources with the W3 Total Cache Plugin Get 
all the render-blocking JavaScript and CSS scripts you can find through Google Pagespeed Insights. 
Once you get upset, go back to Display -> Minimize on your WordPress dashboard. 
Find the JS section. In operations in the regions section, first choose non-blocker using the “defer” embed type for the <head> tag.

For JS file management, choose your active theme and click on Add Script button. As per the fields below, copy and paste the JavaScript URL from Google PageSpeed ​​Insights. 
Remove the render blocking the JS resources with the W3 Total Cache plugin, 
scroll down and find the CSS section. For CSS file management, choose your active theme and click on Add a style sheet. Similar to the step above, copy CSS stylesheet URLs from PageSpeed ​​Insight and paste them on the required fields.  Remove blocked JSS resources with the W3 Total Cache plugin 

Autoptimize

Alternatively, you can use the autoptime plugin to resolve render-blocking JavaScript and CSS errors. Once the plugin is installed and activated, do these steps on your dashboard:

Go to Settings -> Autooptize. 
Check boxes to optimize JavaScript code? “And Optimize CSS Code? 
Save changes and press the empty cache button. 
Optimize CSS and JavaScript with the Autoptimize plugin . In 
most cases, this is enough to fix the warning. However, the results are based on your theme and active plugins. But may vary.

To make sure your problem is resolved, run your site through Pagespeed Insights again. If there are any blocked JS and CSS resources left, take the optimization further by following these steps:

Go back to Settings -> Autooptize. 
Press the Advanced Settings button. 
Then, examine the options for collecting inline inline JS and also inline CSS.

Speed ​​Booster Pack 

Another popular plugin that you may find useful in fixing the render-blocking JavaScript and CSS error for your WordPress website is the Speed ​​Booster Pack. To do this, follow these steps on your wp-admin area:

In the JavaScript optimization menu, move the script to the footer and defer parsing of JavaScript files. 
Enabling scripts in the footer and defer parsing of JavaScript files on the JavaScript optimization section to fix render-blocking JavaScript and CSS in an up-to-fold content error 
Scroll to the CSS optimization menu to set the CSS rendering-blocking optimization Do the.

LEAVE A REPLY

Please enter your comment!
Please enter your name here