Magento 2 Google page speed insight: eliminate render-blocking JavaScript and CSS

[adityag186]

Preconditions

1. Magento 2.1.3 Mysql, Php 5.6, apache, centOS

Steps to reproduce

1. Go to google page speed analytics tool
2. Run for www.atlanticbooks.com

Suggestions given:

Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 1 blocking CSS resources. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML. Optimize CSS Delivery of the following:

https://www.atlanticbooks.com/…80f06aa0a25c8c71129972d0e29ca151.min.css

Please find below link to see the suggestion. https://developers.google.com/speed/pagespeed/insights/?url=www.atlanticbooks.com&tab=desktop

I have looked up online alot for this but could not find a fix. Please help

[yumicom]

The same on 2.1.8

[magento-engcom-team]

@adityag186, thank you for your report. We've created internal ticket(s) MAGETWO-82493 to track progress on the issue.

[kswarm]

Is this ticket still being addressed? Still a problem on 2.2.0

[korostii]

Well, it's being tracked, but that's not the same as being actively dealt with. Depending on community feedback, such issues might be considered low-priority and get pushed back for a long, long time.

Please consider upvoting this issue, as that seems to be the only official way of prioritizing the GitHub issues (well, short of contacting a certain Magento employee directly, via twitter or whatever).

[DrewML]

If we just move the core application's CSS to load async (or at the bottom of the document), your shoppers will then have to deal with a flash of unstyled content on the first visit, which is jarring.

The ideal solution here is to inline critical CSS for the first render, and then async load the rest of the styles.

Unfortunately the current setup of CSS in Magento themes isn't designed in a way that makes it easy to identify critical styles for page load. I'm open to discussing ways to do this if someone is interested in taking on the work, but at the moment our Front-End priorities internally are currently focused on changes that will have a greater impact on storefront performance.

[Januszpl]

You can try on your own to implement async css loading per project but still gains are really small (depending on the specification of the project). I would focus probably more on javascript to make any M2 project working faster and having better results in google page speed performance score.

[ioweb-gr]

Hi, since early August that mobile indexing first was implemented by Google, it has become crucial to eliminate render blocking js. Currently Magento 2 isn't very good at that and even though pages load really fast (<1s), the pagespeed result becomes 5-10% due to that issue which doesn't help in SEO.

In webpack there are plugins that can extract critical css so you can use it in above the fold content while removing the rest to load async and minimize the effects of flash of unstyled content. Do you think https://www.npmjs.com/package/grunt-critical or something similar could be used during the build process to have the same approach and help deal with this issue?

[DrewML]

Hi, since early August that mobile indexing first was implemented by Google, it has become crucial to eliminate render blocking js.

In webpack there are plugins that can extract critical css

Hey @ioweb-gr, it sounds like you're talking about 2 different but related issues, so I'll address separately.

Render Blocking JS It's currently possible in Magento 2 to customize your store so that the script tags for JS are in the bottom of the body rather than the head. Alternatively, the more modern approach would be to add a defer attribute to the existing JS in the head (won't block, but keeps execution order). It would be nice to do this in core, but we wouldn't be able to do this until 2.4 at the earliest, since it will break any server-rendered content in the body that expects the core JS to have been loaded/initialized. There are also a few small changes in core that you'd need to make (can be done in your own store through a module with some overrides). @shakyshane has done some exploration in this area and has given talks about the changes you'd need to make.

Render Blocking CSS Regarding extraction of critical CSS, I'd highly recommend doing it if you have the processes in place for this. As far as it being in core, I've been focused more on slimming down and speeding up the JS as it is significantly more expensive than CSS byte-for-byte. If you're interesting in seeing this in the core, I'd encourage you to document a plan of attack for an implementation into static content deployment and then make the proposal in the architecture repo).

[DanielRuf]

Well, the main issue is requireJS. M 2.3 and the PWA are the solution as the current frontend stack is not easily optimizable even if we work on a promisified requireJS implemenration but each JS code pauses the rendering and processes the new code = blocking + waiting + rerendering.

[DanielRuf]

What about Brotli?

[Supplement]

So the render blocking resources module will work fine when installed on 2.3? What is the synopsis when adding it to 2.6 or 2.7?

https://www.modpagespeed.com/doc/build_ngx_pagespeed_from_source

[DanielRuf]

I see there nothing about this as it will not work for the setup that we have (dynamically loaded scripts).

[krzksz]

I'm closing this as of version 2.3.3 Magento supports both critical CSS technique and moving JavaScript files to the bottom of the page. You should be able to find both settings under Developer tab in admin panel.