1.3 检查客户网站

要优化一个网站，你必须能够确定可改进的领域。这意味着需要分析页面上的请求数、页面包含的数据量以及页面加载所需的时间。此时，Chrome网络工具就派上用场了。本节将学习如何使用这些工具创建瀑布图，以及如何量化客户网站的各个方面，从而确定优化的起点。

Chrome的网络工具位于Network选项卡下，和网络节流配置处于同一位置。要分析一个网站，首先要确保Record按钮处于开启状态，如图1-7所示。

图1-7　生成资源瀑布图之前，必须确保Record按钮处于开启状态（红色）。此外还应选中Disable cache复选框，以确保重新加载页面以衡量优化效果时不会进行缓存

在Network选项卡中，首先要确保选中Disable cache复选框。首次访问一个网站时，不会有任何资源缓存——这个场景才是你想要重现的，否则网站的资源将从缓存中提供。尽管有缓存时网站加载速度更快，但最好假设普通用户未曾缓存过你的网站资源。对于这样的未知站点，此类情况发生的概率更大。

在Network选项卡中，要确保左上角的Record按钮处于开启状态（见图1-7）。按钮为红色代表已启用。如果还没有打开客户网站http://localhost:8080，那么转到在你的计算机上运行的客户网站以生成瀑布图（如果你已经打开客户网站，请刷新）。页面加载完成后，即可看到结果。图1-8显示了客户网站的瀑布图。

图1-8　为客户网站生成的瀑布图。在顶端可以看到对index.html的请求，其次是网站的CSS、JavaScript和图像。每个条形代表对一个网站资源的请求。这些条形位于x轴，最左端对应开始请求的时间点，最右端对应完成下载的时间。条形的长短与Web浏览器请求和下载资源所需的时间长短相对应

为客户网站生成的瀑布图中显示了8个请求。虽然这个数字不是很吓人，但是536KB的总数据量对于这样的小站点来说算是很大了。这些数据量使得在Regular 3G的节流配置下，网站大约要6.15秒后才能全部加载完毕，这意味着该网站在较慢的移动网络上的加载时间将比一部分用户预期的时间长得多。

由于这是一个响应式网站，因此我们要知道设备之间的加载时间是有区别的。通过被称为媒体查询（media query）的机制（网站CSS的一部分），响应式网站能够在不同屏幕宽度上显示不同内容。

第3章会更加详尽地介绍这些内容。但你需要记住，这个网站在三类设备（台式计算机、平板计算机和手机）上会呈现不同的效果。

此外，这些设备的屏幕不仅大小不同，而且显示密度（屏幕上每英寸的像素数）等功能参数也不同。例如，如果你用过苹果公司的产品，就见过高DPI（dots per inch，每英寸点数）显示器的效果。要保持这些屏幕下的高视觉质量，需要提供比标准DPI显示器分辨率更高的图像集。有关这些屏幕类型和提供特定图像的方法的更多信息，请参阅第5章。

如果你现在还不理解关于CSS媒体查询和屏幕大小的所有讨论，别担心，我们关注的重点是，客户网站的加载时间不仅因网络连接质量而不同，而且还因设备本身的特性而不同。根据所访问的站点，显示密度较高的设备下载的数据可能比具有标准显示密度的设备多。表1-1根据设备类型和显示密度，列出了传输的数据量和网站加载时间。

表1-1　不同设备的页面加载时间比较。结果因数据量和设备的显示密度而异

当你继续对客户网站进行性能优化时，需要记录每个场景的加载时间和减少的数据量，因为它和你选择的Regular 3G节流配置有关。下面进入正题吧！