带有打印媒体的 CSS 包含在 PageSpeed Insights“未使用的 CSS”中答案

【问题标题】：Css with print-media is included in PageSpeed Insights "Unused CSS"带有打印媒体的 CSS 包含在 PageSpeed Insights“未使用的 CSS”中
【发布时间】：2020-01-31 09:35:04
【问题描述】：

我正在使用 Google PageSpeed Insights，但在“删除未使用的 CSS”下出现了一个问题我正在为印刷媒体使用单独的 css：

<link href="/sass/print.min.css" rel="stylesheet" media="print" type="text/css" />

显然，PageSpeed Insights 建议应该删除它，因为它没有被使用（当然）。

如果我删除链接标签，我的分数会增加大约 5 分。

为什么还要加载？在页面上使用 print-css 并在 PageSpeed Insights 上保持良好分数的最佳做法是什么？

【问题讨论】：

看起来像一个错误，尝试删除 type="text/css" 并查看它是否修复它（不太可能，但因为它是一个不需要的属性也可能）。
我尝试过使用type="text/css"和不使用type="text/css"，但完全没有区别
忽略这个问题，PSI 是一种工具，不是万能的。您是否尝试过在 Google Chrome 中运行“审核”选项卡并查看它是否在那里显示为问题？它不应该显着影响您的分数，如果是的话，我猜该文件每次都是动态生成的，因为它影响的分数的唯一部分是您的总下载时间。愿意分享您的网址，以便我可以正确查找您吗？
是的，我在 Chrome 中使用“审核”选项卡，但遇到了同样的问题。它确实会影响我的分数。如果标签被删除，我的分数将增加大约 5 分。当然，这里是公共站点的 url：stromma.com 编辑：如果你在 PSI 中运行 url，你会看到有关 GTM 的其他几个问题，请忽略它们，因为它们现在超出了我的范围。
sitebulb.com/hints/page-speed/…

标签： css pagespeed pagespeed-insights css-print

【解决方案1】：

您可以尝试两种解决方案：
第一个是将打印样式嵌入到您的主 css 中

@media print { /* All your print styles go here */ #header, #footer, #nav { display: none !important; } }

@media print 将确保内部应用的样式仅适用于打印布局

另一种方法是通过 javascript 附加/分离您的 css，检测用户是否按照此处的建议打印内容： https://stackoverflow.com/a/44918520/5778362

【讨论】：

很好的解决方法，所以 +1，但这只是解决 Page Speed Insights 的问题，这两种解决方案都打破了现实世界的最佳实践，实际上这是 PSI 的一个错误。
将它包含在主 css 中似乎不是一个好的解决方案。如果我在我的主 css 中包含 print css，它肯定会被加载，然后会被归类为“未使用的 css”。我想删除未使用的 css，而不是添加。但是，在 print-event 上添加 css 似乎值得一试。但如果这样可行，我会问一个问题：媒体属性到底有什么用？是否需要它？