If you run your website through Lighthouse, you may have noticed a suggestion to remove render-blocking resources.
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?
Create Amazing Websites
With the best free page builder ElementorStart Now
When 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
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.
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.
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.
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.
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:
While 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
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.