category oscprofessionals - Blogs - Eliminate Render blocking resources in Magento 2

Eliminate Render blocking resources in Magento 2

1. Overview

During your site audit in Google Page Speed Insight Tool (PSI) or GT Metrix or any other performance checking tool, you may have seen the opportunity section “Eliminate Render Blocking Resources”, What does it mean? How you can fix this? there are many questions in your mind.
After reading this blog, you will get answers to all your above questions. Let’s see the blog in detail.

2. Tools to identify render-blocking opportunities

Below given tools will be useful to identify render-blocking opportunities. These tools will list the files from where you can eliminate render-blocking.

3. What are render-blocking resources?

Render blocking resources are static files that are required for the rendering of a web page, such as fonts, HTML, CSS, and JavaScript.
When the browser encounters a render-blocking resource, it pauses all other downloads until these crucial files have been processed. Meanwhile, the entire rendering process has been halted. Non-render blocking resources, on the other hand, do not delay the page’s rendering. After the initial page renders, the browser can safely download them in the background.
Both scripts and stylesheets are render-blocking resources, delaying FCP and, as a result, LCP. To speed up the loading of your web page’s core content, defer any non-critical JavaScript and CSS.

4. Why eliminate render-blocking resources?

Eliminating render-blocking resources gives you several benefits, some of them are listed below.
  • Reduce page load time.
  • Increasing user experience.
  • Improvement in search engine optimization.
  • Fewer HTTP requests.
  • Improvement in largest contentful paint (LCP).
  • Improvement in first contentful paint (FCP).

5. How to Eliminate Render-Blocking JavaScript?

Programmers used comments, white space characters, tabs, block delimiters, newline characters to style their code. But the browser does not require additional spaces, tabs, or line breaks in order to interpret the code. The functionality of the code will not be affected if all code styling and comments are removed. So we can minify code and minimize file size.
Download and deliver only the bare minimum of JavaScript to users. Reduced blocked JavaScript results in a quick render and, as a result, a better LCP.
Use the below techniques to eliminate render-blocking:

5.1 Minify JavaScript

The objective of minifying js is to reduce the number of characters in the code. The smaller file size, then the browser will download and process fast.
Magento 2 should be in production mode.
./bin/magento deploy:mode:set production
  • Go to Stores -> Configuration -> Advanced -> Developer
  • Set Minify Javascript Files option to Yes.
  • Flush Cache at System > Cache Management page.
minify-js
screen3

5.2 Use the defer and async attributes

By default, JavaScript files added to the document’s section are considered as render-blocking resources.
Instead of the < head > section, place the < script > tags just before the closing < /body > tag to remove them from the critical rendering path.
Async – allows the HTML parser (e.g., a visitor’s browser) to download the JavaScript while the remainder of the HTML is being parsed. That is, it does not cease parsing altogether while the file downloads. However, once the script has been downloaded, it will pause the HTML parser and execute the script.
< scrip async src=”script.js” > < /script >
Defer – lets the HTML parser download the JavaScript while parsing the rest of the HTML and waits to execute the script until the HTML parsing is finished.
< scrip defer src=”script.js” > < /script >

5.3 Use Advance JavaScript Bundling

Advance JavaScript bundle feature of Magento 2 helps to reduce the number of server requests and the size of those server requests.
For example, it will help to reduce the
This is the inbuilt feature of Magento 2, enable this setting from Magento backend.
Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings, or from the command line.
adv-js-bunding

6. How to eliminate render-blocking CSS?

6.1 Minify CSS

CSS files can include characters like space, indentation, and comments to make them simpler to read. All of these characters are superfluous for the browser, and by minifying these files, they will be deleted. At the end of the day, lowering the amount of blocking CSS will always improve the time it takes to fully render the page’s core content (LCP).
screen4

6.2 Defer non-critical CSS

To detect any wasted CSS on your web page, utilize the Coverage tab in Chrome DevTools.
To improve: Remove any unneeded CSS from your site or relocate it to a different stylesheet if it’s needed on a different page.
Use loadCSS to load files asynchronously for any CSS that isn’t required for initial rendering, leveraging rel="preload" and onload.
html
image_2021_08_02T12_24_02_070Z

6.3 Preload CSS & fonts

In the Preloading process, you should tell the browser to fetch certain resources which are most important for the respective page.
You can preload resources by adding a tag with rel=”preload” to the head of your HTML document:

7. Results achieved using the above techniques

Before (Desktop)

before-optimization-desktop

After (Desktop)

after-optimization-desktop

Before (Mobile)

before-optimization-mobile

After (Mobile)

after-optimization-mobile

Latest Posts

Leave A Comment