Render-blocking resources often cause issues for developers who are trying to optimize the performance of their sites. Put simply, a render-blocking resource is one that’s loaded as part of the rendering of a web page, but while it’s loading, it stops the rest of the page from doing so. As more and more resources like this get introduced into the lifecycle of a web page load, the page takes longer to load because it’s constantly being blocked. Particularly with WordPress, any number of plugins or even pieces of your theme can introduce additional render-blocking resources that slow down the load time of your page.
It’s important to evaluate how many render-blocking resources you’re loading to keep initial page loading times fast as well as to reduce the amount of data sent by your site. Especially for users on mobile connections, eliminating these types of resources will help your pages load and respond more quickly, creating a better user experience (UX).
This article will examine several ways to eliminate render-blocking resources on your website so that you can ensure that it loads as quickly as possible.
What Are Render-Blocking Resources?
Render-blocking resources are usually CSS stylesheets or JavaScript files that are loaded from your site or an external site as part of your page load cycle. The browser interprets these resources as crucial to the load and display of the page (unless you specify otherwise), and it will wait to finish loading the page until these resources are loaded. If these files are large or are coming from an external source that’s slow to transmit them, this can delay the initial load of your page.
Especially on mobile devices or for users with slower internet connections, these render-blocking resources can make it seem like your page isn’t loading, or they can delay the user’s ability to interact with your page for so long that the user chooses to leave, hurting your website in the long run.
Most resources don’t need to be render-blocking to be effective, and it’s a good idea to see if they can be loaded in a non-blocking way. The notable exceptions are CSS files that are critical to the initial display of the page or JavaScript files that other pieces of scripting on the site depend on. Since these files need to be loaded first, they’ll likely still be render-blocking, regardless of any of the optimizations demonstrated in this article.
Ways to Eliminate Render-Blocking Resources
Later in this tutorial, you’ll learn how to eliminate render-blocking resources step-by-step in a simplified WordPress theme. However, before walking you through these steps, let’s discuss some potential ways you can eliminate render-blocking resources.
Use WordPress Optimization Plugins
For a ready-made solution, there are plugins, such as Jetpack Boost, that can perform optimizations for you without needing to edit any of your code.
Because some resources are critical to the initial rendering of the page and can’t be moved later in the loading order, you need to have them loaded without blocking the rendering of the page. That’s where inline CSS comes in.
Normally, keeping CSS separate from HTML markup in stylesheets is a good thing. However, if you need CSS to load quickly without being render-blocking, one way to do that is to put it inline so that it loads as part of the page. This removes a render-blocking request and—as a bonus, if your website utilizes full-page caching—makes sure the CSS is cached as part of the static HTML output, furthering performance.
It’s important to note that inlining all or even most of your CSS will make it much more difficult to manage and maintain. This technique should only be used for CSS that is critical to the initial loading of the page.
Use async/defer Script Tags
async and defer are attributes that can be added to script tags to signal to the browser that it shouldn’t block the render of the page while the JavaScript loads. While these attributes are similar, they work in slightly different ways.
When a script tag is given the async attribute, this signals to the browser that the script should be loaded in parallel to the rest of the page and then evaluated when it’s available. This works well for scripts that eventually need to be available but aren’t critical to the initial on-page functionality.
Adding the defer attribute to a script tag indicates to the browser that the script is “meant to be executed after the document has been parsed, but before firing DOMContentLoaded,” according to the MDN Web Docs.
Deciding to use async or defer depends on what each script you’re loading is responsible for on the page. For example, if you have JavaScript that is only responsible for setting up click events on various elements, it’s likely okay to defer loading it since the user won’t be able to click anything until the page is loaded more fully.
Step-by-Step: Eliminating Render-Blocking Resources
Step 1: Grab the example theme
For this tutorial, you’ll need a local environment as well as a WordPress theme. If you don’t have a theme handy that already has render-blocking resources, you can download this example theme from GitHub We’ll install and activate this theme later on in the process so that we’re able to identify what render blocking resources look like as well as how to resolve them.
Now that you’ve got a theme to work with, take a look at how you can find and then eliminate render-blocking resources.
Step 2: Setting Up the @wordpress/env Local Environment
WordPress provides a local development environment in the form of the @wordpress/env package. This allows a local environment to be bundled with themes and plugins so that you can easily test and develop.
The first step to setting up the local environment is to install Docker if you don’t already have it on your machine. Once you have Docker installed and operating, run the following commands in your terminal to download the sample code:
git clone git@github.com:kkoppenhaver/renderblock.git
cd renderblock
npm install
These commands pull down the sample code from GitHub and install all the required npm packages, including @wordpress/env. To get your environment running, run the following:
npm run wp-env start --update
This starts up your environment and makes sure you’re running the latest Docker image. Once this command stops running, navigate to http://localhost:8888/ in your browser to see the local version of your WordPress site:
Step 3: Testing Your Theme
The current default theme will be automatically enabled when you spin up your local environment. To change this, log into the WordPress admin area (the default credentials are “admin” for the username and “password” for the password) and head over to Appearance > Themes. From there, you can activate the renderblock theme. You’ll notice that the front page of your site no longer has the Twenty Twenty-Two theme but now has the more bare-bones styles of your test theme:
You should also see that you’re enqueueing (or loading) a file called bootstrap.css. If you view the source code of the home page once it’s rendered into the browser, you’ll see that this file is being loaded in the <head> of the document. By default, the browser will wait to render the rest of the page until this CSS is loaded.
This is the render-blocking resource that you’ll be eliminating later in this tutorial. If you have a theme that you’re inheriting and don’t know where your render-blocking resources are, the first step is figuring that out.
Step 4: Identifying Any Render-Blocking Resources
Now that you have a theme up and running, you need to scan it for any potential render-blocking resources that might exist.
Google’s PageSpeed Insights tool can be helpful in boosting your website’s performance. Along with defining metrics around the performance of your site and showing you where you stand on a 0–100 scale, this tool will identify any render-blocking scripts that may boost the performance of your site if they’re handled differently:
If you’re just running this website locally, you can use the Lighthouse tab, which is part of Chrome DevTools, to run this report and get a results screen similar to the previous image. However, if you’re working on a live site, you can use the hosted PageSpeed Insights tool to get a similar report.
When you run a PageSpeed Insights report against your site, it runs an audit on the current version of your site as well as flags areas that you can improve. In this case, it flagged some of the CSS as a render-blocking resource, but it might also tell you about redirects that are slowing down your site, JavaScript that is taking too long to execute, images that are unoptimized, or a whole host of other issues. By going through the report and fixing each of these issues, you’ll notice that your site is faster, and when you rerun the PageSpeed Insights tool against your updated site, your score should increase.
After you’ve implemented optimizations (detailed later), you can run these tools against your site again to verify that the changes have had the intended effect.
Step 5: Eliminating Render-Blocking CSS
In this example, since you control the theme code, any CSS that is not critical should be moved to the footer. Noncritical CSS is defined as CSS that doesn’t affect content that’s loaded above the fold, meaning content that is visible without a user having to scroll. Loading the styling for this content right away and deferring the rest ensures that the user doesn’t see a flash of unstyled content and that you don’t have to have the entirety of your CSS stylesheet blocking the render of the page.
There are packages that you can use to make sure you’re loading the CSS that you need above the fold. In this case, running this against your CSS and loading any noncritical CSS down in the footer, just before the closing </body> tag, will allow you to eliminate your render-blocking CSS issue.
If you’ve been following along with the example theme, you can see that there are two branches in the repo: the before branch, which has the theme as it was initially configured, and the after branch, which includes the changes. Switching between these two branches will allow you to see the changes that have been made to the theme. In the after branch, the CSS that was previously render-blocking in the header has been moved down to the footer so that the page can load more efficiently.
Step 6: Adjusting Additional Styling
Even after removing this particular render-blocking style, there are still a few that are being flagged as render-blocking. To deal with this issue, you’ll use the Autoptimize plugin.
After installing and activating the plugin on your site, head to the plugin settings page under Settings > Autoptimize. Under the JS, CSS & HTML tab, you’ll see a checkbox for Optimize CSS Code?. Once you’ve selected this checkbox, you’ll see all the other options for CSS enabled. If you have the Eliminate render-blocking CSS? option selected, Autoptimize will give you an option for which CSS you want to include for above-the-fold content and then will push the rest further down the page so that it’s no longer render-blocking:
Step 7: Dealing with Potential Challenges
After eliminating render-blocking CSS, you should check your site to ensure that there haven’t been any adverse effects. Whenever you change the loading order of elements or otherwise modify how your site loads, there is the potential for things to break. It’s possible that some of the current functionality on your site is due to the order in which things are loading, and once you switch that up, scripts that previously had all their dependencies loaded ahead of time might be missing some, or you might start to see flashes of unstyled content. It’s important that you test thoroughly before you deploy your performance improvements to production.
Even when you’ve shipped your code to production, the latency on your production server, caching, and a host of other real-world issues can affect the optimizations you’ve made, so you should once again test thoroughly to make sure everything is behaving the way you expect.
Conclusion
Whether you’re building and launching a new site or maintaining an existing one, performance is important. You don’t want users to wait for your page to load while staring at a blank screen.
As you learned in this article, you can eliminate render-blocking resources by either making changes to the codebase or relying on a plugin to make some of these optimizations for you. In doing so, you ensure that your users see your meaningful content more quickly without having to sacrifice the design and look of your site, increasing both usability and UX.
