How to Eliminate Render-Blocking Resources in WordPress (& Why You Should)

Many things can slow down your site, including render-blocking resources. These are CSS and JavaScript files that delay the loading of content on your site. As a result, visitors will have to wait longer to interact with your page, which could lead to frustration and instant exits. 

So, what can you do to eliminate render-blocking resources? Well, you’ll want to start by removing any WordPress plugins on your site that you no longer need. You could also use an optimization tool for more efficient script loading. 

In this post, we’ll take a closer look at render-blocking resources and show you how to check your WordPress site for this issue. We’ll then discuss the main ways to eliminate them. So, let’s dive right in!

What Are Render-Blocking Resources?

When someone visits your website, their browser must render its content by reading the code from top to bottom, including HTML, CSS, and JavaScript. Your site cannot be displayed until this process is complete. 

Render-blocking resources are CSS files or JavaScript files that force the browser to pause rendering until they are fully processed. This delay can result in blank or partially loaded pages, negatively impacting the user experience.

These render-blocking elements often sit at the top of a website’s code and therefore require processing before any other content can be displayed. As a result, they affect key performance metrics in Core Web Vitals, including:

• Largest Contentful Paint (LCP): how long it takes the main content to load
• First Contentful Paint (FCP): when the first piece of visible content appears
• Total Blocking Time (TBT): the delay between initial render and full interactivity

The good news is that render-blocking resources aren’t needed for the web page to display, so you can simply remove or defer them. By doing this, browsers will be able to load your content more quickly.

Faster loading times can lead to longer site visits, higher user engagement, and better conversion rates. This will also improve your site’s Search Engine Optimization (SEO), as user experience plays a role in search rankings.

How to Check Your Website for Render-Blocking Resources

It’s important to note that slow loading times can result from other issues besides render-blocking resources. These include unoptimized images, poor hosting, and excessive plugins.

PageSpeed Insights helps you identify most of these issues, and you can use it to see if your site contains non-critical files that delay loading. 

To begin, simply enter your site’s URL into the tool and click on Analyze. You’ll then receive a performance report on your Core Web Vitals, which measure aspects of page speed and user experience:

Scroll to the Opportunities section of the report and look for the recommendation titled Eliminate render-blocking resources. If you click on it, you’ll see a list of CSS and JavaScript files that are slowing down your site’s rendering process. 

PageSpeed Insights also displays the estimated savings in loading time if these resources are removed or deferred:

Once you’ve identified the problematic files, you can optimize your website by removing, deferring, or inlining them. Don’t worry: we’ll show you how to do this in the next section.

How to Eliminate Render-Blocking Resources

Now, let’s look at how to remove render-blocking JavaScript and CSS in WordPress. 

Step 1: Remove Any Unnecessary Plugins

Every plugin you install on your website adds time to the loading process. This is because browsers will have more resources to load, which may include non-critical files. 

So, the first step to cleaning up your site is to remove any plugins that you no longer need. For instance, you might have installed a form builder when you created your site and you don’t use it anymore. 

Simply go to Plugins > All Plugins to see all the tools on your site:

Then, hit Deactivate followed by Delete to remove a plugin you don’t need. This will remove any unused CSS code and JavaScript code from your site.

Step 2: Install an Optimization Tool

If you don’t have coding knowledge, you’ll struggle to remove render-blocking files from your site or optimize code for smoother loading. Fortunately, there are plugins that will do all the work for you.

Jetpack Boost is a free optimization plugin that helps you improve your site speed by enabling a few settings. This includes options to defer JavaScript scripts and render blocking CSS resources.

To get started, navigate to Plugins > Add New Plugin and use the search box to find Jetpack Boost. Then, install and activate the plugin on your site:

Go to Jetpack > Boost and you’ll see a performance score for your site’s desktop and mobile versions:

Below these scores, you’ll find several settings, including an option to defer non-essential JavaScript. Go ahead and enable it:

While you’re here, it’s a good idea to switch on the other settings. These include:

• Optimize critical CSS loading: it moves important styling to the start of the page so browsers can display content sooner.
• Cache site pages: this setting stores and serves copies of pages to repeat visitors so your site loads more quickly for them.
• Concatenate JS and CSS: scripts and styles are grouped by placement and minified to reduce loading times and the number of requests.

Jetpack Boost also comes with an image CDN. This tool will deliver your images from Jetpack’s content delivery network so they load more quickly. It also resizes your images and converts them to modern efficient formats like WebP. 

You’ll want to enable all of the available features to get the best results. Then, scroll to the top to see the scores again. You should notice a significant improvement. 

It’s also a good idea to run another test on PageSpeed Insights and compare the results for render-blocking resources. If it’s still a major issue, you might want to get in touch with a web developer for assistance.

Step 3: Add async or defer attributes with a plugin

You can use the Async and Defer attributes to control when JavaScript files are loaded and executed. This helps speed up the page load by allowing the browser to render the HTML content first.

Async downloads JavaScript while still parsing HTML. You can use it when you need scripts to execute as soon as possible, such as ads or counters.

Meanwhile, the Defer attribute downloads JavaScript while still parsing HTML, but waits to execute it until after HTML parsing is finished. 

As we have seen, you can use a plugin like Jetpack Boost to defer JavaScript, but you might want more control over which scripts to defer and which ones to async. 

The easiest way to do this is to use a plugin like WP Rocket:

This paid tool lets you enable async JavaScript on your site, or apply the attribute manually to specific scripts. You can also exclude certain JavaScript files from being deferred.

How to Further Improve Site Speed

As discussed above, site speed plays a big role in user experience. Google data shows that as page load time goes from one second to ten seconds, the likelihood of the visitor abandoning your site increases by 123%. 

So, you’ll want to make sure that nothing hinders your site’s performance, and that includes your hosting service. 

Your web host is also responsible for your site’s loading times. If you’re on a cheap, shared hosting plan, you’re sharing server resources with many other website owners, which could result in poor performance. 

Ideally, you should opt for a provider that prioritizes speed and security. At NameHero,our WordPress hosting plans include a free LiteSpeed caching plugin to help you boost your performance:

Plus, our private cloud hosting service is optimized for high performance and secured with robust features to prevent attacks on your website. These include an AI-powered firewall and DDoS protection.

All WordPress plans also come with free daily backups and auto updates. 

Conclusion

Render-blocking resources are JavaScript and CSS files that delay the loading of your content. As a result, they can have a negative impact on the user experience and overall performance. Running a test on PageSpeed Insights will help you know if your site has this problem.

To remove render-blocking resources, start by deleting any unnecessary plugins on your website. Then, uninstall an optimization tool like Jetpack Boost. This offers one-click settings for improving performance, including an option to eliminate render-blocking JavaScript elements and optimize CSS loading. 

When you choose NameHero, your WordPress website will be hosted on our powerful and blazing-fast servers. This means your content will load more quickly for visitors, thus improving your user experience and conversion. Check out our plans today!