🔥 🥳 Get your Wordpress Pagespeed optimized today for $99 🔥 🥳 Conditions apply.

How to eliminate render blocking resources in WordPress

Last updated on August 25, 2021 | By

Render blocking might be of the highest cause of having a bad Pagespeed score. Find out on this guide how to remove either Javascript or CSS files from render blocking in WordPress.

What is render blocking on Pagespeed?

As the name says, render blocking assets are files that load synchronously with the page assets, therefore it blocks the page rendering, as it loads simultaneously with other assets. It can be either a Javascript or a CSS file causing it.

You should remove any non-essential Javascript or CSS file from render blocking.

To simply eliminate a file from render blocking you need just to remove it from loading synchronously. You can remove CSS from loading render blocking by loading it asynchronously. You can remove JS from loading render blocking by loading it asynchronously(async), deferred(defer), or delay until user-interaction.

With a high amount of render blocking files loading synchronously, your website will take time to become interactive.

How to remove render blocking Javascript in WordPress with a free plugin

Flying Scripts is a free, tested, and up-to-date plugin that lets you load javascript after user interaction, removing it from blocking the page rendering. Install it on WordPress and place the keyword you’d want to delay the javascript plugin.

Hot to remove unused javascript using a free plugin

To find the keyword you can either use the asset name or use Chrome Dev Tools; click F12 on Chrome, click the “Network” tab, and hover over “Initiator” to see which file triggered the asset loading:

How to find unused javascript using a Chrome Dev Tools
Analytics.js was initiated by www.googletagmanager.com/gtag, we can use gtag keyword to delay analytics.js

Place the domain keyword on Flying Scripts.

You can use ”.js” without the “ “ to delay all the javascript files(not recommended). Note that not every plugin is compatible with such delays. You should never delay a script that is essential for the initial render, it will break your website. 

How to remove render blocking Javascript with Wp Rocket

Wp Rocket updated its logic for delaying javascript, it now delays all javascript, including inline scripts, and has a default list of exclusions(alongside internal js exclusion list).

The textbox now is for placing javascript you want to be excluded from:

Delay Javascript Execution Wp Rocket

The following formulas will be included by default on WP Rocket and exclude essential Javascript to avoid errors:

(?:wp-content|wp-includes)(.*)
/jquery-?[0-9.]*(.min|.slim|.slim.min)?.js
js-(before|after)

The reason behind this formula is as follows:

  • (?:wp-content|wp-includes)(.) – excludes all internal javascript files
  • /jquery-?[0-9.](.min|.slim|.slim.min)?.js – excludes jQuery
  • js-(before|after) – exclude inline scripts. Only inline scripts that are added using wp_add_inline_script() will be excluded.

If you haven’t bought Wp Rocket yet, consider using my reflink for a +10% discount.

Delay JavaScript Wp Rocket 3.9 or higher compatibility exclusions

To prevent any issues that arise from using the delay javascript feature, Wp Rocket has a list of plugins/themes/services that you can add now to avoid it, click HERE for the list.

If you’re using the Wp Rocket version below 3.9, consider this guide.

How to remove render blocking Javascript with Asset Cleanup

After installing Asset Cleanup, you’re prompt with welcome messages guiding you through the plugin. You can use Asset Cleanup with a compatible cache plugin but avoid enabling overlapping features that may cause issues.

Go to the wordpress pages or posts tabs and you notice a new button “Manage CSS & JS”, click on it and a new page opens with the enqueued files from that specific page.

image 5
New button on the WordPress interface

To better assist you with removing your unwanted css or js, you can change the Assets List Layout to “grouped by size”, which will list assets by size.

image 4

Remove the unused CSS or JS enabling the “unload on this page” button. You can test any combination of removed assets using “Test Mode“.

How to remove render blocking CSS with Wp Optimize

You can use Wp Optimize to remove render-blocking CSS from loading on WordPress and improve Pagespeed.

Wp Optimize has a function that loads the CSS asynchronously, therefore non-render-blocking, use it to remove non-critical css from blocking the page rendering.

Wp Optimize lets you load any CSS files asynchronously. Use this to solve the “reduce unused css” from Pagespeed. Install the plugin and enable “Process CSS files” on Minify tab.

image 1

On the CSS setting from Minify tab, past the CSS you want to load asynchronously:

image 11

Get a Core Web Vitals Boost

Send us your request!

Leave a Comment