使用 CSS Me Not 书签查看(并禁用)CSS 文件

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

Stoyan 是 绝对正确的。 尽管我们都喜欢 CSS,但它仍然是网站加载方式中的重要因素,减少其使用量是一件好事。 他有一个名为 CSS Me Not 的简洁的新书签,可以帮助诊断不必要的 CSS 文件,但我们稍后再讨论这一点。

问题在于 CSS 位于关键路径上,它会阻止渲染,甚至经常阻止 JavaScript 执行。 我们热爱 CSS,它很神奇,它可以完成难以置信的壮举,修复损坏的 UI,并 操作图像,以及 绘制惊人的图片。 我们热爱 CSS。 我们只是想要…… 减少它的使用,因为它的本质是阻塞的。

有时我们的网站使用整个样式表,而这些样式表根本没有必要。 我不情愿地承认,WordPress 在这里是一个臭名昭著的罪魁祸首,它会加载插件和块的样式表,而您可能根本没有使用这些插件和块。 我在撰写本文时就遇到了这种情况。 我只是没有时间剔除几个不需要加载的小样式表。

Stoyan 创建了一个名为 CSS Me Not 的快速书签 来查看所有这些 CSS 文件。 当然,最大的好处是它可以让你知道你面临的是什么。

您也可以在 DevTools 中找到这些样式表,但 CSS Me Not 书签使它变得格外容易,并且还有一个杀手级的额外功能:关闭这些样式表。 在 CSS-Tricks 上测试此书签,我可以看到 WordPress 加载了四个样式表(因为设置和插件),我知道我并不需要它们。

Screenshot of a Chrome browser window showing the CSS Me Not bookmarklet circled in red just below the address bar, Below that is a table injected above the CSS-Tricks website showing six stylesheets including an action to disable a sheet, the sheet's media, the sheet's host, and the sheet's name.

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

DevTools window screenshot with the Network panel open and the select menu open on a listed stylsheet with the option to block the request URL highlighted in bright blue.

我一直 在进行这场斗争,在 WordPress 中取消排队我不想要的脚本和样式。

删除完全未使用的样式表是一个明显的胜利,但还有一个更棘手的问题,即删除 未使用的 CSS。 在那篇文章中,我提到了真正了解任何特定 CSS 是否未使用的唯一方法,即为每个选择器附加一个background-image,然后在一段时间的生产时间后检查服务器日志,以查看哪些图像从未被请求过。 Stoyan 在这里证实了我的说法。

UnCSS 是一种“实验室”。 “现实世界”可能会让你感到惊讶。 因此,我们在 SomeCompany Inc. 做的一个技巧是在构建时为所有 CSS 声明添加工具,其中每个选择器都获得一个 1×1 的透明背景图像。 然后在一周左右后仔细检查服务器日志,以查看实际使用了哪些内容。