Eliminate Render blocking JavaScript and CSS in Magento 2

15 July 2021 | 5 mins read

Eliminate Render blocking JavaScript and CSS in Magento 2

1. Quick read

During your site audit in Google Page Speed Insight Tool 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. In this blog, we will help you to clear all these questions. Let’s see blog in details:

2. How to eliminate render blocking resources?

You can eliminate the render blocking of Javascript & css by Inlining key resources, delaying non-critical resources, and deleting everything unnecessary.

2.1. Render blocking JavaScript and CSS

A browser must parse HTML markup into a DOM tree before it can render any content. If any external stylesheets ( < link rel=”stylesheet” > ) or synchronous JavaScript tags ( < script src=”main.js” > ) are encountered, the HTML parser will halt.
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.

2.2. Reduce CSS blocking time

Using the following, ensure that just the bare minimum of CSS is obstructing render on your site:
  • Minify CSS
  • Defer non-critical CSS
  • Inline critical CSS

a. 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).
Include an appropriate plugin to minify CSS files on every build if you use a module bundler or build tool:
For Gulp: gulp-clean-css

b. 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 < link rel=”preload” href=”stylesheet.css” as=”style” onload=”this.rel=’stylesheet'”>

c. Inline critical CSS

Include any critical-path CSS used for above-the-fold material directly into keep it inline. The necessity for a round-trip request to acquire vital CSS is eliminated when crucial styles are inlined. CSS blocking time is reduced by deferring the rest.

Use a library to automate the procedure if you can’t add inline styles to your site manually. Here are several examples:/div>

The packages Critical, CriticalCSS, and Penthouse all extract and inline above-the-fold CSS.
Critters is a webpack plugin that loads the remainder of the CSS after the important CSS has been inlined.

2.3. Reduce JavaScript blocking time

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.
This may be done by optimizing your scripts in a variety of ways:
A< script > tag that:
  • Is in the < head > of the document.
  • Does not have a defer attribute.
  • Does not have an async attribute.
A < link rel=”stylesheet” > tag that:
  • Does not have a disabled attribute. When this attribute is present, the browser does not download the stylesheet.
  • Does not have a media attribute that matches the user’s device specifically. media=”all” is considered render-blocking.

3. Conclusion:

Blocking JavaScript should be avoided and used sparingly, especially for external scripts that must be fetched before being run. To prevent excessive network requests, scripts that are required to render page content can be inlined; inlined content must be short and executed rapidly to deliver decent performance. Scripts that aren’t necessary for the initial render should be removed. If any query related to this blog then Contact Us our expert team of Magento optimization will help you to resolve this problem.
Jul 19th, 2021|
This website or its third party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the privacy policy . By tapping on "I accept" you agree to the use of cookies.