译者：戴维迈
欢迎回到我们关于构建更快网页的系列。 本系列的第 1 部分和第 2 部分介绍了如何通过优化和替换图像来减少浏览器脂肪。 这一部分将着眼于减少 CSS（层叠样式表）和字体中的更多内容。
调整CSS
首先，我们来看看问题的根源。 CSS 的出现曾经是技术的重大进步。 您可以使用一个集中式样式表来装饰多个网页。 现在许多Web开发人员仍然使用Bootstrap等框架。
这种框架其实很方便，很多人会直接复制粘贴整个框架。 Bootstrap特别大：当前“最小”版本的Bootstrap 4.0也是144.9KB。 在这个数据以 TB 为单位的时代，可能并不多。 但正如我所说，一头小牛可能会带来大麻烦。
让我们回到 getfedora.org 的反例。 正如我们在第 1 部分中提到的，第一个分析结果显示 CSS 文件占用的空间几乎是 HTML 本身的十倍。 以下是所有使用的样式表的列表：
这是九个不同的样式表。 本页未使用许多样式。
删除、合并和压缩/缩小
Font-awesomeCSS 代表了包含未使用样式的极端。 本页仅使用了该字体的三个字形。 从KB来看，getfedora.org使用的font-awesomeCSS原来是25.2KB。 清理掉所有未使用的样式后，只有1.3KB。 这大约只是原始体积的4%！ 对于BootstrapCSS来说，原本是118.3KB，去掉无用的样式后，只有13.2KB，这就是区别。
接下来的问题是，我们需要这样的bootstrap.css和font-awesome.css吗？ 或者说，可以关闭它们吗？ 是的他们可以。 即使这不会节省更多文件空间，浏览器也需要发出更少的请求才能成功呈现页面。
最后，合并 CSS 文件后，尝试消除死样式并缩小它们。 这样css好看的字体，它们的大小只有 4.3KBcss好看的字体，您可以节省 10.1KB。
不幸的是，Fedora 存储库中没有打包的缩小工具。 但是，有数百种在线服务可以为您提供帮助。 或者，您可以使用 CSS-HTML-JSMinify，它是用 Python 编写的，因此很容易安装。 目前还没有可用的工具来清理 CSS，但我们有像 UnCSS 这样的 Web 服务。
字体改进
CSS3 带来了很多开发人员喜欢的东西。 它可以定义一些用于渲染页面的字体，并让浏览器在后台下载它们。 随后，许多网页设计师非常高兴，尤其是在他们发现图标字体在网页设计中的使用之后。 像 FontAwesome 这样的字体集如今非常流行并被广泛使用。 以下是该字体集的大小：
当前免费版本912字形/图标，最小setttf30.9KB，woff14.7KB，woff212.2KB，svg107.2KB，eot31.2
所以问题是，你需要所有的字形吗？ 很可能不会。 您可以使用 FontForge 来消除此类无用的字形，但这需要大量工作。 您也可以使用 Fontello。 您可以使用公共示例或配置您自己的版本，该版本可以在 Github 上获取，因为它是免费软件。
这些自定义字体集的缺点是您必须自己托管字体文件。 您也无法使用其他在线服务来提供更新。 但与更快的性能相比，这可能并不是一个缺点。
总结
现在，您已经完成了内容本身的所有工作，以最大限度地减少浏览器必须加载和解释的内容量。 从现在开始，只有服务器管理方法可以帮助您。
很多人做错的一件简单的事情就是使用一些智能缓存。 例如，CSS 或图像文件可以缓存一周。 但无论怎样，如果你使用像Cloudflare这样的代理服务或者自己设置代理，你首先应该做的就是让页面变小。 用户喜欢加载速度快的页面。 他们会（默默地）感谢你，服务器上的负载也会减少。
通过：
作者：SirkoKemter 主题：lujun9972 译者：StdioA 校对：wxy
本文由 LCTT 原创编译，Linux China Honor 首发
发表评论