ThemeIM Blog Details

How to Eliminate Render Blocking Resources for Better Website Speed

Eliminate Render Blocking Resources

Slow page loading speed has a negative impact on both website performance and SEO. Render blocking resources are one of the main reasons for slowing down your website.

When the browser encounters such critical files, it automatically stops downloading the rest of the resources. Eventually, this decreases the overall website loading speed.

— Knowing what render-blocking resources are and how to block or minimize render-blocking is important. This will make your web pages load faster, especially when someone visits for the first time. So today, we are going to show you how to minimize or eliminate render blocking resources.

What Is Render Blocking?

Render-blocking resources are specific fonts, stylesheets, JavaScripts, or HTML imports that are responsible for blocking or delaying page content to render by the browser. The browser will render content slowly for the first time if the “First Paint” is delayed by these static files. The “First Paint” may contain borders, text, images, or background colors.

Which Are Render Blocking Resources URLs?

There are files like stylesheets and scripts that may be flagged as render blocking resources. A <script> tag will be considered as a render blocking resource when –

  • It is in the <head> of the document
  • It doesn’t have a defer attribute
  • It doesn’t have an async attribute

Similarly, a <link rel=” stylesheet”> will be considered as a render blocking resource when –

  • It doesn’t have a media attribute that is not from the user’s device. For example, media=” all” is considered as render blocking.
  • It doesn’t have a disabled attribute. This type of attribute doesn’t allow the user to download the stylesheet.

How To Identify Critical Resources?

How To Identify Critical Resources

 

Identifying the critical and non-critical resources is the very first step of how to eliminate render blocking resources. When you load your website, you can find the coverage tab in Chrome DevTools. You can identify which resources are critical and which are not.

“The critical rendering path is defined as the sequence of steps that are followed by a browser to turn HTML, CSS, and JavaScript into pixels that render on the screen.”

When you load and run a particular web page, you will notice the amount of code used and the amount that is loaded. This will help you find out the critical JS and CSS. Click on the URL that you want to inspect in the source panel.

You will see green and red colors marked on the codes of the CSS and JavaScript files.

Related & Important: How to Reduce Cumulative Layout Shift

Green (critical): These are specific styles needed for the “First Paint” and codes that are crucial for the core functionalities of the page.

Red (non-critical): These are styles that don’t load immediately and codes that are not used in the core functionalities.

How To Eliminate Render Blocking CSS?

How to Identify Critical Resources

Most of the time, CSS stylesheets are the main form of render blocking resources. Render blocking CSS resources can be eliminated fully by separating or using critical inline CSS in the HTML. This will asynchronously load CSS.

No one would want to create an unpleasant user experience by revealing unpleasant content that hasn’t been styled with proper CSS. First, you have to confirm loading above-the-fold content with CSS.

But the question is how do you eliminate render blocking CSS?

—For CSS, priority should be given to no delay in the initial display. Also, when loading non-critical CSS in the background, the most important thing is to make sure that the most critical styling is loaded first.

Here’s what you should follow –

  • Make sure the most critical CSS styling loads as soon as possible either with an intentionally render blocking or a non-render blocking where an inline <style> block is embedded directly in the HTML.
  • After that, non-critical CSS should load in the background with a technique called asynchronous CSS.

The setup for critical and non-critical CSS might look something like below –

<!– other <head> stuff –>

<!– very small file for critical CSS (or optionally inlined with a <style> block) –>

<link rel=”stylesheet” href=”critical.css“>

<!– async non-critical CSS –>

<link rel=”stylesheet” media=”print” onload=”this.onload=null;this.removeAttribute(‘media’);” href=”non-critical.css“>

<!– no-JS fallback for non-critical CSS –>

<noscript>

    <link rel=”stylesheet” href=”non-critical.css“>

</noscript>

</head>

How To Eliminate Render Blocking JavaScript?

Before you eliminate the render blocking effect of JavaScript resources, you should have a total idea about your site’s functionalities. For this method, you have to locate the non-critical <script> and <link> tags that are accompanied by either async or defer attributes.

Adding either async or defer attributes to <script> tags can help you eliminate render-blocking behavior.

<script src=“/scripts/functionality.js” async></script>

<script src=“/scripts/functionality.js” defer></script>

Specifically add async to the <link rel=”import”> tag to eliminate render-blocking

<link rel=“import” href=“file.html” async>

No matter what you do, you have to understand if your script is designed to work with async or defer attributes. You can even break your site by adding tags that don’t work with the right attribute. That is why async and defer attributes should only apply to non-critical resources. More importantly, the attributes that aren’t required to render the critical components of a web page.

How To Eliminate Render Blocking Google Fonts?

Using Google fonts is a great way of adding visual interests, giving a unique look to a website, and establishing a brand. This also allows you to add one or more custom fonts to make it more stylish.

Although it may add style to a web page, this also acts as a render blocking resource. Adding custom fonts is adding CSS with a <link> reference. This is by default a render blocking. But eliminating render blocking Google fonts is easy.

The elimination can be done with the same asynchronous CSS technique. The asynchronous CSS technique can not only be used for eliminating non-critical or low-priority CSS resources but also for eliminating render blocking Google fonts.

To make the elimination process more effective, you can speed up Google fonts by combining async CSS loading with preloading resources.

How To Eliminate Render Blocking jQuery?

Just like eliminating render blocking JavaScript, adding the defer attribute to the <script> tags can also eliminate render blocking jQuery.

Implementing this method will load jQuery in the background faster while not compromising the loading speed of the content that will be displayed on the screen initially.

<!– self hosted –>

<script defer src=”jquery.js”></script>

<!– or from a CDN –>

<script defer src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js“></script>

Moving all inline <script> to an external file is surely a good practice. This will also help to cache and to defer. But inline JavaScripts and the <script> that relies on a defer like jQuery can’t be ignored. 

<script>

document.addEventListener(‘DOMContentLoaded’, function(){

    // jQuery-dependent stuff

});

</script>

The above command makes jQuery run after the DOMContentLoaded event. Also, it will run after the defer files that depend on jQuery are ready and executed.   

Eliminate Render Blocking By Optimizing The Critical Rendering Path

Optimizing the critical rendering path is one of the most advanced options. Basically, the resources that contribute to rendering the first pixel of the screen will be considered as render resources. For example, most HTML, CSS, JavaScript files are used to build the landing carousel or header navigation.

— Remember, most of the time the resources contributing to secondary functionality or styling the content of a web page are considered as non-critical resources. For instance, a calendar widget on the home screen can be considered a non-critical resource.

All the methods of optimizing the critical rendering path focus on strategies for optimizing “Above-the-Fold” rendering, which is the area that appears first before scrolling down to the rest of the content. These strategies are –

Combine Multiple CSS Files into One File

One extra CSS file means a slower page load than before. Therefore, you should combine multiple CSS files into a single file. Combining multiple CSS files into one file makes CSS implementation easier and more effective.

Inline CSS Files

Some find this method inappropriate while some are fond of this method. We will tell you why. Inline is the process of inserting CSS or JavaScript directly in the HTML file rather than creating individual files and then linking them to the HTML file.

Some like to create separate files for CSS and JavaScript. This way, they can organize the code and it is easier to troubleshoot in this way. But there will be a lot of files when you are working on a big project. All these CSS or JavaScript files will increase page loading time.

And using inline CSS or JavaScript can be the right solution. The browser will be able to read and execute files almost immediately.

Inline CSS Files

Image Source: Gtmatrix

Note:

Eliminating render blocking resources by optimizing the Critical Rendering Path is not easy. You must have a decent skill and understanding of the rendering behavior of your website.  

Summary:

Eliminating render-blocking resources is undoubtedly an effective optimization. It has a direct impact on improving the speed of the key performance score metrics. You can investigate the “Eliminate render-blocking resources audit” of either PageSpeed Insights or GTmetrix report to find out the render-blocking resources.

— We can guarantee all these steps will minimize or eliminate render blocking behavior if you apply them correctly.

Editor Team

We are a group of WordPress experts (editorial team) from Themeim. All of these articles go through manual testing to reveal the ultimate outcome.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.