Magento 2关键CSS文件位置答案

【问题标题】：Magento 2 Critical CSS file positionMagento 2关键CSS文件位置
【发布时间】：2021-05-03 04:49:07
【问题描述】：

有没有办法在<title> 标记之后包含内联样式，如图所示：

如果我编辑文件 default_head_blocks.xml 我只能在合并的 css 文件之后显示它，这违背了使用关键 css 的目的。一种可能的方法是将这段代码添加到 default.xml 中，但随后内联 css 在所有 <head> 的顶部呈现在所有 <meta> 标签之前，所以我不确定这是否是不好的做法

<referenceBlock name="require.js">
       <action method="setTemplate">
           <argument name="template" xsi:type="string">Magento_Theme::/header/inline-css.phtml</argument>
       </action>
</referenceBlock>

【问题讨论】：

标签： magento2 critical-css

【解决方案1】：

由于 Magento 2.3（或 2.2？）Magento 有一个关键 Css 选项，这里是 doc

在您的（自定义）主题中，您可以定义 web/css/critical.css，然后使用关键 CSS 启用。

bin/magento config:set dev/css/use_css_critical_path 1

这个css文件将作为内联样式注入头部，其余样式将异步加载。

AFAIK，将关键的 css 放在头部的任何位置都可以完成这项工作。关键是异步加载其他样式。否则浏览器仍然会等到所有 css 文件都加载完毕后再加载内容（body 标签）。请参考this和this

【讨论】：