If you ran your site through PageSpeed Insights, you may see a recommendation to eliminate render-blocking resources.
Eliminate Render-Blocking Resources
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.
Common Render-Blocking Resources
- CSS files
- Third-party code
- Page builders
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.
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.
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.
3. View Assets Loading On Different Areas Of Your Site
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.
- 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).
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).
- 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).
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.
7. Use Lightweight Forms And Sliders
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.
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.
Frequently Asked Questions
How do I eliminate render-blocking resources in WordPress?
How to eliminate render-blocking resources in WP Rocket?
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?
How do I eliminate render-blocking resources without a WordPress plugin?
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.