There should be a new additional head block

[in-session]

Hello together,

there should be a way to call a critical block in the head, as an example head.critical, similar to head.additional

For what would this block:

• For improve the Time to First Draw (TTFD) of the web page like inline css but which is above the CSS files.
• For critical areas which cannot be covered by default_head_blocks, like
• In combination with the use of "Move JS code to the bottom of the page" + "Crtical CSS" there could be scripts in here that are excluded from moving for example

There is no way to customize it via the root template:

[m2-assistant[bot]]

Hi @in-session. Thank you for your report. To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[mrtuvn]

Why do you need customise it in root template. Default it's added via layout in theme module + viewModel https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml#L16 critical css file will add to between head tag. You don't have to modify root template to add this file. Magento already do it Make sure add file critical.css in your theme in folder web/css

[in-session]

Yes that's right, it was perhaps not quite explicitly expressed. As an example if you want to build critical yourself, I have in the case all CSS of modules and styles manually moved via a template in the non-critical area before.body.end (or reloaded via loadCss). So that only the default style.less is in the header. But at the first request of the page style-m.css is loaded, if you work here with _extend.less the CSS are added one after the other. Accordingly, half the of CSS must be loaded first to render the page. Is there currently no possibility to simply insert critical inline styles before the actual CSS or even other critical parts.

If you work with different domains for images and static files there is also no option to insert a <link rel="dns-prefetch" href="https://static.domain.com/"><link rel="dns-prefetch" href="https://media.domain.com/"> or <meta data-privacy-proxy-server="..."> before the css by default.

Also I wonder why the first request of the css must be the calendar in the Luma theme <css src="mage/calendar.css"/>

[mrtuvn]

Default magento don't have such task (grunt/gulp) for build critical you have to do it with your own tools. It's would better if this task support by default feature included in codebase critical file only available in luma theme only Above demo is instance magento enabled critical css + js move bottom before body. As you can see critical file place between style tag inside head

Also I wonder why the first request of the css must be the calendar in the Luma theme

This file maybe added via layout and available in all pages. https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml#L11

Keep in mind css order loaded in magento 2 will be difference than magento 1. You maybe experience order not work follow that you expected You must include css file in module via layout instead. If you include individual css file in layout from theme. Order file priority may not follow that you expect. Especially when you want to include external lib to before magento styles

If you work with different domains for images and static files there is also no option to insert a or before the css by default.

This feature not available but i already see new PR to cobebase update allow use href in link tag from layout. Previously <link/> magento not allow use href

[in-session]

Default magento don't have such task (grunt/gulp) for build critical you have to do it with your own tools. It's would better if this task support by default feature included in codebase critical file only available in luma theme only

Yes the generation of the critical css must be done via a tool or manually, like:

• https://jonassebastianohlsson.com/criticalpathcssgenerator/

• https://github.com/filamentgroup/criticalcss

  Above demo is instance magento enabled critical css + js move bottom before body. As you can see critical file place between style tag inside head

  Yes that's true, but let's assume you don't want to move the CSS, but still want to have critical styles inline before that is not possible without a custom module. Sorry I don't have a demo instance available right now, so I tried to copy it together (yellow markers):

Partially, the CSS is very large depending on what modules you have, in my case 200kb. In this case 90.3% of the CSS is not needed for rendering but already downloaded. Specifying the critical css here before the request to the css files effectively affects the Time to First Draw (TTFD).

---

Also I wonder why the first request of the css must be the calendar in the Luma theme

Keep in mind css order loaded in magento 2 will be difference than magento 1. You maybe experience order not work follow that you expected You must include css file in module via layout instead. If you include individual css file in layout from theme. Order file priority may not follow that you expect. Especially when you want to include external lib to before magento styles

That's right the correct sorting of CSS is unfortunately impossible

---

This feature not available but i already see new PR to cobebase update allow use href in link tag from layout. Previously <link/> magento not allow use href

Ok thanks for the information, but that would not bring much if own metadata should be in front (red marker on the first image) Currently, the only option I see here is to extend the JsFooterPlugin.php and then apply the str_replace to the '/title>'.

[mrtuvn]

default magento css not well-optimize as my opinion but if you want more than that you can take a look at theme creative-shop by magesuite. They optimized their theme base on blank magento but use latest modern tech (Webpack for split css to individual file base on current page you visit instead wraps all in one) + sass styles. Many more https://github.com/magesuite/theme-creativeshop

[in-session]

default magento css not well-optimize as my opinion but if you want more than that you can take a look at theme creative-shop by magesuite. They optimized their theme base on blank magento but use latest modern tech (Webpack for split css to individual file base on current page you visit instead wraps all in one) + sass styles. Many more https://github.com/magesuite/theme-creativeshop

Thanks for the info I already know magesuite :-) And it is actually also about building an own theme and to give here the possibility of optimization without the extends of controllers or on the access of third themes.