1.4 优化客户网站
提高网站性能时，目标很简单：减少传输的数据量。这样做将减少站点在任何设备上加载的时间。这样做对HTTP/1和HTTP/2服务器上的用户都有好处。如果问有没有最重要的一条建议，那就是：传输更少的字节意味着更快的加载速度。
减少请求数是一种办法，下面介绍的一些性能提升技术也将鼓励你这样做。但请注意，这种方法最适合用于HTTP/1工作流。这个客户网站的请求已经比较轻量了，减少请求数并没有多大作用。
这些优化工作包括：首先要缩小网站资源，包括CSS、JavaScript和HTML本身；然后要在不损害其视觉完整性的前提下，优化网站上的图像；最后要在服务器上压缩文本资源。
想要跳过？
如果你在客户网站上工作时遇到任何问题（或者你很好奇这些内容是如何结合到一起的），可以使用git命令跳到最终的优化代码。在Web项目的根目录下，输入git checkout -f optimized，优化后的网站就会下载到你的计算机上。请注意，每次执行这个操作都会覆盖你在本地完成的所有工作，所以一定要记得先备份！
1.4.1 缩小资源
缩小（minification）是从基于文本的资源中去除所有空白和非必要字符的过程，因而不会影响资源的工作方式。图1-9阐明了对CSS应用缩小的基本思想。
图1-9 缩小CSS规则。在这个例子中，CSS规则从98字节缩小到77字节，减少了约21%。当这个概念应用到一个网站上的所有文本资源时，减少的总字节数可能为几千字节
许多人类可读的文件，比如CSS和JavaScript，都包含了开发者在开发过程中插入的空白和非必要字符。我们在CSS和JavaScript中使用换行符和缩进，使它们更容易阅读，并在源代码中使用注释进行文档记录。
Web浏览器读取这些文件时不需要这样的帮助。这些文件中不必要的字符越少，Web浏览器下载和解析它们的速度就越快。
提示 缩小文件时，必须保留原始的未缩小的源文件。缩小文件后，你很有可能必须再次编辑Web项目中的文件。第12章将提供这方面的一些信息。
本节首先要缩小网站的CSS，然后是JavaScript，最后是HTML。在继续之前，先要使用npm下载几个包，以便在命令行中缩小文件：
npm install -g minifier html-minify
安装过程可能需要一分钟左右。软件包安装完成后，即可缩小网站资源。完成本节后，网站总大小可以减小173KB。
1．缩小网站的CSS
该网站的CSS大小是18.2KB，缩小后可以稍微减少页面的总数据量。要缩小网站的CSS需要做两件事：运行缩小程序，然后更新HTML，指向缩小的新文件。在命令行中打开网站的CSS目录，然后运行这条命令来缩小CSS：
minify -o styles.min.css styles.css
这条命令的语法很简单。它用-o参数指定输出文件（style.min.css）。这个参数之后是指定的输入文件名（style.css）。命令执行完成后，检查输出文件的大小，你会发现文件大小为15.6KB，缩小了14%。缩小的量不算大，但这是个很好的开始。然后在index.html中更新这个文件的引用，方法是将<link>标签的引用从styles.css更改为styles.min.css，如下所示：
<link rel="stylesheet" type="text/css" href="css/styles.min.css">
接下来在Web浏览器中重新加载客户网站，确保网站的样式依然有效。可以通过检查更新的瀑布图，以及寻找对styles.min.css的引用，来验证缩小的样式是否到位。现在，客户网站的CSS已经成功缩小了！
2．缩小网站的JavaScript
该网站的JavaScript比CSS占据了更大的数据份额。该网站使用了两个JavaScript文件：jquery.js（jQuery库）和behaviors.js（网站的行为处理，依赖于jQuery）。它们的大小分别是252.6KB和3.1KB。要缩小这些文件，可以像对网站CSS执行的操作一样，对其运行minify命令：
minify -o jquery.min.js jquery.js
minify -o behaviors.min.js behaviors.js
.js文件缩小后，检查输出文件的大小，并与未缩小的版本进行比较。你将看到behaviors.js减少了46%，只剩1.66KB; jquery.js减少了66%，只剩84.4KB。这是个巨大的改进，大大减小了网站的总大小（本节末尾将对其进行计算和比较）。
你需要在index.html中更新对jquery.js和behaviors.js的引用，修改为jquery.min.js和behaviors.min.js。找到引用这些文件的<script>标签，并将其更改为以下内容：
<script src="js/jquery.min.js"></script>
<script src="js/behaviors.min.js"></script>
然后重新加载页面，并检查Network选项卡，以查看缩小的文件是否被引用。确认无误后，你就可以缩小最后一个资源，即网站的HTML。
3．缩小网站的HTML
网站的HTML是另一种可以缩小的资源，尽管缩小它没有缩小网站的JavaScript节省的数据量多。这一次，使用htmlminify Node包代替minify（后者用于CSS和JavaScript文件）。
缩小HTML的意外后果
缩小HTML通常不会遇到任何障碍，但你会注意到，布局可能发生了细微的变化。这是由于空白对CSS display类型（如inline和inline-block）的影响。如果对HTML进行缩进，这些CSS display类型在周围的空格被删除后，可能会产生一些不同的行为。如果影响很大，可能需要对CSS进行一些调整。还要注意所有按字面处理空白的属性或标签，例如CSS white-space属性或者HTML <pre>标签。
缩小网站的HTML之前，需要将网站根文件夹中的index.html复制到一个名为index.src.html的单独的源文件中，以便保留原始文件并进行更改。复制完成后，可以使用htmlminify将其缩小，如下所示：
htmlminify -o index.html index.src.html
缩小后的文件比原来小19%，从4.57KB变为3.71KB。虽然减小得不多，但确实腾出了很多空间，而且没有费太多功夫。
随着网站资源的缩小，你已经为网站精简了173KB。由于网页在所有类型的设备上工作都需要这些资源，因此对于任何设备的用户来说，性能都得到了提升。图1-10比较了表1-1中所有设备类型在文件缩小前后的加载时间。
图1-10 在Regular 3G网络节流配置中，客户网站在文件缩小前后的加载时间。根据访客设备的不同，优化范围为31%～41%
通过适当的努力，你可以将加载时间减少31%～41%！虽然进步不小，但下面还会取得更大的进步。下一节将通过名为服务器压缩的服务器端机制，进一步提高文本资源的收益率。
1.4.2 使用服务器压缩
你一定收到过包含压缩文件的电子邮件。这些文件通常用于在线通信，是将多个文件打包为单个文件的简便方法。压缩文件除了方便合并外，还可以减小文件体积。服务器压缩在减小文件体积方面的工作原理与之类似，Web浏览器能够代表用户接受和解压缩内容，如图1-11所示。
图1-11 服务器压缩的过程
服务器压缩的工作方式是用户从服务器请求网页。用户的请求附带一个Accept-Encoding头部信息，向服务器告知浏览器可以使用的压缩格式。如果服务器能够按照Accept-Encoding头中的指示对内容进行编码，它将用一个描述压缩方法和压缩内容的Content-Encoding头部信息进行回复。
这非常实用，因为从网站下载的大部分内容往往是文本，可压缩性很好。几乎所有通用的浏览器都支持一种名为gzip的压缩方法，它在减小文本资源的体积方面非常有效。在优化客户端网站的这一步中，你需要配置服务器以提供压缩内容。通过这些努力，页面大小将减少70KB，加载速度将提高18%～32%（具体取决于访问者的设备）。但是，执行此操作之前，请转到命令行并按Ctrl+C停止Web服务器。然后键入如下命令以安装compression模块：
npm install compression
安装完成后，在文本编辑器中打开http.js，并添加代码清单1-1中的粗体文本行。
代码清单1-1 配置Node HTTP服务器以使用compression
完成上述修改后，重启Web服务器。重新加载页面并查看瀑布图，以查看结果。表1-2比较了压缩前后的文本资源。
表1-2 比较应用服务器压缩前后客户网站上文本资源
文件的体积显著减小：压缩前，所有文本资源的大小合计为106.5KB；压缩后，体积大约减小66%，低至36KB！那么这对加载时间有什么影响呢？答案是影响不小。图1-12比较了不同设备的加载时间。
图1-12 应用压缩前后，客户网站在Regular 3G节流配置下的加载时间。根据访问者的设备不同，加载速度提高18%～32%
这个简单的操作显著提高了网站的加载速度。需要注意的是，不同的Web服务器需要不同的操作来配置资源压缩。代码清单1-2显示了如何在Apache Web服务器的httpd.conf配置文件中，为常见的资源媒体类型启用压缩。
代码清单1-2 在Apache Web服务器上启用服务器压缩
在微软的Internet信息服务（IIS）中，可以通过inetmgr可执行文件进入管理面板，转到特定网站，并通过实用工具的GUI编辑压缩设置来配置压缩。无论使用哪种Web服务器，压缩带来的好处基本都一样。某些服务器的可配置项可能更丰富，也可能更少。
应用压缩并在客户网站上工作后，可以继续进行此优化计划的最后一部分：优化图像。
压缩小技巧
你试过压缩JPEG或MP3文件吗？这不仅不会缩小体积，而且最终的压缩文件可能会更大。这是因为这些类型的文件在编码时已经被压缩了。其压缩方式和Web上的内容没什么不同。要注意避免压缩那些已经在编码时使用压缩的文件类型，例如JPEG、PNG和GIF图像，以及WOFF和WOFF2字体文件。
1.4.3 压缩图像
自从Photoshop的Save for Web（存储为Web格式）对话框问世以来，图像优化发展已久。如今的图像优化方法在减小全色图像的文件大小方面非常高效，最终结果通常与源图像难以分辨。然而，缩小文件是非常重要的。图1-13比较了优化前后的两个图像。
图1-13 PNG图像优化。这种图像优化方式使用了一种重新编码技术，该技术可以丢弃图像中不必要的数据，而不会明显影响图像的视觉质量
如果你看不出这两张图像之间的区别，那这种方法的使用目的就达到了。这种类型的优化背后的理念是尽可能保留源图像的视觉质量，同时丢弃不必要的数据。
这并不是说这种优化不会导致不合预期的结果。过度优化会导致明显的质量损失。第6章不仅会探讨PNG文件的图像优化，而且还会探讨JPEG和SVG图像的优化。经验法则是将任何优化的结果与原始图像进行比较，并确保你对结果满意。
有许多服务可以压缩图像，包括第6章和第12章介绍的一些命令行和自动化工具。为了简单起见，你可以使用名为TinyPNG的Web服务，如图1-14所示。
图1-14 TinyPNG压缩客户网站的图像，并报告成功将总大小减小61%
尽管名字中带有PNG，但这个网站不仅能压缩PNG图像，而且还能压缩JPEG图像。根据访问者的设备不同，桌面端视图中显示4个图像，而移动端视图中仅显示3个图像。这些图像的大小取决于查看它们的屏幕类型。高DPI屏幕（如苹果设备上的视网膜屏幕）需要更大的图像集来提供最佳的视觉体验，而标准DPI屏幕可以使用更小的图像集。第5章将介绍这些屏幕之间的差异，以及基于设备功能的服务方式。此刻，我们的目标是获取img文件夹中的所有图像，使用TinyPNG服务对其进行优化，并观察获得的效果。
要压缩这些图像，请将它们上传到TinyPNG网站，该网站将自动进行优化。完成后，下载所有文件，并将其复制到网站的img文件夹。出现提示时，为所有冲突选择Overwrite（覆盖）选项。然后重新加载页面，在Chrome的开发者工具中再次检查瀑布图，以查看这些较小的图像所产生的差异。表1-3列出了优化前后的网站图像。
表1-3 使用TinyPNG Web服务优化前后的图像大小
表面看来，所有图像都在不同程度上受益于这种优化，当然，某些图像受益更多一些。但真正的问题是，这将如何影响页面加载时间？图1-15比较了这次图像优化工作前后的加载时间。
图1-15 优化图像前后，客户网站在Regular 3G节流配置下的加载时间。根据访问者的设备不同，加载速度提高23%～53%
优化图像对加载时间有显著影响。所有设备的加载时间都已减少到2秒以下，这是非常重要的，尤其是对于3G网络环境！完成优化工作后，下面看看总体的工作成果。