We use cookies
This site uses cookies from cmlabs to deliver and enhance the quality of its services and to analyze traffic..
The primary source for SEO guidance with clear and expert-level insights.
7 Ways to Eliminate Render Blocking Resource on Your Website
Last updated: Mar 01, 2023
Disclaimer: Our team is constantly compiling and adding new terms that are known throughout the SEO community and Google terminology. You may be sent through SEO Terms in cmlabs.co from third parties or links. Such external links are not investigated, or checked for accuracy and reliability by us. We do not assume responsibility for the accuracy or reliability of any information offered by third-party websites.
In website development, you are certainly familiar with HTML, CSS, JavaScript, and many other terms. In fact, you've probably heard of a "rendering blocking resource" before. Even so, not many people know how to eliminate rendering blocking resource to optimize their website's performance.
The following article will explain what a "rendering blocking resource" is, the types of rendering blocking resources, and how to eliminate rendering blocking resources. You can immediately listen to the full explanation below.
What is Render Blocking Resource?
A render blocking resource is a set of static attributes, such as font files, HTML, CSS, and JavaScript, that are required in the process of rendering web pages.
When the browser encounters a rendering-blocking resource, it stops downloading other resources until the important files are processed. Meanwhile, the entire rendering process will be suspended.
On the other hand, non-render blocking resources will not delay the page rendering process. The browser can safely download it after the initial page has finished rendering.
However, not all resources that the browser considers rendering blocking are important. This depends on the characteristics of each website page. There are best practices that you can use to convert these non-critical rendering-blocking resources into non-rendering blocking resources.
Apart from that, you can also reduce the size of rendering blocking resources, which are still critical and cannot be removed. You can reduce the resource size using minify tools so that the page has a lighter size to load.
Types of Render Blocking Resources
After you've learned what rendering blocking resources are, it's time to learn about the different types of rendering blocking resources. The browser considers everything it finds in the <head> section of HTML as "rendering blocking." The types of rendering blocking resources include:
- CSS style sheets
- Fonts added from the local server
- HTML imports
- The JavaScript file added to the <head> section
Meanwhile, images, media files, and <script> tags placed at the bottom of the <body> section will be identified as non-rendering blocking resources.
How to Eliminate Render Blocking Resource
After knowing what are the types of rendering blocking resources, now you need to know how to eliminate a render blocking resource on your website. Check out the explanation below.
1. Identify Render Blocking Resource
The first way to eliminate rendering blocking resource is to identify its source on your website. This is done to help you figure out how to work around it.
The good news is that there are now numerous tools available to help you with this. The most widely used tool to identify rendering blocking resources is Lighthouse.
Additionally, there are the PageSpeed Insights and GTmetrix tools, which are free web-based applications that use the Lighthouse library to measure page speed, core web vitals, and other important parameters.
2. Eliminate Render Blocking JavaScript with 'defer' and 'async'
Similar to CSS, JavaScript files added to the <head> section of a document are also treated as render blocking resources by default.
One way to eliminate rendering blocking resource is to use the defer and async attributes. Both are Boolean attributes, meaning that if added, they will be enabled without further configuration.
They also write scripts that can be added to the HTML <head> section without causing rendering issues. The defer attribute instructs the browser to download the script in the background so it doesn't block the page rendering process. A deferred script will be executed once the DOM is ready before DOMContentLoaded fires.
3. Don't Add @import to Your CSS Code
The next way to eliminate a render blocking resource is not to add @import to your CSS code. While @import is capable of keeping your HTML files clean, it is not a very good option.
That's because @import does allow you to import CSS from other stylesheets. However, this method causes the browser to process your CSS file more slowly because there is an import file that needs to be downloaded. In the end, the rendering process will be blocked.
If you want to add more than one CSS file to a web page, you can use the <link> tag or combine the files using the minify tool.
4. Remove Unused CSS and JavaScript Code
The next way to eliminate render blocking resource is to remove unused CSS and JavaScript code. Use a tool like PurgeCSS, which allows you to inspect your CSS code and remove unused parts, including from Bootstrap, when you use them.
Finding and removing unused JavaScript is a bit more complicated because you have to manually analyze the code. You can perform code analysis using Chrome DevTools, which will highlight unused JavaScript code in red.
Removing obsolete CSS and JavaScript code will optimize the performance of your website. This is because your website no longer stores programs or a set of code that may not necessarily work for the website.
5. Use Media Attributes
By default, browsers assume that all CSS files are render-blocking resources. However, if you add a media attribute to the <link> tag, you can indicate the presence of a specific CSS file to the browser.
Specific CSS only applies under certain conditions, such as under or over the viewport size or on a printed page. The media attribute lets you define custom media conditions for CSS files.
If you have a CSS file with one or more media queries, you can extract all @media and save them as separate files using the PostCSS plugin.
6. Split Code Into Smaller Bundles
Separating the code into smaller bundles is one method for eliminating a render blocking resource. You can use a module bundler like Webpack to split your code into smaller bundles.
Although splitting code can be done manually, using the module bundler tool will make it easier.
These days, most bundling tools come with a decoding function without complicated configurations, but they also allow you to change the configurations manually if you need to.
7. Deferring the Use of Non-critical CSS
All CSS files placed in an HTML page's <head> section are automatically considered rendering blocking resources. Separating CSS into two parts, namely critical and non-critical, is an optimization technique that can be one of the best options to eliminate a render blocking resource on your website.
The division of CSS into critical and non-critical groups does not need to be done manually. One of the tools that you can use is the Critical Path CSS Generator. This tool generates two downloadable CSS files: a critical CSS file and a combined file.
To reduce the number of HTTP requests, add important CSS files as external resources to the <head> section or insert them using <style> tags.
The combined CSS file includes the entire CSS rule, and you need to move it to the bottom before the closing <body> tag so it will be a non-rendering blocking resource.
Thus, the discussion about what a "rendering blocking resource" is, its types, and how to eliminate a render blocking resource to optimize your website's performance.
Use SEO services to help you optimize the performance of your website so that it is ready to be used to carry out a predetermined business strategy.
cmlabs
WDYT, you like my article?
Subscribe to Our Newsletter
Enter your email to receive news from us
Streamline your analysis with the SEO Tools installed directly in your browser. It's time to become a true SEO expert.
Free on all Chromium-based web browsers
Subscribe to Our Newsletter
Enter your email to receive news from us
Streamline your analysis with the SEO Tools installed directly in your browser. It's time to become a true SEO expert.
Free on all Chromium-based web browsers
