Is there a way to include inline styles after the <title> tag as shown on this image:
If I edit the file default_head_blocks.xml I can only get this to show after the merged css file which defeats the purpose of using critical-css. One possible way is to add this bit of code into default.xml but then the inline css is rendered right at the top of <head> before all the <meta> tags so I'm not sure if this is bad practice or not
<referenceBlock name="require.js">
<action method="setTemplate">
<argument name="template" xsi:type="string">Magento_Theme::/header/inline-css.phtml</argument>
</action>
</referenceBlock>
Since Magento 2.3 (or 2.2?) Magento has an option for Critical Css, here is the doc
In your (custom) theme you can define
web/css/critical.cssand then enable using critical css.This css file will be injected as inline style into the head and the rest of styles will be loaded asynchronously.
AFAIK, placing the critical css in any position inside the head will do the job. The point is to load the other styles asynchronously. Otherwise the browser will still wait till all css files are loaded before loading the contents (body tag). Please refer to this and this