How to Eliminate Render-Blocking Resources on WordPress (CSS + JavaScript)

Getting rid of render-blocking resources on your WordPress site can be an easy task if you use the right plugins 🔌 Check out how to tweak your settings and improve your site's speed!

If you've ever tried running your site through Google PageSpeed Insights, you were probably advised to eliminate render-blocking resources from your pages. When Google tells you to eliminate render-blocking resources, it’s essentially advising you not to load unnecessary resources at the top of your site's code, because that slows down browsers when downloading your visual content.

This tutorial will break down what render-blocking resources are and show you how to eliminate them from your WordPress site. With the tips we'll give you, you’ll be able to configure certain CSS and JavaScript resources to delay processing until the visible part of your page has loaded.

___________________________________________________________________________

🕘Timestamps

0:00 How to Eliminate Render-Blocking Resources on WordPress (CSS + JavaScript)
1:35 How to Eliminate Render-Blocking JavaScript
2:45 How to Eliminate Render-Blocking CSS
3:45 How to Eliminate Render-Blocking Resources with WordPress Plugins
4:42 How to Eliminate Render-Blocking Resources with Autoptimize + Async JavaScript Plugin
6:05 How to Eliminate Render-Blocking Resources with WP Rocket

___________________________________________________________________________

📚Resources

📙 Check out our written guide on how to eliminate render-blocking resources on WordPress:

🎯How to Optimize the Critical Rendering Path in WordPress

⚙️How to Set Up Autoptimize for Your WordPress Site

↪️How to Defer Parsing of JavaScript in WordPress (4 Methods)

🚀Kinsta and WP Rocket: Now Speeding up WordPress Together

___________________________________________________________________________

🔇This video has captions (translated by real humans!) in English, Spanish, Italian, French, Portuguese, German, Dutch, Japanese, Danish and Swedish. Click on the CC to set your preferred language.

#WordPressTutorial #RenderBlocking #kinsta

ℹ️ About Kinsta
Kinsta provides Managed WordPress Hosting for projects of all sizes, serving over 120,000+ businesses worldwide. Officially recommended by Google Cloud, Kinsta leverages Google's Premium Tier network and the fastest C2 and C3D machines to guarantee lightning-fast load times. Kinsta provides enterprise-level security, a free global edge CDN with 260+ PoPs, and 24/7/365 support.

💡Learn more about Kinsta’s hosting solutions:
👉 Try risk-free with our 30-day money-back guarantee

👤Follow us:

[zouhairbenelaidi]

spend more than 2 days trying to solve this problem by my self and i only solve it in 5 minutes after your video really appreciate it

[MadeByMartin_studio]

Okey, this is crazy! Went from 46 to 95!

[janechakravorty]

Using the two plugins together helped. Previously we just used Autoptimize. Still not perfect, but certainly better. A very helpful explainer video. Thanks.

[aijadaukste]

Hi! Thank you so much for advising to use both plugins together (before tried only Autoptimize). It did help a lot for the desktop version, but for mobile it I still need some improvement. Can you advise what I could do? The main opportunity for both versions are Preload key requests.

[Tom_Armstrong_]

This made a big difference to my site speed - thanks for posting

[wishiwasamillionaire]

Thanks so much for your video! It has been really useful! I'm using WP Rocket and even with those settings activated, however, GTmetrix is still coming up with the 'eliminate render blocking resources' issue. In particular, it mentions 4 particular CSS files, one from Formidable Forms, one which is the WP dashicons, one from my cookie consent plugin and one from elementor. How can I get round this?

[razzon]

This took my website from 39 on mobile to over 80! thank you!

[Carreriiinha]

youuuu! Its the best video to optimize render

[ahmedchouihi]

Thanks very much, but can we do these optimizations through code without using any plugins? For example by adding codesnippet in functions.php ?

[davoodsamani]

very good video. i used both plugins on my website and here is my test after using async:
mobile: before 56 after 68
dekstop: before 79 after 80

but when i used the auto optimize the result change:
mobile: 60
desktop: 78

i dont know whats happening. but i have question
after using this plugins, can we deactivate and delete them?

[nutshell]

Its work in both of my websites! total solution

[James_m]

Can we use these two plugins along with W3 Total Cache? Thanks!

[monirefirouzi]

Thanks alot.
Why when i added a file that GTmetrix shows in render-blocking part in Total cache, i see it again in Gtmetrix?

[KevsGuide]

Anyone had a problem of Async not SAVING? I press the save button after applying the settings but its not saving

[thomasarias]

Love the video, but you should put the names of the pluggins, becouse i was trying to get those names, and didn´t found. but thx for the content! im following for more.

[arabinfluencers]

my website is a json does this plugain will affect my website or not

[fokhrulabedin]

How can i remove render blocking resources without any plugin?

[xbsstu]

The best plugin I have found to improve my website speed is called Nitropack.