How can I improve Total Blocking Time for better store performance?

Hi, to fix your Total Blocking Time you need to defer all javascript and css assets to the end of rendering.

For example take a look at your theme.js script include, and change it to add the defer attribute so it appears as follows:


This will mean it gets loaded at the end of execution, thus freeing up rending and stopping blocking.

This is all good for JavaScript - although the trouble here is with removing render blocking on CSS because this will cause a flash of un-styled elements first while the styles are loaded. Which doesn’t look so great!

To fix the css render-blocking, you will need to inline your base styles which are required for the first render.

For achieving this you simply need to copy-paste the styles used to render your header, and home page content into a block in your header. You can find these in your developer tools under the coverage section.