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

我正在努力提高页面速度.我正在使用Critical Path CSS Generator工具来识别首字母CSS.然后我按照建议内联关键CSS ,并异步加载完整的css.

但是我最终得到了很多重复的CSS,这不是那么优化.所以我的问题是:

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

提前致谢.

虽然它可能看起来像一个反模式,但是你内置到文档中的所有首字母 CSS 应该在外部CSS文档中重复.这样,您可以创建一个站点范围的捆绑包,可以为整个站点提取一次,但初始页面加载将加速.虽然这确实会导致额外的"浪费"KB,但优点是,只要将HTML发送到客户端,就可以获得一小部分必需的CSS,从而减少了渲染客户端初始视图所需的时间. .

另外,要明确的是,如果您正确地遵循这种做法,网站上的每个页面都会有一组不同的首屏css,因为每个页面都有不同的内容/标签,这样就可以实现不可能从完整的外部文件中删除上面的CSS(假设您将所有CSS连接到一个文件中).

您可以在这里阅读更多有关上述css实践的信息.

如果您真的担心代码重复(尽管在这种情况下不应该这样),您可以使用cookie来跟踪用户之前是否访问过该网站.如果用户之前没有,那么你可以内联上面的CSS.如果用户以前,您可以假设用户已经拥有完整的CSS文件,并且CSS文件将从浏览器缓存中提取.

有很多关于浏览器缓存不可靠的文章,所以我的建议是你只是做你正在做的事情来满足客户的要求.

应该提到的另一件事是,一旦HTTP/2变得更加普遍,这种做法将基本消失,因为随后的HTTP请求将不会像现在这样昂贵.考虑到这种做法需要的密集工具/工作量(特别是在针对HTTP/2的未来验证时),可能更好(我认为是)完全避免它.