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?
Which Are Render Blocking Resources URLs?
There are files like stylesheets and scripts that may be flagged as render-blocking resources. A 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 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?
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.
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 Resources CSS?
Most of the time, CSS stylesheets are the main form of render blocking resources. Render blocking resources CSS can be eliminated fully by separating or using critical 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
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 stuff –> |
media=”print” onload=”this.onload=null;this.removeAttribute(‘media’);” href=”non-critical.css“
Adding either async or defer attributes to tags can help you eliminate render-blocking behavior.
|src=“/scripts/functionality.js” async> |
Specifically, add async to the tag to eliminate render-blocking
|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 Resources Google Fonts?
Using Google fonts is a great way of adding visual interest, 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 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 Resources 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.
// jQuery-dependent stuff
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
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
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.
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.