Scroll to top
USA
651 N Broad St, Suite 206,
MiddleTown, New Castle,
Delaware - 19709
Canada
635 Ashprior Avenue,
Mississauga, Ontario,
Canada - L5R3N6
India
34, Shiwanshu Bunglows
Vadodara, Gujarat - 390007

How to Fix Render-Blocking JavaScript and CSS in WordPress

78 / 100

Competing with millions of websites is not a piece of cake in this age of the internet. You need to make sure it is easier than those on your website. If you equate the speed of the website with the top websites, you could be missing because the page loading time is below two seconds for most pages.

how to fix render-blocking JAVASCRIPT & CSS in WordPress

If you want to rank high on search engine result pages (SERP), getting a website that loads quickly is essential. That’s why PageSpeed Tips from Google is there to help you maximize the loading speed of your web. If you receive an “Eliminate JavaScript and CSS render-blocking in above-the-fold content” alert while using the tool, don’t worry. I will be showing you how to address the problem in this post.

If you look at Google’s PageSpeed rules, one of them is to remove JavaScript and CSS render-blocking. Any malfunction leads to a slower page loading speed. But how do JavaScript and CSS slow your site down on your HTML page? 

google pagespeed insights

Well, they add JavaScript and CSS code to the front-end any time you install a new theme or plugin. As a consequence, it can take more time for browsers to load the page.

What It Means to Have Render-Blocking JavaScript and CSS Code?

When your website is accessed by a customer, their web browser will start loading the page from top to bottom. Above the fold (ATF) text, the upper section of the page, which is loaded and shown first, is named.

During the loading process, if the browser comes across a CSS stylesheet or JS script, the page loading will be paused to parse those tools, thus slowing the overall page load pace.

The ones we call render-blocking are only the CSS stylesheets or JS scripts that are loaded when loading above the fold text but are considered non-relevant to its functioning. A strategy for counteracting this is to delay excessive resource loading.

You can do this by loading in the footer (before the closing tag) your JS scripts that are responsible for interactions and functionality rather than design.

Fixing Render-Blocking JavaScript and CSS code can improve your site speed significantly. Check out how to fix render-blocking scripts for WordPress websites here. Click To Tweet

In order to prevent the so-called flashes of unstyled content (FOUC), CSS stylesheets should always be loaded at the top (in the head section). 

FOUC is a short moment in which the default browser stylization is loaded above the fold content, which can look unattractive to visitors and cause them to turn away from your web. 

As both CSS and JS are applied to all plugins and themes, some of which might be render-blocking, you need to tackle this problem as effectively as possible. I am going to introduce you to some plugins that you can use to fix scripts and stylesheets that are render-blocking. 

The solutions involve loading smaller CSS inline with HTML, using conditional CSS-specifying viewports and widths (with the use of media queries), and asynchronously loading the remaining stylesheets when it comes to removing render-blocking CSS stylesheets, which has become a standard WordPress practice.

1. Fix Render Blocking Scripts and CSS with WP Rocket

You need to install and activate WP Rocket Plugin. For more details, you can check our WordPress Plugins: How many should you install in 2020

WP Rocket works out of the box, and your website can allow caching with optimized settings. In our complete guide on how to install and configure WP Rocket in WordPress properly, you can learn more about it. 

It does not toggle on JavaScript and CSS optimization options by default. These optimizations can potentially impact the appearance of your website or certain functionality, which is why the plugin enables you to optionally activate these settings.

In order to achieve this you need to head over to the Settings > WP Rocket > File Optimization. Then check the boxes next to Minify CSS, Combine CSS Files, and Optimize CSS Delivery options.

WP Rocket file optimization

Now go to JavaScript file options.

You can combine JavaScript files just as you did with CSS.

You can stop WordPress from loading the Migrate jQuery file, too. It is a script that is loaded by WordPress to provide plugin and theme compatibility using old versions of jQuery.

Most websites do not need this file, but you would still like to review your website to make sure that your theme or plugins are not affected by the removal.

Also, check the boxes next to ‘Load JavaScript Deferred’ and ‘Safe Mode for jQuery’ options.

Javascript file changes

Click on the Save button. Once done, clear the cache in WP Rocket before you test your site again with the help of Google Page Speed.

2. Use Autoptimize to Minify CSS and JavaScript Files

Go to Plugins > Add New. Search for Autoptimize. Simply install and activate the plugin. Then go to Settings > Autoptimize. Here you can locate the JavaScript and CSS options. Check the boxes in order to optimize JavaScript and CSS.

Autoptimize plugin for WordPress

Click on Save Changes and empty the cache. Once done like before, check your website’s speed by using the PageSpeed Insights tool.

Conclusion

It may be very difficult to fully address all render-blocking JavaScript and CSS problems, depending on how the plugins and your WordPress theme use JavaScript and CSS. 

Although the resources above will help, in order to function properly, your plugins can need those scripts at a different priority level. In that case, the solutions above can break the functionality of such plugins or may act unexpectedly.

Google may still show you certain problems, such as optimizing the delivery of CSS above the content fold. By manually adding Critical CSS required to display the above fold area of your theme, WP Rocket allows you to fix that. 

However, it might be quite difficult to find out what CSS code you need to display above the content of the fold. 

I hope this article has helped you learn how to fix JavaScript and CSS render-blocking in WordPress. You may also want to see our beginner’s guide for choosing a WordPress Hosting Service on how to choose a hosting service for beginners’ in WordPress.

Author avatar
Tim Michaels
I am into WordPress and web development for the last 10 years. I use my experience to help people just starting with WordPress. Follow my blog at WP Uber for everything related to WordPress.
We use cookies to give you the best experience.
Do NOT follow this link or you will be banned from the site!