magento2中文中教程-magento中的css关键路径

7天成为Magento系统架构师,现在开始学习Magento全栈开发!

《Magento2.X企业级开发实战》

从外部文件加载的所有 CSS 样式都被视为渲染阻塞。 这意味着在加载这些文件之前不会显示网页。 通过使用“CSS 关键路径”,我们在 中内联提供缩小的关键 CSS,并推迟异步加载的所有非关键样式。 因此,我们可以显着缩短首次呈现页面的时间。

启用 CSS 关键路径
CSS 关键路径配置位于 Stores > Settings > Configuration > ADVANCED > Developer 选项卡上。 但是,开发人员选项卡在生产模式下是隐藏的。 进入生产模式后,只能使用 CLI 启用 CSS 关键路径。

要启用 CSS 关键路径:

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

确保您的主题有一个 critical.css 文件。 其他非关键 CSS 文件将异步加载。

Magento 的关键 CSS 概述
“关键” CSS 文件应位于 app/design/frontend///web/css/critical.css 默认 Luma 主题关键 CSS 文件位于 app/design/frontend/Magento/luma /web/css/critical.css 如果自定义主题没有critical.css文件,但Luma主题有一个critical.css文件,则使用Luma的critical.css。关键 css 文件路径也可以在 di.xml 中配置为 Magento\Theme\Block\Html\Header\CriticalCss 块中的构造函数 filePath 参数。

要为您的主题生成关键 CSS,可以使用关键路径 CSS 生成器(如 Penthouse 或 Critical),也可以自己创建。在创建关键 CSS 时,请遵循以下原则:

缩小您的critical.css 以减小其大小。
不要在critical.css 和非关键样式表中复制样式。
不要在critical.css 中引入非关键样式表中不存在的新样式。来自非关键样式表的 CSS 规则应该覆盖关键的 CSS 规则。否则你的风格可能会被打破。
关键 CSS 加载器
如果在配置中启用了“CSS 关键路径”,则将使用预加载微调器。它被添加到 Magento/Theme/view/frontend/layout/default.xml 中。加载并应用非关键 CSS 后,微调器消失。仅当您拥有“空白”主题 CSS 中的 CSS 样式时,微调器才会自动消失。如果您有自己的 CSS 规则,则应使用 data-role='main-css-loader' 属性隐藏预加载器。

关键的 CSS 性能改进
将关键路径 CSS 引入 Magento 会导致性能改进:

消除了阻塞渲染的 CSS 资源。结果,加载渲染阻塞资源的时间大大减少。

结果,Google PageSpeed Insights 得分提高了 5 分。

如无特殊说明或标注,任何个人或组织,复制、转载、采集本站内容请注明:
本文来源于:【Magento中文网】,并添加本文地址链接。
如未按上述操作复制或转载,本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益,可联系我们进行处理。