8 Easy Ways To Eliminate Render-Blocking Resources In WordPress

If you ran your site through PageSpeed Insights, you may see a recommendation to eliminate render-blocking resources.

Eliminate render-blocking resources

In WordPress, eliminating render-blocking resources in WordPress is often fixed by deferring JavaScript in a plugin such as Autoptimize. Common solutions also include using inline critical CSS, removing unused CSS and JavaScript in asset unloading plugins, and preloading your fonts.

WP Rocket and other cache plugins may have an option to load JavaScript deferred and optimize CSS delivery which can help. However, Autoptimize and Async JavaScript are specifically designed to optimize CSS and JavaScript which usually gives you better scores.

 

1. Find The Source Of Render-Blocking Resources

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.

Render-Blocking Resources WordPress

Common Render-Blocking Resources

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

 

2. Defer JavaScript

Deferring JavaScript can fix many render-blocking resources in WordPress.

Autoptimize and Async JavaScript often do a better job at deferring JavaScript than cache plugins (e.g. load JavaScript deferred in WP Rocket’s settings). For my site, they fixed render-blocking resources when WP Rocket did not. The default settings are usually fine for both plugins. Async JavaScript also gives you better control on which specific files to defer or async.

In Autoptimize, optimize and aggregate CSS and JavaScript files:

Optimize Aggregate JavaScript CSS

In Async JavaScript, click “apply defer” in the Quick Settings.

Async JavaScript Apply Defer

If you’re using SG Optimizer or another cache plugin, they may also have an option to defer render-blocking JavaScript.

Defer render-blocking JS - SG Optimizer

 

3. Inline Critical CSS

Many cache plugins have an option to optimize CSS delivery.

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 contributing to cumulative layout shift (CLS) 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 in your cache plugin.
  • Scan your website using PurifyCSS.
  • Download the combined, purified, and minified CSS.
  • Paste the code in your fallback critical CSS box.

Remove Unused CSS - PurifyCSS

WP Rocket fallback critical CSS

If neither of those work, you may want to 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 (with higher compatibility). I haven’t used it, but I know his speed plugins are great.

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.

 

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. Choose A Plugin To Unload Assets

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.

2. Enable The Script Manager And Test Mode

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

3. View Assets Loading On Different Areas Of Your Site

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.

4. Remove Unused CSS And JavaScript Files

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 Assets With Asset CleanUp
Disable Plugins Perfmatters
Disabling Unused Assets With Perfmatters
Remove Elementor CSS JavaScript
List Of Potential Assets 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

  • 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. This loads fonts locally from your server instead of third-party sites (fonts.gstatic.com).

Host fonts locally

Preload Fonts

  • Copy your font files from PageSpeed Insights or your GTmetrix Waterfall chart and preload them (you can do it manually or by using a plugin like WP Rocket or Perfmatters).

Preload Fonts

Additionally, you should also add font-display:swap to your font files to fix ensure text remains visible during webfont load in PageSpeed Insights which can also help cumulative layout shift.

 

6. 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

 

7. 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.

 

8. 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.

Common 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