Stoyan 是 绝对正确的。 尽管我们都喜欢 CSS,但它仍然是网站加载方式中的重要因素,减少其使用量是一件好事。 他有一个名为 CSS Me Not 的简洁的新书签,可以帮助诊断不必要的 CSS 文件,但我们稍后再讨论这一点。
问题在于 CSS 位于关键路径上,它会阻止渲染,甚至经常阻止 JavaScript 执行。 我们热爱 CSS,它很神奇,它可以完成难以置信的壮举,修复损坏的 UI,并 操作图像,以及 绘制惊人的图片。 我们热爱 CSS。 我们只是想要…… 减少它的使用,因为它的本质是阻塞的。
有时我们的网站使用整个样式表,而这些样式表根本没有必要。 我不情愿地承认,WordPress 在这里是一个臭名昭著的罪魁祸首,它会加载插件和块的样式表,而您可能根本没有使用这些插件和块。 我在撰写本文时就遇到了这种情况。 我只是没有时间剔除几个不需要加载的小样式表。
Stoyan 创建了一个名为 CSS Me Not 的快速书签 来查看所有这些 CSS 文件。 当然,最大的好处是它可以让你知道你面临的是什么。
您也可以在 DevTools 中找到这些样式表,但 CSS Me Not 书签使它变得格外容易,并且还有一个杀手级的额外功能:关闭这些样式表。 在 CSS-Tricks 上测试此书签,我可以看到 WordPress 加载了四个样式表(因为设置和插件),我知道我并不需要它们。

如果您想在 DevTools 中执行此操作,则可以按 CSS 过滤网络请求,找到要关闭的样式表,右键单击并阻止它,然后重新加载。

我一直 在进行这场斗争,在 WordPress 中取消排队我不想要的脚本和样式。
删除完全未使用的样式表是一个明显的胜利,但还有一个更棘手的问题,即删除 未使用的 CSS。 在那篇文章中,我提到了真正了解任何特定 CSS 是否未使用的唯一方法,即为每个选择器附加一个background-image
,然后在一段时间的生产时间后检查服务器日志,以查看哪些图像从未被请求过。 Stoyan 在这里证实了我的说法。
UnCSS 是一种“实验室”。 “现实世界”可能会让你感到惊讶。 因此,我们在 SomeCompany Inc. 做的一个技巧是在构建时为所有 CSS 声明添加工具,其中每个选择器都获得一个 1×1 的透明背景图像。 然后在一周左右后仔细检查服务器日志,以查看实际使用了哪些内容。
是的。 无论您是否使用它们,您都会下载所有块样式 CSS。 woo-commerce? 它们也是如此。“酷的 Gutenberg 块”? 不行。
有人在某个地方建议,使用 HTTP2,您不妨在引入每个“组件”时包含 CSS 和 JS。 如果重复,则浏览器本地缓存查找将显示“我们已经获取了此内容”。
嗯哼——是的,在 WP 中很糟糕
或者在 Firefox 中,它位于传统菜单中:查看 → 页面样式 → 无样式。
如果您想知道该子菜单中的另一个选项“基本页面样式”的原因,那是因为浏览器在
@prefers-color-scheme
成为一项功能很久很久以前就支持网站的多个主题了。 它被称为 备用样式表。 几乎没有人真正使用它,因此 Chrome 从未费心实现它,不确定 Safari 目前是否支持它,因此我怀疑 Firefox 可能是现在唯一支持它的浏览器。 演示地址 https://www.w3.org/Style/Examples/007/alternatives.en.html。我觉得我在进行一场不同的战争,但这可能只是同一场战争。
我认为 CSS 是一个重要的构建块,但 JavaScript 是一种邪恶,通常是不必要的。
我完全理解不需要过多的 CSS,但总的来说,它确实完成了重要的工作,而我们使用的一半 JS 用于整个库(其中只有一小部分被使用)甚至只是为了跟踪我们的使用情况。
是什么损害了网站的性能,CSS 还是 Javascript? 更少的 javascript 比更少的 CSS 好得多。 我们使用使 CSS 文件总重量翻倍或三倍的 javascript 框架。 事实上,我们有时倾向于使用我们实际上并不需要使用的 javascript 框架。 因此,我认为没有理由专门关注 CSS。
我同意 JS 是更大的目标,但它确实很重要。 CSS 可以阻止 JavaScript 甚至开始运行。 这很重要。