如何从main.CSS文件中删除关键CSS

我正在努力提高页面速度。我正在使用上面的折叠CSS来识别。然后我内联关键CSS，并异步加载完整CSS

但我最终得到了很多这样的重复CSS，这并不是最理想的。所以我的问题是：

如何从main.CSS文件中删除关键CSS？

---

提前感谢。

虽然这看起来像是一种反模式，但是在您的文档中嵌入的折叠CSS应该在您的外部CSS文档中复制。这样，您就可以创建一个站点范围的捆绑包，可以为整个站点获取一次，但初始页面加载将加快。虽然这确实会在前端造成额外的“浪费”KBs，但其优点是，只要将HTML发送到客户机，就可以获得所需CSS的一小部分，从而减少呈现客户机初始视图所需的时间

另外，要明确的是，如果您正确地遵循了这一做法，那么站点上的每个页面都会有一组不同的折叠上方css，因为每个页面的折叠上方都有不同的内容/标记，这使得无法从完整的外部文件中删除折叠上方的css（假设您将所有css连接到一个文件中）

你可以阅读更多关于以上折叠css的实践

如果你真的担心代码重复（虽然在这种情况下你不应该这样），你可以使用cookies来跟踪用户以前是否访问过该站点。如果用户以前没有使用过，那么您可以在折叠CSS的上面内联。如果用户以前使用过，您可以假设用户已经拥有完整的CSS文件，并且CSS文件将从浏览器缓存中提取

关于浏览器缓存的不可靠性有很多文章，所以我的建议是，您只需做您已经在做的事情来满足客户机的需求

---

应该提到的另一件事是，一旦HTTP/2变得更加流行，这种做法将基本消失，因为后续HTTP请求将不会像今天这样昂贵。考虑到这种做法需要大量的工具/工作（特别是在将来对HTTP/2进行验证时），最好（我认为是这样）完全避免使用它。

在转到pageSpeed insights之前，您是否在浏览器中运行了

审核

在那里，您可以看到删除未使用的css规则和内联性能的建议。


确保在页面开始处填写完整的
样式
，并避免在页面之间添加影响性能的标签


重要的是，
内联
应该用于
缩略图
，而不是页面样式

例如：

要有一些填充的东西
在我看来，这些工具中的一些超出了“超出范围”的建议。如果你的css被缩小、压缩，并且全部从一个文件加载，那么它不会使你的页面慢很多。从工作表中拉出特定的样式以进行内联“在折叠上方”样式设计只会导致混乱、不可管理的代码，速度不会明显加快。Pagespeed分数是一个很好的参考，但它不是一切。我同意，但客户端坚持使用Google Pagespeed结果。然后，您只需将css文件放在页脚中，并且在文件顶部具有内联样式，仅适用于页面加载时可见的项目（在折叠上方）。你需要一页一页地做这件事。不过，问题是代码重复…请看我的第一条评论。你不能两全其美。为什么要在外部样式表中复制上面的折叠CSS？假设你遵循其他最佳实践，你的外部样式表应该是一个包含网站所有CSS的文件。当用户访问你网站上的另一个页面时，你会希望它在浏览器缓存中，因为上面的折叠CSS应该根据你所在的页面而改变。明白了。我是这么想的，但你的回答不清楚。我编辑以澄清。我认为“最佳”是有争议的，因为这取决于服务的具体内容和部署样式更改的频率，并且有多种优化方法（如您所述，HTTP/2再次改变了游戏）。总的来说答案很好：）你的答案真的很好，我很感激。但是假设我仍然需要从css的其余部分中删除一些.css，是否有一个工具可以做到这一点？其中有一些工具可以删除重复的规则。我不确定它是否支持多个文件（我知道它只支持一个连接的文件），但您可以根据需要调整它。此外，我提到的cookie解决方案将删除除初始呈现之外的所有重复CSS。@DhruvJoshi为什么不尝试回答这个问题？运行审核，转到pageSpeed insights，按照建议删除内联性能。听起来这可能是个答案？我不明白-(
<p style="padding:2px">something to have some padding</p>