What is render blocking on Pagespeed?
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.
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.
(?:wp-content|wp-includes)(.*) /jquery-?[0-9.]*(.min|.slim|.slim.min)?.js js-(before|after)
The reason behind this formula is as follows:
- /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.
If you’re using the Wp Rocket version below 3.9, consider this guide.
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.
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“.
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.
On the CSS setting from Minify tab, past the CSS you want to load asynchronously: