欢迎回到这个关于设计更快网页的系列文章。 本系列的第 1 部分和第 2 部分介绍了如何通过优化和替换图像来减掉浏览器的脂肪。 这部分着眼于如何在 CSS 中减掉额外的脂肪（层叠样式表) 和字体。
调整 CSS
首先要做的事情是：让我们看看问题出在哪里。 CSS曾经是一个巨大的进步。 您可以使用它来设置中央样式表中的多个页面的样式。 如今，许多 Web 开发人员使用 Bootstrap 等框架。
虽然这些框架确实很有帮助，但许多人只是简单地复制和粘贴整个框架。 引导程序很大； 4.0 的“最小”版本目前为 144.9 KB。 也许在 TB 级数据的时代，这并不算多。 但正如他们所说，即使是小牛也会弄得一团糟。
回头看看 getfedora.org example. 回想一下第 1 部分，第一次分析显示 CSS 文件使用的空间几乎是 HTML 本身的十倍。 这是使用的样式表的显示：
那是九个不同的样式表。 其中的许多样式在页面上也未使用。
删除、合并和压缩/缩小
font-awesome CSS 位于包含的、未使用的样式的最末端。 页面上使用的字体只有三个字形。 为了在 KB 中弥补这一点，getfedora.org 使用的 font-awesome CSS 最初是 25.2 KB。 清除所有未使用的样式后，它只有 1.3 KB。 这只是其原始大小的 4% 左右！ 对于 Bootstrap CSS，差异是 118.3 KB 原始和 13.2 KB 删除未使用的样式后。
下一个问题是，一定要有 bootstrap.css 和 font-awesome.css 吗？ 或者它们可以结合起来吗？ 是的他们可以。 这并没有节省太多文件空间，但是浏览器现在请求更少的文件来成功呈现页面。
最后，合并 CSS 文件后，尝试删除未使用的样式并缩小它们。 这样，您节省了 10.1 KB，最终大小为 4.3 KB。
不幸的是，Fedoras 存储库中还没有打包的“缩小器”工具。 但是，有数百种在线服务可以为您做到这一点。 或者你可以使用 CSS-HTML-JS 缩小，它是 Python，因此很容易安装。 没有可用的工具来净化 CSS，但是有一些网络服务，比如 非CSS.
字体改进
CSS3 附带了很多 Web 开发人员喜欢的东西。 他们可以定义浏览器在后台下载的字体来呈现页面。 从那时起，很多网页设计师都非常高兴，尤其是在他们发现图标字体用于网页设计之后。 字体集如 字体真棒 在今天很流行并被广泛使用。 这是该内容的大小：
current free version 912 glyphs/icons, smallest set ttf 30.9KB, woff 14.7KB, woff2 12.2KB, svg 107.2KB, eot 31.2
所以问题是，你需要所有的字形吗？ 在所有 概率，没有. 你可以用 字体锻造，但这是很多工作。 你也可以使用 丰泰洛. 使用公共实例，或设置您自己的实例，因为它是免费软件，可在 Github.
这种自定义字体集的缺点是您必须自己托管字体。 您不能使用其他在线字体服务来提供更新。 但与更快的性能相比，这可能并不是真正的缺点。
结论
现在您已经对内容本身做了所有可以做的事情，以尽量减少浏览器加载和解释的内容。 从现在开始，只有管理服务器的技巧才能有所帮助。
一个容易做但很多人做错的事情是决定一些智能缓存。 例如，一个 CSS 或图片文件可以缓存一周。 无论您做什么，如果您使用 Cloudflare 之类的代理服务或构建自己的代理，请先最小化页面。 用户喜欢快速加载页面。 他们会（默默地）感谢你，服务器的负载也会更小。
