If you run your website through Lighthouse, you may have noticed a suggestion to remove render-blocking resources.
By delaying JavaScript and putting important CSS styles inline, you can get rid of resources in WordPress that slow down rendering. This is supported by the majority of cache plugins, Autoptimize, and Async JavaScript. Both Elementor and Divi have built-in ways to get rid of resources that stop the page from rendering, using deferred and inline CSS. Removing unneeded CSS, JavaScript, and third-party code can also aid in the resolution.
In this article, we'll define render-blocking resources and go over the advantages of getting rid of them from your website. Then, we'll demonstrate five alternative ways to get rid of them for you.
What are render-blocking resources?
Understanding the typical website loading process is crucial before we look more closely at render-blocking resources. The entire content of your website must be rendered (or downloaded) by the visitor's browser after they click a link to it. It reads all of the HTML, CSS, and JavaScript on your website from top to bottom. Your website won't be visible to visitors until the browser has finished reading this queue of scripts. They might have to wait a long time if there are render-blocking resources. Basically, a CSS or JavaScript file that prevents the browser from loading other content while it is being processed is a render-blocking resource. This could stop the rendering process and make the page look unfinished or blank.
Create Amazing Websites
With the best free page builder Elementor
Start NowWhen there are render-blocking resources on your website, extra files are loaded at the top of the code. Before viewing the website, users must wait while these files are processed. Render-blocking resources have the potential to influence several website performance indicators. Such as, the largest contentful paint measures how long it takes for a page's primary content to load. The first time that material from your site's Document Object Model (DOM) is rendered by the browser is known as the first contentful paint. Total blocking time is the time between the first contentful paint and the time to interact (how long it takes a page to become fully interactive).
Although they are not necessary for loading, render-blocking resources can impede rendering. The User Experience of your website may suffer as a result (UX). So it's crucial that you get rid of these to stop visitors from leaving your pages.
Benefits of eliminating render-blocking resources
Internet users generally dislike waiting for websites to load. A quick website can entice users to explore your material and keep them from visiting a rival. By removing render-blocking elements, you're effectively making your website's code as light as possible, which can be the secret to enhancing page speed. Because site performance and user engagement are two factors that search engine giants like Google consider when assessing websites, removing render-blocking files can help raise your site's search engine rankings.
How to eliminate render-blocking resources in WordPress
You might be wondering how to remove render-blocking elements from your website now that you understand how to spot them in WordPress. Fortunately, we've put together a list of many approaches you can take to accomplish this, starting with the simplest ones.
Optimize CSS loading
Increasing the speed at which CSS loads on your website is one technique to get rid of render-blocking resources. A browser loads your webpage from top to bottom, as was previously said. This can cause the loading process to take longer when certain files need to be processed. It's crucial to remember that just some CSS files must load in order for the page to display. Therefore, you can display the most crucial files first when you optimize CSS loading. Render-blocking CSS can be removed manually, but you can also install a plugin to make things easier. You can optimize your website right from your WordPress dashboard using Jetpack Boost. This plugin makes it simple to implement lazy loading, defer non-essential JavaScript, and improve CSS loading. One of the simplest ways to get rid of render-blocking resources in WordPress is to do this.
Start by searching for Jetpack Boost under Plugins Add New in your WordPress dashboard. Install and then turn on the plugin on your website.
You can go to Jetpack My Jetpack if you already have Jetpack loaded. Look for Boost and select Activate from the list of Jetpack goods.
After the plugin has been activated, click the Jetpack Boost tab and choose Get Started.
Your website will instantly receive a performance rating from Jetpack. You'll see a letter grade along with information on your desktop and mobile scores.
Then, activate this feature by scrolling down to Optimize CSS Loading. When activated, Jetpack Boost will raise the crucial CSS for your website so that it loads faster.
Defer non-essential JavaScript
You can take more measures to get rid of render-blocking resources in WordPress outside only optimizing CSS loading. Non-essential JavaScript can be postponed as well to speed up the loading of your website even further. Non-essential JavaScript can be delayed in order to delay some processes until after your content has loaded. You can stop the browser from executing JavaScript files if they are not required for a page to load. Fortunately, using the Jetpack Boost plugin makes this straightforward to do. You can easily postpone non-essential JavaScript after you've optimized the CSS loading process. Toggle the Defer Non-Essential JavaScript area's toggle switch to on. This section can be found underneath the Optimize CSS Loading section.
The plugin will update its assessment of your page's overall performance after you enable this setting. Your score both before and after using Jetpack Boost will be displayed.
Take a look at the scores in the screenshots taken both before and after we completed this process. You'll note that increasing page speed was accomplished by delaying non-essential JavaScript and loading CSS more efficiently. Browsers can load your content more quickly because they don't have to execute large scripts.
Defer offscreen images
Although images are not a resource that prevents pages from rendering, you may want to think about speeding up their loading time. Websites frequently have off-screen pictures that don't show up until a user interacts with the page, like scrolling. You can postpone these with lazy loading because they are not necessary for the web page to load. Only the images that visitors can see are loaded in a lazy manner. These photos will load just before they display on the page once the user scrolls. A browser will attempt to load every image on a page at once if lazy loading is not enabled. The longer it takes for your material to load, the more likely it is that visitors will leave your site.
Regular loading may not be an issue if a visitor is utilizing a desktop computer. Smartphones and tablets, on the other hand, have smaller screens and less bandwidth. Your website may consume more bandwidth and take longer to load for mobile phone users if it fully loads all of its photos at once. This issue is resolved via lazy loading.
To enable lazy loading on your site, utilize Jetpack Boost. Just look for the Lazy Image Loading option and enable it.
The viewer will only see images load on your website when they scroll down the page if you do this. Even though photos are not a resource that render blocks, enabling lazy loading can speed up your page.
Eliminate Render-Blocking Resources With Elementor/Divi
Both Elementor and Divi include options for removing render obstructing resources.
Enable Improved CSS Loading and Font-Awesome Inline in your Elementor Experiments settings to load CSS and fonts inline, making them non-render blocking. Improved Asset Loading eliminates unneeded CSS/JavaScript, which improves fundamental web vitals in a variety of ways.
By applying crucial CSS, deferring CSS/JavaScript, and loading your fonts inline, Divi's performance options can also reduce render-blocking resources.
Manually remove render-blocking JavaScript
You can also manually delete render-blocking resources, though installing an optimization plugin is a much easier option. Ideally, you ought to only think about this choice if you are an experienced coder. If you wish to cut back on the number of plugins on your website, this procedure might also be helpful. You can give your files an async or defer property to help JavaScript run more efficiently. The browser will be instructed to render the non-critical scripts separately by marking them as such. Both characteristics can be used to speed up the loading of HTML information.
The HTML file is parsed in a typical manner up until it encounters the script file. The parsing will then stop while it locates the script. After downloading and running it, the parsing continues.
While processing the remaining HTML, the browser can download JavaScript thanks to the async feature. After downloading, it can halt HTML processing and run the script.
The defer attribute works similarly, allowing the browser to download the script while it parses the HTML. The distinction is that it also delays running the script until after HTML parsing is complete.
You must include a piece of code in your functions.php file in order to implement either of these properties. You must first locate the render-blocking resource's script> tag. the following as an async attribute:
<script src="resource.js" async></script>As an alternative, consider how a script may seem when the defer property is used:
http://resource.jsWhile a plugin can take care of these attributes for you, doing it yourself could suit your preferences better. If so, it's crucial to understand when to apply each attribute. You must use a defer property for non-essential scripts that depend on another script. The async option is appropriate for any other scripts.
Apply async or defer attributes with a plugin
Use a plugin like Async JavaScript if you have problems manually editing scripts. You have complete control over which scripts have the async or defer property thanks to this tool.
After the plugin has been installed, select Enable Async JavaScript under Settings Async JavaScript.
Next, go to the section titled Async JavaScript Method. You can choose whether to enable async or defer attributes here.
It's a good idea to exclude these scripts because many plugins depend on jQuery. Applying async properties to jQuery can result in your website breaking.
When in doubt, you can utilize the defer attribute, but excluding jQuery entirely is the best course of action.
You may now specify which scripts you want to run in async or defer. You must be careful to put each script in the appropriate section.
You can list any scripts you want to exclude from this procedure under the Script Exclusion section.
There are also options for excluding plugins and themes at the bottom of the page. The scripts for any themes or plugins you mention here won't be applicable to the async or defer characteristics.
After making any necessary adjustments, you may click Save Settings. This approach may be a useful compromise between manually altering scripts and using a plugin to handle the task for you. As an alternative, you can eliminate these extra steps by using an all-in-one application like Jetpack Boost.
Wrapping Up
By making visitors' browsers postpone rendering above-the-fold content while downloading assets that aren't immediately necessary, render-blocking resources increase the perceived page load times of your WordPress site. You should delay loading resources that aren't immediately necessary in order to aid visitors in loading the viewable area of your page more rapidly. Use pre-made plugins to get rid of render-blocking resources on WordPress. You can combine Autoptimize and Async JavaScript, two plugins created by the same developer, for a cost-free solution. You can utilize WP Rocket, which offers a particular interaction with Kinsta and can assist with many additional WordPress performance tweaks, if you're ready to pay for it.
