If you ran your website through Lighthouse, you may see a recommendation to 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.
Common Render-Blocking Resources
- CSS files
- Third-party code
- Page builders
3. Inline Critical CSS
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.
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.
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.
2. Use Asset CleanUp Or Perfmatters
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.
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 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).
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.
6. Eliminate Render-Blocking Resources With Elementor/Divi
Both Elementor and Divi have settings that can eliminate render blocking resources.
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.
8. 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.
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.
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.