How to Eliminate Render Blocking Resources on Your Site

The two most common resource types that will cause assets for being render-blocking would be CSS and JavaScript which are being loaded on the front-end of your site.

Front-end CSS and JS files would be from active plugins which are loading assets on the front-end as well as the active theme would be loading both CSS files and JavaScript files.

Two of the easiest plugins to use that work together to be able to eliminate render-blocking resources on your site are Autoptimize and Async JavaScript.

The Async JavaScript plugin has an integration setting if the Autoptimize plugin is active on the site.

If you are using the WP Rocket plugin for a full-page caching solution it also includes options to minify CSS and JavaScript files which will be able to stop assets from being rendered blocking on your site.

The WP Rocket plugin can also load CSS asynchronously and you can also delay the execution of JavaScript assets that are being generated on the site.

Using the free plugin solution or the paid plugin solution will help you to able to remove render-blocking resources on your site which will in turn improve the front-end experience for site users.

Useful Links

• https://wordpress.org/plugins/autoptimize/
• https://wordpress.org/plugins/async-javascript/
• https://docs.wp-rocket.me/article/1350-css-minify-combine
• https://docs.wp-rocket.me/article/1351-javascript-minify-combine
• https://docs.wp-rocket.me/article/1266-load-css-asynchronously
• https://docs.wp-rocket.me/article/1349-delay-javascript-execution
• https://gtmetrix.com/blog/how-to-eliminate-render-blocking-resources/
• https://web.dev/render-blocking-resources/
• https://blog.webpagetest.org/posts/identifying-and-testing-blocking-third-party-requests/