8 Ways To Eliminate Render-Blocking Resources In WordPress With Perfmatters And Other Optimizations In Cache Plugins

Eliminate render blocking resources wordpress

IMO, the best tool to eliminate render-blocking resources is definitely Perfmatters.

It has nearly every setting/feature to ensure resources aren’t render-blocking: defer/delay JavaScript, remove unused CSS, script manager, hosting fonts locally while preloading them, and identifying plugins using jQuery. I wrote a detailed guide on the ideal Perfmatters settings. If you’re going the free route, try plugins like Flying Scripts, Asset CleanUp, and OMGF for these.

While most of these optimizations are straightforward, removing unused CSS + JavaScript is probably the most challenging. If you see this in PageSpeed Insights, jump that section. If you need to reduce impact of third-party code, jump to “delay JavaScript” as well as “hosting fonts locally.” Then if you see jQuery in your report, you’ll want to “avoid jQuery-dependent plugins.”

You can also drop me a comment with your report and I’ll have a look :)

Eliminate render blocking resources wordpress 4

 

1. Defer JavaScript

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

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.

If deferring JavaScript breaks your site, you’ll need to exclude problematic JS files.

Eliminate render blocking resources defer
Source: WP Speed Matters Facebook Group
Omm switches to flyingpress
FlyingPress got me better scores and a faster site

 

2. Delay JavaScript

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

Perfmatters defer delay javascript

 

3. Remove Unused CSS + JavaScript

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.

I have more detailed guides on removing unused CSS and JavaScript.

Css javascript chrome dev tools
Coverage report shows most CSS/JS is from page builders + plugins

 

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.

If you’re using Perfmatters to remove unused CSS, leave CSS optimizations OFF in your cache plugin, but you can use your cache plugin for JavaScript optimizations (like minification and deferral) as long as you avoid duplicate functionality by only using 1 plugin per optimization.

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.

Flyingpress css settings

 

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.

Jquery plugin dependencies 1

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:

Remove jquery

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.

Local vs third party fonts

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.

Preload fonts 2

 

7. Activate Page Builder Performance Settings

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. This makes them non-render blocking. You’ll also enable Improved Asset Loading which helps remove unused CSS and JavaScript added by Elementor.

Elementor experiments

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

 

8. Use Plugins To Eliminate Render-Blocking Resources

Here’s a list of WordPress plugins to eliminate render-blocking resources:

  • Perfmatters – mentioned several times in this article for various features to load resources non render-blocking, otherwise you may need to install several plugins to unload CSS/JS, host fonts locally, optimize your Analytics, and delay JavaScript.
  • 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.
  • Async JavaScript – simple plugin to defer JavaScript by clicking “apply defer.”
  • Flying Scripts – delays JavaScript if your optimization plugin doesn’t support it.
  • 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.
  • Asset CleanUp – free plugin to unload CSS/JavaScript when not using Perfmatters.

Defer javascript autoptimize
If you still have errors, try Autoptimize

 

Retest Your Site

Fixing this will improve both FCP/LCP.

Speedvitals omm

How do I eliminate render-blocking resources in WordPress?

Deferring and delaying JavaScript can eliminate render-blocking resources, or reduce the size of CSS/JavaScript using cache plugins, Perfmatters, and lightweight themes + plugins.

How do I eliminate render-blocking resources in WP Rocket?

WP Rocket eliminates render-blocking resources by deferring/delaying JavaScript, removing unused CSS, minifying CSS/JavaScript files, as well as preloading fonts.

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?

To eliminate render-blocking resources without a WordPress plugin, you'll need to defer JavaScript, generate critical CSS, and inline CSS manually. Along with hosting fonts using tools like Transfonter and preloading them. Use a tool like PurifyCSS to clean up CSS code.

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

You Might Also Like:

1 Comment...

Leave a Comment