Magento 2 关键 CSS 文件位置

问题描述

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

如果我编辑文件 default_head_blocks.xml，我只能在合并的 css 文件之后显示它，这违背了使用 critical-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>

解决方法

由于 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

critical-css magento2 magento2