Mission: Eliminate Render-Blocking Resources in WordPress
The subject of website speed and performance comes up a lot for us here at FatLab as we both host and maintain sites on behalf of our clients.
There are two items that regularly come up when evaluating a client’s website for performance that I figured deserved an article.
These two items typically cause a lot of concern when a client reviews a Google Page Speed report (what Google is referring to as Core Web Vitals now)and these items also pose two of the largest challenges when it comes to improving a site.
These two items are:
- How to eliminate render-blocking resources jQuery in WordPress
- How to eliminate render-blocking resources CSS in WordPress
What Affects a Website’s Performance
Before we get into these trouble areas, here is a quick overview of what affects a website’s performance and some quick fixes to improve performance without getting into the main challenges discussed in this article:
- How well the website was built.
- How many files are required to load the site and its required functionality.
- The simplicity of the website.
- Whether the media on the site has been optimized.
- The quality of the server the site is hosted on.
There are a lot of “low hanging fruit” items that can be done to immediately speed up a website. These include:
- Optimizing media
- Setting images to be lazy loaded
- Utilizing a CDN
- Utilize a cache plugin
- Enabling keep-alive on the server
- Enabling GZIP for compression
- Utilizing HTTP/2
- Ensuring the server is up to date with the latest serverware versions (i.e WordPress should be running on PHP 7.4+)
WP: Eliminate Render-Blocking Resources
Given what was discussed above we know that a well-built website will perform better than a poorly built website and this seems obvious.
However, if you have what is considered to be a decently built website, with the “easy” optimizations listed above, there is a good chance you will still run into our two trouble points, and probably the reason you are even reading this article.
What is Render-Blocking
The dealy comes from the fact that browsers load from top to bottom and when it comes to CSS and javascript files, all other loading stops until jQuery and the CSS is downloaded (if needed/not cached) and loaded into the browser. This can slow down the loading of a website.
Eliminate Render-Blocking Resources: jQuery in WordPress
jQuery has changed the way that millions of websites work and is often core to features and functions.
One potential issue when using jQuery is that it can be render-blocking. This means that if jQuery is included in the <head> of your HTML document, it can delay the rendering of your page.
Though we are here to solve a performance issue, it actually makes sense to ensure jQuery is fully loaded before continuing down the page since other javascript code, assets, and features may rely on jQuery to function and display properly.
The “Easy” Fix to Render-Blocking jQuery
There are some ways we can optimize javascript code delivery. The number one piece of advice you will see will say to include jQuery at the bottom of your HTML document instead of the top. Of course, there are challenges to this:
- It might be easier said than done to “simply” move the position of a script. Especially if you are working with a WordPress theme and are not a developer.
- Moving it may break functionality or the display. Remember there is a reason that your theme loads jQuery so early and that’s most likely because the rest of the page needs it.
- Moving scripts sometimes can create a “pop” effect whereby the page loads, looks odd, and then “pops” back into place once jQuery is loaded. This causes layout shift which will also affect your performance scores.
We do have a couple of ways to control the loading of various scripts without physically moving them from the top of the rendered page to the bottom:
Use the Async Attribute
Another option is to use async, which is basically an attribute you can add to your script tags: <script src=”demo_async.js” async></script>.
This tells the browser to not stop (render block) when it comes across this call but go ahead and load it along with other assets, i.e. load it asynchronously.
Use the Defer Attribute
Yet another option is to use defer, which is another attribute you can add to the javascript call like: <script src=”demo_defer.js” defer></script>
The same challenges will exist here as well, adding these attributes may have unwanted consequences.
Eliminate Render-Blocking Resources: CSS in WordPress
Render-blocking CSS is an important factor to consider when optimizing your website for speed. In order to render a page, the browser must first load and parse the CSS file(s) associated with that page.
If there are any external stylesheets, the browser will also need to fetch those before it can continue. This can all add up to significant delays, especially on mobile devices where network speeds are often slower.
There are some ways we can optimize CSS delivery, each with various levels of complexity.
The “Easy” Fix to Render-Blocking CSS
- Use inline styles whenever possible. This means embedding the CSS directly into the HTML markup rather than referencing it from an external file. Of course, this isn’t always practical or feasible, but it’s worth considering for smaller stylesheets.
- Use media queries to load different stylesheets based on the device’s screen size. This way, you can avoid loading CSS that isn’t necessary for the initial rendering of the page.
- Minify and compress your CSS files.
- Removing unused CSS can also boost performance scores and load times. Typical websites have a tone of CSS and CSS files but not all of this is needed on every page.
- Inlining critical CSS. This means only including only the CSS necessary for rendering the above-the-fold content on your page.
Render-blocking CSS can be a significant bottleneck when it comes to website performance. By using some of the techniques above, you can help reduce the impact of this issue and improve the overall speed of your site.
Things to Consider When Working with WordPress
It is the nature of WordPress sites to load scripts in a particular order. Plugin/theme authors also set how they would like their scripts ordered. This is often in conflict with various speed reports (especially with Google PageSpeed Insights reports) and we have little control over a lot of this for 3 reasons:
- Without hacking plugins and/or utilizing other optimization plugins we often can’t change the order the scripts are loaded.
- Often scripts are required to be loaded for certain visual effects to be seen and experienced. So changing the load order can either break the appearance of the site.
- Deferring some scripts can cause site functions not to work even after the page has fully loaded.
You can certainly find articles where people have accomplished this but if your site is plugin heavy, not built very well, and utilizes a feature-rich commercial theme it may be a considerable overhaul and likely an unrealistic expectation that this is remedied completely.
How to Improve Render-Blocking Resources in WordPress
In this article, I have mentioned some of the fixes but if you caught my drift you will see that despite the fact some of these resolutions include things like, “just move the script to the bottom” and “inline your CSS”, is often easier said than done in WordPress. Sometimes removing render-blocking resources in WordPress is just not possible.
Developers should be able to understand all these things and may be able to fix a lot programmatically to improve performance scores. The ease of this in WordPress is going to come down to how well the theme was built, how many, and which plugins are installed.
Things like inline CSS, critical CSS, and changing the load order of various scripts simply might not be worth the manual effort.
Use a Plugin
It seems a little ironic to add yet another plugin when we say that adding plugins can be a culprit to a poor-performing website in terms of page load time. However, there are some great plugins out there that can make all this deferring, async’n, and CSS optimizing really easy. Many offer the ability to try different settings with a click of a button.
Also, not every single one of the settings will work on every single website. As I mentioned several times the load order and the ease of optimization is going to come down to each and every unique website.
There is one plugin that I recommend above all others. I have been using this plugin for over 2 years and today at FatLab we install this standard on all websites we host.
WP Rocket to Eliminate Render-Blocking Resources
WP Rocket does so much more than just help with the render-blocking resources but I think the big deal here and why I like this plugin so much is that makes this part very easy to test.
Though not all features will work on all websites, we are yet to not improve a page performance score after installing and activating this plugin.
This is a licensed plugin so if you are looking for something “free”, this will not be for you. However, WP Rocket has an entire team behind their plugin and that team is dedicated to improving the performance of WordPress websites. That’s powerful and something to think about when weighing the cost/benefit.
This company has spent years developing what I think is the best performance plugin, hands down! It’s incredibly easy to set up and takes care of much of what we talked about above, like deferring JS files and CSS files, with a few simple checks.
If one particular setting happens to break the site, it’s easy to undo and still take advantage of the other performance-enhancing features such as page caching.
In 2022 they released some groundbreaking optimizations that work with “critical CSS” and though still in beta at the time of this writing, it has produced major speed score increases for some of our clients.
We are not an affiliate of any kind of WP Rocket, this is just a simple recommendation and our current go-to solution.
