IMO, the best tool to eliminate render-blocking resources is definitely Perfmatters.
You can also drop me a comment with your report and I’ll have a look :)
While most cache plugins do this, I recommend using FlyingPress or LiteSpeed Cache, then Perfmatters for the script manager and bloat removal (General) settings. I’m not a fan of WP Rocket since it does a poor job with LCP. For example, it doesn’t properly optimize viewport images and lacks many features like hosting fonts locally, lazy rendering HTML elements, and RocketCDN (StackPath) is one of the worst. That’s why I listed WP Rocket as my #3 cache plugin.
Third-party code and plugins loading below the fold can usually be delayed.
One thing I’ll give WP Rocket and LiteSpeed Cache is they do this automatically after toggling the setting ON. However, you get more control with FlyingPress and Perfmatters (along with Flying Scripts) which makes you add them manually. It’s worth taking the time to read through their documentation because each one is different, but here are common scripts you can delay:
ga( ' ga(' google-analytics.com/analytics.js analytics.js gtagv4.js analytics-minimal.js /gtm.js /gtag/js gtag( /gtm- adsbygoogle.js grecaptcha.execute fbevents.js fbq( /busting/facebook-tracking/ wp-content/plugins/plugin-name
When using Perfmatters with a cache plugin, avoid enabling duplicate features.
Here, I used Perfmatters to delay Analytics, Tag Manager, Ads, reCAPTCHA, and Facebook Pixel. You can also try delaying plugins like third-party comments and social sharing plugins if they load below the fold (do it by replacing wp-content/plugins/plugin-name with the plugin name).
Not only will this help eliminate render-blocking resources, but you’ll be trimming the size of CSS/JS files which are usually the largest files on a site (check your PSI report for these errors).
- Use the coverage report to find large CSS/JS files – use the coverage report in Chrome Dev Tools to find your largest CSS/JS files, then look at the file name to determine whether it’s from a specific plugin, page builder, or third-party domain.
- Avoid bloated plugins/page builders – people still insist on using Elementor/Divi when they add more CSS/JS than other alternatives like GeneratePress + Kadence.
- Don’t use your page builder for the header/footer/sidebar – if you must use a page builder, code these in CSS instead of using your page builder which makes the code less bloated. They appear across your site and it makes a big difference.
- Enable built-in page builder performance settings – Elementor Experiments and Divi’s performance settings can significantly reduce the size of CSS/JS files.
- Remove unused CSS (but not in WP Rocket) – if enabling this, know that WP Rocket is one of the only plugins that loads used CSS inline when other plugins (FlyingPress, Perfmatters, LiteSpeed Cache) load it in a separate file. The 2nd option is faster because the file can be cached and it doesn’t increase HTML size.
- Enable CSS background images in Perfmatters – since background images are loaded from CSS in page builders, they’re not lazy loaded. This will lazy load them.
- Disable plugins on specific pages – Perfmatters + Asset CleanUp have a script manager to disable plugins (and other CSS/JS files) on pages they’re not loaded. Enable test mode to prevent it from breaking your site (disable when you’re done).
- Use a small Google Analytics tracking code – Perfmatters + Flying Analytics can use a small tracking code format, host it locally, delay it, and remove DoubleClick.
- Remove Gutenberg CSS when not using it – if you’re not using Gutenberg, remove Gutenberg’s CSS or it will load block-library/style.min.css across your site.
- Disable font icons when not using them – similar concept with font icons. If you’re not using them, disable them. For example, read Elementor’s instructions.
- Minify files – strips unnecessary characters from code, reducing CSS/JS file sizes.
- Host third-party code locally or delay it – just want to reiterate that third-party code should either be removed, hosted locally, or delayed. Otherwise, it adds JS.
4. Inline Critical CSS
Most cache plugins also generate critical CSS and used CSS which eliminates render-blocking resources by deprioritizing CSS files not needed above the fold.
LiteSpeed Cache has CSS/inline settings, but QUIC.cloud is needed for some of them to work. And if you make CSS changes to your site, be sure to regenerate critical CSS to keep it updated.
5. Avoid jQuery-Dependent Plugins
In your Perfmatters script manager settings, enable display dependencies.
Now when you go to your script manager and scroll down to “jQuery,” you’ll see all plugins on your site that depend on it. Which if you look at your PSI report, you may see it’s a bottleneck.
Removing jQuery can be a long/tedious journey that often involves replacing themes/plugins with jQuery-free alternatives or custom code. Here’s how one person was able to do remove it:
Right now, Rank Math is the only plugin on my site that uses jQuery.
6. Host Fonts Locally And Preload Them
If fonts are render-blocking, host them locally and preload them.
Several cache plugins and Perfmatters host fonts locally (including Elementor). But not WP Rocket – in which case you can use OMGF. This prevents external requests to fonts.gstatic.com.
Once fonts are hosted locally, you’ll want to preload fonts that load above the fold or are mentioned in CSS files. Make sure you test the impact of preloading each font in a Waterfall chart because preloading too many resources can have a negative impact on your load time.
7. Activate Page Builder Performance Settings
Elementor and Divi have settings that can eliminate render blocking resources.
8. Use Plugins To Eliminate Render-Blocking Resources
Here’s a list of WordPress plugins to eliminate render-blocking resources:
- FlyingPress – many settings overlap with Perfmatters. The main differences are FlyingPress does caching while Perfmatters unloads CSS/JS and eliminates bloat.
- Autoptimize – I found this can sometimes do a better job of optimizing CSS/JS than cache plugins since it only loaded 1 render-blocking resource compared to the 7 I had with WP Rocket. See my detailed tutorial on the Autoptimize settings.
- Flying Analytics – can help you reduce the size of Google Analytics tracking code.
- OMGF – host fonts locally, reduce their sizes, and several other font optimizations.
Retest Your Site
Fixing this will improve both FCP/LCP.
How do I eliminate render-blocking resources in WordPress?
How do I eliminate render-blocking resources in WP Rocket?
How do I eliminate render-blocking Google Fonts?
Hosting Google Fonts locally and preloading them can load them non render-blocking.
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.
This website is really number one on google. Cause there is something that no one doesn’t know.