如何从 main.css 文件中删除关键 CSS
How to remove critical CSS from the main.css file
我正在努力提高页面速度。我正在使用 Critical Path CSS Generator tool to identify above-the-fold CSS. Then I inline critical CSS as suggested，并异步加载完整的 css。
但我最终得到了很多重复的 CSS，这不是最佳选择。所以我的问题是：
如何从 main.css 文件中删除关键 CSS？
提前致谢。
虽然它看起来像是一种反模式，但所有首屏 CSS 你内联到你的文档 应该 在你的外部 CSS 文档。这样，您就可以制作一个站点范围的捆绑包，该捆绑包可以为您的整个站点获取一次，但初始页面加载会加快。虽然这确实会预先产生额外的 "wasted" KB，但优点是一旦 HTML 发送到客户端，您就可以使用必要的 CSS 的一小部分，从而减少呈现客户端初始视图所需的时间。
此外，需要说明的是，如果您正确遵循此做法，网站上的每个页面都会有一组不同的首屏 css，因为每个页面都有不同的 content/tags 首屏，这使得无法从完整的外部文件中删除首屏 CSS（假设您将所有 CSS 连接到一个文件中）。
您可以阅读更多关于首屏的做法css here。
如果您真的很担心代码重复（虽然在这种情况下您不应该担心），您可以使用 cookie 来跟踪用户之前是否访问过该站点。如果用户之前没有，那么你可以内联首屏CSS。如果用户之前访问过，您可以假设用户已经拥有完整的 CSS 文件，并且 CSS 文件将从浏览器缓存中提取。
关于浏览器缓存有多不可靠的文章有很多，所以我的建议是您只需按照您已经在做的事情来满足客户的要求。
另一件应该提到的事情是，一旦 HTTP/2 变得更加普遍，这种做法将在很大程度上消失，因为后续的 HTTP 请求将不会像现在这样昂贵。考虑到这种做法需要密集 tooling/effort（尤其是在未来针对 HTTP/2 进行校对时），完全避免它可能更好（我认为是）。
在进入 pageSpeed insights 之前，您是否 运行 在浏览器中 audit
在那里您可以看到删除未使用的 css 规则和内联性能的建议。
一定要在页面的开头写完整 style 并且避免在页面之间影响性能的这些标签
和重要的是，inline应该用于thumbnails而不是用于设置页面样式
示例：
<p style="padding:2px">something to have some padding</p>
我正在努力提高页面速度。我正在使用 Critical Path CSS Generator tool to identify above-the-fold CSS. Then I inline critical CSS as suggested，并异步加载完整的 css。
但我最终得到了很多重复的 CSS，这不是最佳选择。所以我的问题是：
如何从 main.css 文件中删除关键 CSS？
提前致谢。
虽然它看起来像是一种反模式，但所有首屏 CSS 你内联到你的文档 应该 在你的外部 CSS 文档。这样，您就可以制作一个站点范围的捆绑包，该捆绑包可以为您的整个站点获取一次，但初始页面加载会加快。虽然这确实会预先产生额外的 "wasted" KB，但优点是一旦 HTML 发送到客户端，您就可以使用必要的 CSS 的一小部分，从而减少呈现客户端初始视图所需的时间。
此外，需要说明的是，如果您正确遵循此做法，网站上的每个页面都会有一组不同的首屏 css，因为每个页面都有不同的 content/tags 首屏，这使得无法从完整的外部文件中删除首屏 CSS（假设您将所有 CSS 连接到一个文件中）。
您可以阅读更多关于首屏的做法css here。
如果您真的很担心代码重复（虽然在这种情况下您不应该担心），您可以使用 cookie 来跟踪用户之前是否访问过该站点。如果用户之前没有，那么你可以内联首屏CSS。如果用户之前访问过，您可以假设用户已经拥有完整的 CSS 文件，并且 CSS 文件将从浏览器缓存中提取。
关于浏览器缓存有多不可靠的文章有很多，所以我的建议是您只需按照您已经在做的事情来满足客户的要求。
另一件应该提到的事情是，一旦 HTTP/2 变得更加普遍，这种做法将在很大程度上消失，因为后续的 HTTP 请求将不会像现在这样昂贵。考虑到这种做法需要密集 tooling/effort（尤其是在未来针对 HTTP/2 进行校对时），完全避免它可能更好（我认为是）。
在进入 pageSpeed insights 之前，您是否 运行 在浏览器中 audit
在那里您可以看到删除未使用的 css 规则和内联性能的建议。
一定要在页面的开头写完整 style 并且避免在页面之间影响性能的这些标签
和重要的是，inline应该用于thumbnails而不是用于设置页面样式
示例：
<p style="padding:2px">something to have some padding</p>