如何解决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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。