9 Easy Ways To Eliminate Render-Blocking Resources In WordPress

If you ran your website through Lighthouse, you may see a recommendation to eliminate render-blocking resources.

You can eliminate render-blocking resources in WordPress by deferring JavaScript and inlining critical CSS styles. This can be done in most cache plugins, Autoptimize, and Async JavaScript. Elementor + Divi also have built-in settings that can eliminate render-blocking resources using defer and inline CSS. Removing unused CSS, JavaScript, and third-party code can also help fix it.

Check your report, see which files are causing issues (and whether it’s from certain plugins or third-party JavaScript), learn whether it’s CSS or JavaScript, and follow the tips in this tutorial.

Eliminate render-blocking resources

 

1. Find Render-Blocking Files

Where are your render-blocking resources loading from? What is the transfer time and potential savings? Narrow down which file types cause issues so you know what to focus on.

Usage - Chrome Dev Tools
Find render-blocking files in Chrome Dev Tools → Sources → Coverage

Common Render-Blocking Resources

  • CSS files
  • JavaScript files
  • Third-party code
  • Plugins
  • jQuery
  • Fonts
  • Animations
  • Page builders
  • WooCommerce

 

2. Defer JavaScript

JavaScript should be deferred so it’s not render-blocking.

WP Rocket, LiteSpeed Cache, and most cache plugins have an option to defer JavaScript. Autoptimize and Async JavaScript also let you defer JavaScript and inline CSS, and they often do a better job at fixing render-blocking resources than cache plugins – both are worth testing!

Eliminate Render-Blocking Resources
Source: WP Speed Matters Facebook Group
Load JavaScript Deferred WP Rocket
Defer Javascript in WP Rocket
Load JS Deferred LiteSpeed Cache
Defer JavaScript in LiteSpeed Cache
Defer render-blocking JS - SG Optimizer
Defer JavaScript in SG Optimizer
Async JavaScript Apply Defer
Defer JavaScript in Async JavaScript
Defer JavaScript Autoptimize
Defer JavaScript in Autoptimize

In the Autoptimize settings, you can choose to either aggregate (combine) JS-files or do not aggregate but defer. I recommend testing each one of these settings and checking your results. Most of these plugins include an option to exclude JavaScript from defer in case you get errors.

 

3. Inline Critical CSS

Most cache plugins also have an option to optimize CSS delivery (LiteSpeed Cache has the option to load CSS asynchronously and multiple other inline options in the CSS/JS settings).

When you activate it in WP Rocket, they generate critical CSS then “load all other CSS files asynchronously… without render-blocking.”

First, make sure critical CSS is working and not causing layout shifts (which it often does) or FOUT (flash of unstyled text when you open your website). To fix this, you may need to clear cache or regenerate critical CSS in WP Rocket as well as your page builder if you’re using one. You may also need to exclude files from optimize CSS delivery using WP Rocket’s helper plugin.

It’s also a good idea to set a fallback critical CSS:

  • Enable optimize CSS delivery.
  • Scan your website using PurifyCSS.
  • Download the combined, purified, and minified CSS.
  • Copy/paste the code into your fallback critical CSS setting.

Remove Unused CSS - PurifyCSS

WP Rocket fallback critical CSS

Autoptimize also lets you aggregate inline CSS, aggregate inline JavaScript, and inline and defer CSS. You can test these, but they can break your WordPress site and overlap with cache plugins.

If none of those work, you can try Gijo Varghese’s FlyingPress plugin. He’s the admin of the WP Speed Matters Facebook group and many members say it gives better results than WP Rocket.

 

4. Remove Unused CSS And JavaScript

You’ve probably heard of Asset CleanUp and Perfmatters.

They let you remove CSS and JavaScript where they’re not being used. Trimming CSS and JavaScript can have a huge impact on render-blocking resources as well as your overall scores.

1. Remove Unused CSS With WP Rocket Or LiteSpeed

WP Rocket and LiteSpeed Cache have options to remove unused CSS in WP Rocket’s file optimization settings and unique CSS (UCSS) in LiteSpeed Cache’s CSS optimization settings.

Remove unsued CSS WP Rocket

2. Use Asset CleanUp Or Perfmatters

Both these plugins let you disable unused CSS/JavaScript where it doesn’t need to load.

I wrote a detailed comparison between Asset CleanUp vs. Perfmatters. I personally use Perfmatters because the UI/UX is more user-friendly. However, the pro version of Asset CleanUp lets you unload custom CSS while the free version (and Perfmatters) can’t do this.

If using Perfmatters, enable the script manager in the plugin settings. If using Asset CleanUp, enable test mode which lets you test unloading assets without breaking your site (only you will see whether there are visible changes). Perfmatters doesn’t have a test mode so you will need to check for visible errors on your live site during the testing, or create a staging site for testing.

Perfmatters-Script-Manager-Toggle

In Perfmatters, view any page on your site and click the “script manager” in the admin bar. If using Asset CleanUp, edit a page and you’ll see the Asset CleanUp section at the bottom of the editor. Go through multiple pages/posts that load different types of plugins, fonts, JavaScript, CSS, etc. You’ll want to make sure you unload assets in different areas of your WordPress site.

Script Manager Tab

Now it’s time to disable the stuff that’s not being used. Depending on which plugin you’re using, you can disable files:

  • Everywhere, on current URL, or use regex.
  • Everywhere except current URL, pages, or posts.
  • For files you’re not sure of, do a little research (e.g. Google Search) before disabling it.

Examples:

  • Disable slider plugin on pages that don’t use sliders.
  • Disable rich snippets plugin on pages that don’t use rich snippets.
  • Disable contact form plugin on pages that don’t have a contact form.
  • Disable WooCommerce scripts and styles on non-eCommerce pages.
  • Disable affiliate link management plugin on pages that don’t use aff links.
  • Disable social sharing plugin on all pages (since it’s usually for blog posts).
  • Disable unused functionality in your page builder (see this post for Elementor).
Remove Contact Form JavaScript
Disabling unused plugins with Asset CleanUp
Disable Plugins Perfmatters
Disabling unused plugins with Perfmatters
Remove Elementor CSS JavaScript
List of potential CSS/JS to remove in Elementor

 

5. Host Fonts Locally And Preload Them

Render-blocking resources can sometimes be caused by fonts.

Optimizing fonts can fix multiple errors in PageSpeed Insights related to render-blocking, CLS, and third-party code. Regardless of whether fonts are causing errors, it’s always faster to host fonts locally on your server and preload them.

Host fonts locally by downloading fonts from Google Fonts. Only download the font families, weights, variants, and font icons you absolutely need. Next, convert them to WOFF2 format using a tool and add them to your CSS. You can also try the OMGF plugin which may be easier. This loads fonts locally from your server instead of third-party websites (like fonts.gstatic.com).

Host fonts locally

PageSpeed Insights tells you which fonts to preload in preload key requests which you can do in most cache plugins, manually with a simple line of code, or the Pre* Party Resource Hints plugin.

Preload Fonts

 

6. Eliminate Render-Blocking Resources With Elementor/Divi

Both Elementor and Divi have settings that can eliminate render blocking resources.

In your Elementor Experiments settings, enable Improved CSS Loading and Font-Awesome Inline to load CSS and fonts inline which will make them non-render blocking. Improved Asset Loading removes unused CSS/JavaScript which can improve core web vitals in multiple areas.

Eliminate render-blocking resources Elementor

Divi’s performance settings can also eliminate render-blocking resources by applying critical CSS, deferring CSS/JavaScript, and improving Google Fonts loading by loading your fonts inline.

Eliminate render-blocking resources Divi

 

7. Avoid jQuery Heavy Plugins

If you notice a jQuery-heavy plugin in your render-blocking resources report, you may want to find an alternative.

I recommend reviewing my list of common slow plugins and installing the WP Hive Chrome Extension. This tells you whether a plugin has an impact on memory usage and PageSpeed Insights when browsing the WordPress repository. Query Monitor can also find slow plugins.

Many people are switching from Yoast to Rank Math, Revolution Slider to Smart Slider, Elementor to Oxygen, and so on. Web vitals definitely take into account lightweight plugins.

It may even be possible to disable jquery-migrate in Perfmatters or Asset CleanUp.

jQuery-JavaScript

 

8. Use Lightweight Forms And Sliders

If forms or sliders are giving you render-blocking issues, try Fluent Forms (forms) and Smart Slider or MetaSlider (sliders). They’re much more lightweight than CF7, Revolution Slider, etc.

These can also be disabled everywhere but pages that actually use forms/sliders using Perfmatters or Asset CleanUp. Sliders should generally be avoided, especially on mobile.

 

9. Reduce Impact Of Third-Party Code

By default, third-party code added to your WordPress site is render-blocking.

Some third-party code is easy to optimize, but it’s generally best to avoid too much especially when it comes to advertisements, Tag Manager, and heavy social sharing plugins on your blog.

Examples of third-party code

  • Google Fonts – host locally and preload them.
  • Google Analytics – host locally using a local analytics plugin.
  • Google Tag Manager – don’t overtrack and use too many tags.
  • Embedded videos – lazy load iframes and use a preview image.
  • Google Maps – lazy load iframes or use a screenshot of the map.
  • Gravatars (in your comments) – host locally use WP User Avatar.
  • Google AdSense – reserve space for ads and specify ad dimensions.

Reduce Impact Of Third-Party Code WordPress

Delay Third-Party JavaScript

Delaying JavaScript until user interaction can significantly improve your initial load time. You can do this using Flying Scripts or WP Rocket’s delay JavaScript execution option. WP Rocket has a nifty list of JavaScript files to delay which are automatically used in their plugin. If you’re using a Flying Scripts or another plugin, copy that list. You may be able to delay other JavaScript like //cdnjs.cloudflare.com. I personally delayed my comments (both wpDiscuz and Gravatars).

Delay JavaScript Execution

Use Browser Resource Hints

Preconnect and prefetch helps browsers anticipate third-party code and load it faster. Preconnect is usually only done with CDNs and fonts. Prefetch should be generally done with all third-party code (copy the domains in your PageSpeed Insights report or see this list of common domains to prefetch). You can add preconnect and prefetch manually, in Perfmatters, WP Rocket (preconnecting CDNs/fonts is automatic) or other browser resource hint plugins.

 

Retest Your Website For Render-Blocking Resources

Run your WordPress site through PageSpeed Insights or Lighthouse and check for render-blocking resources.

I found that with the right optimizations, you should only see a single render-blocking resource for Autoptimize. Otherwise, that plugin and the tips listed in this guide should fix most of them.

Eliminate Render-Blocking Resources WordPress - Passed Audit

 

Frequently Asked Questions

How do I eliminate render-blocking resources in WordPress?

Try deferring JavaScript, generating critical CSS, and inlining it (usually done through a cache plugin or Autoptimize). Trimming the size of CSS and JavaScript files and delaying third-party code can also eliminate render-blocking resources in WordPress.

How to eliminate render-blocking resources in WP Rocket?

Enable Load JavaScript Deferred and test the Optimize CSS Delivery setting in WP Rocket. Check if this causes FOUC (flash of unstyled content) or increases cumulative layout shift. You may need to regenerate critical CSS or set a fallback critical CSS in WP Rocket using a tool like PurifyCSS.

How do I eliminate render-blocking Google Fonts?

Hosting Google Fonts locally and preloading them can usually fix render-blocking resources related to fonts.

How do I eliminate render-blocking resources in Autoptimize?

Install Autoptimize and enable the settings for optimize CSS and JavaScript code. Also enable settings for aggregate CSS and JavaScript files. These should be enabled by default.

How do I eliminate render-blocking resources without a WordPress plugin?

Without a WordPress plugin, you will need to defer JavaScript, generate critical CSS, and inline CSS manually. You should also host fonts locally and preload them. Finally, use a tool like PurifyCSS to clean up your CSS code and optimize third-party domains on your site.

If you still have errors or have any questions about render-blocking resources, drop me a comment with your report (not your website URL or it will be marked as spam) and I can look.

Cheers,
Tom

About Tom Dupuis

Tom Dupuis 2017Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments