How to eliminate render-blocking resources in Wordpress

Running render-blocking assets might be one of the highest causes of having a bad Pagespeed score. Find out in 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 Javascript from loading render-blocking by loading it asynchronously(async), deferred(defer) or delaying it 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.

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:

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 can 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 the internal js exclusion list).

The textbox now is for placing the javascript you want to be excluded from. Use it to place essential javascript that cannot be lazy-loaded:

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.

How to remove render-blocking Javascript or CSS

After installing Asset Cleanup, you’re prompted 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.

Some advanced options such as removing hardcoded (non-enqueued) CSS and Inline Javascript are only available on Asset Cleanup Pro.

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.

Remove the unused CSS enabling the “unload on this page” button. Only remove 100% unused CSS files, and after clicking and interacting with all elements on the page.

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.

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