Modified on: Oct 1, 2022

4 Effective Ways To Eliminate Render Blocking Resources To Improve The Pagespeed Performance

“Eliminate render-blocking resources” is one of the most common warnings you may come across while analyzing the website’s PageSpeed performance in Google PageSpeed Insights. The render-blocking resources can slow down your website’s PageSpeed and affect the Core Web Vitals.

Now, you may be wondering how to solve the “Eliminate render-blocking resources” warning and improve the PageSpeed performance score of your website. Here, we will discuss what are render-blocking resources and the effective ways to eliminate render-blocking resources to improve your Core Web Vitals.

What Are Render-Blocking Resources?

During web page rendering,a process where the browser creates the website from the codes & images on the website, a browser needs to go through processes that includes loading and parsing (executing) various resource files such as HTML, CSS, JavaScript, and media files (images and video).

Render-blocking resources are those that delay the browser rendering of the page content on visitors’ screens by blocking the main thread. If a browser comes across a render-blocking resource, the entire critical rendering path is put on hold and the visitor would see a delay in loading the website completely.

Render blocking resources network header

Let’s understand the render-blocking resources with an example. Assume a javascript could be a render-blocking resource for your website, which by default they are. That indicates when the browser comes across that Javascript file; it holds the rendering process until the render-blocking Javascript file is fully executed.

During that time the browser would not be able to do the tasks needed to show the webpage to the visitor.Therefore, it would harm the PageSpeed performance of your website.

Type Of Render-Blocking Resources

The browser considers linked CSS & javascript files in the <head> tag in the HTML file as a render-blocking resource that includes:

CSS stylesheets
Any scripting file such as JavaScript in the <head> tag
Web fonts

Note: any media files in the <body> section of the HTML file are considered a non-critical resource.

The Importance Of Eliminating Render-Blocking Resources

By eliminating render-blocking resources, you can significantly minimize the critical rendering path which leads to reducing your website’s page loading time.

A Google PageSpeed Insights score based on the five performance metrics that have different weights:

First Contentful Paint (FCP): 10%
Largest Contentful paint (LCP): 25%
Total Blocking Time (TBT): 30%
Cumulative Layout Shift (CLS): 25%
Speed Index (SI): 10%

If your website has a large number of render-blocking resources, it can typically harm these performance metrics, leading to a poor Google PageSpeed Insights score. Eliminating render-blocking resources can positively impact your Core Web Vitals, resulting in a good PageSpeed score.

Therefore, if you are struggling with a poor PageSpeed score, you must take steps towards eliminating render-blocking resources from your website.

The Effective Ways To Eliminate Render Blocking Resources

Eliminating the render-blocking resources is one of the most essential web optimization techniques that Google PSI suggests to improve the PageSpeed score. Removing these render-blocking resources can be the most challenging process, as it needs a lot of technical knowhow.

The best course of action would be to install an optimization tool like RabbitLoader. However, if you want to explore the Do It Yourself route, you can follow the below strategies, which include:

Splitting The Code And Deferring Non-Critical JavaScript

Minify CSS And JavaScript Files
Generating Critical CSS

Splitting The Code And Deferring Non-Critical JavaScript

Code splitting is an effective technique to eliminate render-blocking resources and optimize the render-blocking path. It allows you to break a large JavaScript file into small JavaScript chunks.

Most of the JavaScript functions are not required for the initial page loading time. These JavaScript functions are considered render-blocking resources. By deferring these JavaScript functions, you can significantly eliminate the render-blocking resources from the critical rendering path.

For this, you need to manually identify your non-critical JavaScript function and add a defer attribute in the HTML file.

Syntax:

<script src="non-critical.js" defer></script>

You can easily avoid these coding endeavors by just installing RabbitLoader. When you use RabbitLoader, it will take care of every optimization technique required to supercharge your website along with the technique to eliminate render-blocking resources.

Minify and Compress CSS And JavaScript Files

Most web developers use line breaks, comments, and white spaces to increase the readability of the coding file. However, these characters are considered unnecessary characters by a browser. However, when a browser parses the coding file, these characters increase the web page’s file size.

Minification is a method to delete unnecessary characters from your code without harming their functionality. Compressing is the method by which you can easily replace the repeated string variables with a single pointer. Please visit our minify resources blog.

For a large website, manual minification and compression can be daunting for you. For an effortless solution, you should try installing RabbitLoader.

Generating Critical CSS

Generating critical CSS removes the render-blocking resources and improves the LCP and INP performance by creating a separate CSS file for critical CSS.

To manually do this, you need to first identify your critical CSS and then make a separate file for this. Read the critical CSS blog to learn more about this.

While most optimization tools avoid this technique, RabbitLoader can successfully reduce the CSS file size by 90% in most cases by generating critical CSS. Let’s see with an example.

Here, RabbitLoader reduced the CSS file size to just 39.4 kb from 2.3 Mb. And you can see the improvement. The average page rendering time is significantly reduced from 10950.5 ms to just 287.8 ms.

Eliminate Render Blocking Resources With RabbitLoader

Mitigating the Google PageSpeed Insights warning “Eliminate render-blocking resources” can be daunting if you are trying to do this by yourself, especially if you are from a non-tech background.

Instead try using RabbitLoader, it will perform all the necessary techniques that are essential to eliminate render-blocking resources and optimize your website’s PageSpeed performance. As a result, you can pass the core web vitals assessment and improve the Google PageSpeed Insights score.

Document

Get The Best PageSpeed Score

For Your WordPress Website

Install Now

All in One Optimization Plugin

No Coding Knowledge Required

Modified on: Oct 1, 2022

3 Exclusive Easy Ways to Defer Offscreen Images and Videos to Load Pages Faster

Defer Offscreen images or videos are the ones that are positioned outside the screen (viewport) and hence not visible on the screen when a visitor loads a webpage. By indicating the browser not to load the resources currently outside the visible screen area, page load time can be improved.

Loading offscreen resources may affect user experience by downloading data that isn’t immediately required.
GTMetrix

A massive performance boost can be gained as the media elements contain graphics and are commonly the heaviest resources on any page. Smart lazy-loading also called deferred loading is the solution to such problems on a website.

Page Contents

What Will Happen If Offscreen Images Are Not Deferred?

If you don’t defer offscreen pictures, all such assets of your webpage will load at once when one loads your webpage. It will increase page load time, which will eventually lower user experience and performance score. Let’s explain it with an example.

Let’s imagine your webpage has 15 images and 2 of them are on the front fold. Now if a user visits your website. All 15 images will load at once even if only 2 images are visible and others are below the fold. Your whole HTML structure will block and nothing will render until all the images and other things are completely loaded.

Benefits of Defer Offscreen Images:

Decrease page load time:

Defer Offscreen Images decreases page load time as it loads only the visible images and hence reduces the number of images that need to be loaded. So, your webpage’s HTML structure will not be blocked. Because of this process, the rendering time also decreases.

Saving time and money:

The visitor can only view the generated images if they need them. The user who bounces immediately or doesn’t scroll down will have fewer bytes delivered to their computer. It is literally possible to save money by lazy loading if your CDN provider charges by data transfer and HTTP requests. Those on limited data plans can also save money by lazy loading.

Smart work:

Lazy loading saves computing power and processing time to render a webpage hence saving battery life for hand-held devices such as smartphones or tabs.

Up SEO Ranking:

As the load time decreases and also the site speed increases, the user experience will get better. This will take your website up to the SEO ranking.

Got the point. How to achieve it?

Method 1- use RabbitLoader

The easiest ad best way to defer the loading of resources is to use RabbitLoader on your website. If you are using WordPress, consider trying our free plugin to lazy load images with several other features to score best in Google PageSpeed Insights. Our services can be used for other platforms, including your in-house developed websites with PHP/ASP/NodeJs, etc.

Our service can defer pictures used in <img> tags as well as background images by automatically detecting and removing defer offscreen images from the critical rendering path.
We can lazy load many other heavies on network media embeds or Iframes such as Google Maps, YouTube/Vimeo videos and load them after the webpage is loaded and rendered.
We can lazy load iframes used for lead generation or other marketing forms and make sure they can still be served to visitors as soon as possible
Help save your server’s bandwidth or CDN cost as some resources are never loaded if the user doesn’t scroll till that point

I am a geek, suggest me some other ways-

Nice to meet you. We are happy to discuss some of the modern methods we are using internally to best optimize the payload served from our client’s websites. We have discussed in the past how to reduce the image size without losing its quality, and in this post, we are going to focus on various loading techniques to separate out critical and non-critical elements and make the best use of the bandwidth and computation power available on the visitor’s device.

Our research starts from the key idea that only those media elements should be loaded with a high priority which is displayed inside of the viewport. And we know for sure, any such resource requested after TTI (Time to Interactive is the point after which a webpage is capable of reliably responding to user inputs.) is not flagged as a violation in the Lighthouse audit.

Method 2- use “loading” HTML attribute

The <img> tag which is used to embed an image into the document now supports a new attribute called “loading” which tells the browser how the source specified for this element should be loaded. The “loading” attribute is optional and can have two possible values if present-

loading = "eager” – If this value is set, the browser loads the image immediately irrespective of the element’s visibility or the position with respect to the viewport
loading = "lazy" – The image loading is deferred till the browser thinks that the element is going to be visible soon. Typically it happens when a user scrolls the page and reaches a point precalculated by the browser when the load triggers.

Example-

<img loading="lazy" src="example.webp" alt="image-example" class="img-css-rules">

Challenges with this approach-

For every page, it’s a tedious task to identify pictures appearing above and below the fold and set the appropriate value for the ‘loading’ attribute in advance
One size can not fit all. The page may have pictures placed in such a way that on a desktop browser, 6 images appear above the fold, but on a mobile browser, only 3 pictures are appearing on the screen. This attribute can not help you in this situation.
You can take the help of JavaScript to set the appropriate values but that may increase the load on the main thread and thus increase the TBT (total blocking time) score of the Lighthouse audit.
The feature is not yet supported by some browsers. For a full list of supported browsers with their versions, see the below table.

Browser Compatibility for loading HTML attribute

This feature is now supported by almost all modern browsers except IE, Safari, and Firefox for Android. All Chromium-based browsers may not support it below version 77.

image-lazy-load-support — Image credit –mozilla

Method 3- attach JS listener to elements visibility event

The Intersection Observer API can let your JavaScript listener function know when exactly an element might be entering to viewport or in close proximity. You can then modify the DOM to set the correct source to load the media. This API gives you a superfine control to adjust margins around the viewport to give you buffer time to load the resources without the user observing any broken experience.

This JavaScript API is used by many plugins along with a fallback or polyfill to lazy load elements on the webpage. You can go on writing it on your own or can pick a plugin like lazysizes and get started quickly.

Example

The below example covers the basic concepts of using this API for an HTML page-

See the Pen

Lazy loading images using IntersectionObserver – example code by ImageKit.io (@imagekit_io)

on CodePen.

Browser Compatibility for Intersection Observer

This feature is now supported by almost all modern browsers except IE. You can use a polyfill available for Intersection Observer.

interaction-observer-support — Image credit –mozilla

Things to take care of when lazy loading resources

Consider using a placeholder image of small size but similar dimensions to the original image to avoid layout reflow and calculation which is expensive
It’s not a good idea to lazy load images appearing above the fold which should be visible to the user as soon as the page is loaded. This can also impact the CLS score of Core Web Vitals.
Heavy JS functions written to achieve this goal can increase the load on the browser’s main thread and impact the user’s interaction
If a visitor scrolls the page too fast, they may reach a point where the media is still to be loaded. You need the right balance and observe interactions carefully.

For Rabbit Loader users, we have added this as an opt-in feature where iframes and pictures can be routed via our CDN and lazy-loaded in the best possible way across browsers without site owners putting any extra effort. Once enabled, defer offscreen images used in a webpage can be automatically deferred to boost page loading time and improve the speed index.