作者：拉腊·卡兰德·霍根（Lara Callender Hogan）
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
速度与激情：以网站性能提升用户体验试读：
前言
如果你在针对网站的外观和感觉做决策，那么你的决策会直接影响网站的性能，即使你的职位名称并不包含设计师这样的字眼。性能可以并且也应该是所有部门和人员的职责，因为组织中的每个人都会影响性能。无论是说服高层管理者应该将性能作为工作重点，还是在日常工作中权衡网站的视觉美感和页面速度，抑或是培训和培养组织内其他的设计师和开发者，你都有一整套可用的工具和技术来帮助你提升网站速度。
设计师是一个很特殊的角色，他们会影响总的页面加载时间和感知性能。设计过程中做出的决策会对网站的性能产生巨大影响。我认为，对于设计师来说，了解关于页面速度的基础知识以及优化页面标记和图片的各种方法是非常重要的。此外，设计师必须平衡好页面美感和页面速度以提升终端用户体验，同时任何对网站进行改动的人都应能够度量这些改动对业务指标的影响。
过去几年，我做过很多有关前端性能的演讲，也举办过研讨会。在和听众的谈话中我意识到，性能这个主题的核心是组织文化的改变。没有人愿意做性能“卫士”或者“看门人”，这样的角色并不能成功地影响网站长期的性能改进，因为有很多其他人负责网站的用户体验。尽管本书大部分章节的关注点都是性能改进的技术和方法，但最后一章则专门讨论性能是一个无法通过技术解决的文化问题。改变组织文化也许是提升网站性能中最难的一部分。
由于我是 Etsy 公司的工程经理，本书会经常提到 Etsy 及其工程团队的实验。我当前管理着性能工程团队，之前管理过移动 Web 工程团队。在整个职业生涯中（包括在 Etsy），我同很多出色的设计师密切合作过，能专门为他们写这样一本书我非常高兴。本书结构
本书介绍了各种在线工具和软件，它们能帮助你提升网站性能。在介绍图片生成的章节中，我们在例子中使用 Photoshop 而不是其他图片编辑软件。
第 1 章讨论了页面加载时间对网站、品牌和整体用户体验的影响。页面加载时间是构成用户体验的诸多因素之一，而且研究表明，性能低下会对网站的用户参与度产生负面影响。随着越来越多的人使用移动设备接入互联网，性能的优先级也会提升，因为移动网络和硬件会对页面加载时间产生负面影响。设计师是一个很特殊的角色，他们能提升页面加载速度，进而提升用户体验。
第 2 章介绍了页面加载时间的基础知识。对浏览器如何获取和渲染网站内容有基本的了解，这一点非常重要，因为这些是你用来改进网站性能的主要工具。这一章还介绍了感知性能及其与总的页面加载时间的区别；用户使用网站的体验，及用网站完成一个任务的感知速度，是重要的度量指标。
第 3 章介绍了如今 Web 上使用的每一种主要的图片格式。这一章涵盖了使用和优化每一种文件类型的最佳实践。此外，还介绍了如何优化将图片加载进网页的方式，比如使用精灵图，或用 CSS 或 SVG 替换图片。最后，讨论了如何延长经过优化的图片解决方案的使用寿命，包括创建样式指南和 自动化图片压缩工作流程。
第 4 章探讨了如何优化网站中的 HTML 标记和样式。简化 HTML 和 CSS 都非常重要，其次要优化网站中使用的网络字体。努力创建整洁、可复用的标记，同时记录任何设计模式，这会节省开发时间和未来的页面加载时间，因为网站经过了编辑和优化。这一章还强调了加载顺序、压缩和缓存网站文本资源的重要性。
响应式 Web 设计被认为“对性能不利”，但事实并不一定如此。第 5 章分析了在各种尺寸的屏幕上谨慎为用户加载内容的重要性，包括图片和字体。还讨论了如何进行响应式 Web 设计：创建性能目标，在设计中采用移动优先原则，度量不同屏幕尺寸上的响应式设计的性能。
为了了解网站用户体验的现状及其随时间的变化，有必要对主要性能指标做例行检查。第 6 章详细介绍了各种浏览器插件、综合测试和真实用户监控工具，以及它们为何有助于度量网站性能。在网站演进的过程中，不断地使用这些工具来度量性能的变化并记录这些变化发生的原因，这有助于你和其他人了解是什么影响了网站的性能。
第 7 章探讨了在权衡美感和性能时会遇到的挑战。在作出这些艰难的决策时，要考虑运作成本，度量用户行为，以及提出很多开放式问题。然而，只要具备了性能相关的知识和合理的工作流程，并运行了试验，你就可以做出有利于整体用户体验的设计和开发决策。
创建和维护一流网站性能的最大障碍是组织文化。对于各种类型和规模的组织来说，培训、激励以及放权给设计师、开发者和管理人员都是一项挑战。 第 8 章分析了如何打造组织的性能文化，以及如何培养性能捍卫者。®Safari Books Online
Safari Books Online（http://www.safaribooksonline.com）是应运而生的数字图书馆。它同时以图书和视频的形式出版世界顶级技术和商务作家的专业作品。技术专家、软件开发人员、Web 设计师、商务人士和创意专家等，在开展调研、解决问题、学习和认证培训时，都将 Safari Books Online 视作获取资料的首选渠道。
对于组织团体、政府机构和个人，Safari Books Online 提供各种产品组合和灵活的定价策略。用户可通过一个功能完备的数据库检索系统访问 O'Reilly Media、Prentice Hall Professional、Addison-Wesley Professional、Microsoft Press、Sams、Que、Peachpit Press、Focal Press、Cisco Press、John Wiley & Sons、Syngress、Morgan Kaufmann、IBM Redbooks、Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、Jones & Bartlett、Course Technology 以及其他几十家出版社的上千种图书、培训视频和正式出版之前的书稿。要了解 Safari Books Online 的更多信息，我们网上见。致谢
我要感谢 Etsy 的每个人，感谢他们对本书的支持，尤其是移动 Web 团队的队友（Jeremy、Amy、Chris 和 Mike）和性能团队的队友（Allison、Jonathan、Natalya、Dan、Seth、Daniel 和 John）。还要感谢 Courtney Nash，如果没有她的想法和鼓励，就不会有这本书。
十分感谢 O'Reilly 团队。感谢 Mary Treseler、Angela Rufino 和 Allyson MacDonald 所做的编辑工作，感谢 Betsy Waliszewski、Sonia Zapien、Sophia DeMartini 和 Audra Montenegro 所做的会议工作。因为你们，本书的出版过程是一次奇妙的感受。
在本书的整个写作过程中，以下审阅人做了非常重要的审阅工作：Jason Huff、Jonathan Klein、Brad Frost、Jason Grigsby、Christian Crumlish、Ilya Grigorik、Barbara Bermes、Guy Podjarny、Kim Bost 和 Andy Davies。感谢 Mat Marquis 的批注和耐心，以及贡献了有关响应式图片的知识。
感谢 Masha 的真诚、鼓励和建议。特别要感谢我的父母允许我攻读哲学学位，这为我提供了写作所需的工具。在我的整个职业生涯中，他们的支持都至关重要，作为他们的孩子我感到非常骄傲。最后，感谢第七大道的甜甜圈店，让我得以用甜甜圈来庆祝写作取得的进展。 第1章性能即用户体验
想象一下你是如何在网络上搜索内容的。如果一个网站的加载时间过长，你一定很快关闭页面，然后点开搜索引擎中的下一个搜索结果。当你想要搜索当地的天气或新闻时，如果一个网站需要等待很久才能将相关信息显示在屏幕上，你还会再次访问这个网站吗？如果你在外出办事，掏出手机来想要查收电子邮件、对比商品价格或是查询导航，怎么可能会有耐心忍受长时间的加载呢？你的时间越紧迫，对网站快速加载的期望就会越高。
页面速度对于网站的重要性日益增加。如果你想为你的网站找一个页面加载速度的衡量标准，可以使用下面这个原则：用户期望页面能在 2 秒内加载完成，当时间超过 3 秒，多达 40% 的用户就会放弃使用这个网站（http://dwz.cn/28OYQf）。此外，85% 的移动用户希望网站的加载速度至少和桌面 版一样快，甚至更快（http://dwz.cn/28OZca）。当你在设计或建设一个网站，或者考察一个已经存在的网站时，如何来满足这些用户期望呢？
Web 性能就是用户体验。当你在设计和开发一个新网站时，会综合考虑很多和用户体验相关的内容：页面布局、层级关系、直观性、易用性等。网站的用户体验决定了用户的品牌忠诚度、回访率以及是否会把你的网站分享给其他人。页面加载时间以及网站的体验速度是用户体验中非常重要的部分，应该和网站的视觉美观程度受到同等重视。
我们来看一些相关的研究和数据，它们说明了性能如何影响终端用户的体验。1.1 对品牌的影响
整体的用户体验会影响用户对品牌的印象。Akamai 的报告指出，如果网络购物者在网购过程中经历了诸如页面卡顿、崩溃、加载时间过长或结账流程过于复杂等问题，75% 的用户不会从该网站购买东西（http://www.akamai.com/dl/reports/Site_Abandonment_Final_Report.pdf）。Gomez 研究了网络购物者的行为（http://www.mcrinc.com/Documents/Newsletters/201110_why_web_performance_matters.pdf）后发现，88% 的网络消费者在有了一次糟糕的体验后不太可能会再次访问该网站。同一项研究还发现，“在流量高峰时段，超过 75% 的网络消费者会转到竞争对手的网站，而不是会忍受当前网站的延迟”。在页面加载时间以及网站用户体验的其他竞争方面，你是否正在流失用户，将他们推向竞争对手那里？你确定你的网站比竞争对手的更快吗？1.1.1 回访用户
Web 性能不只会影响电子商务网站，任何类型的网站都能从页面速度的优化中受益。用户会回访速度更快的网站，Google 的一项研究（http://googleresearch.blogspot.com/2009/06/speed-matters.html）为此提供了证据。该研究发现，如果网站的访问速度下降，用户用该网站进行搜索的行为也会减少。实验发现，速度下降 400 毫秒会使用户对该网站的搜索行为在前三周减少 0.44%，而在接下来的三周则会减少 0.76%。
研究还发现，在实验中即使网站延迟已经被移除并恢复到了之前的水平，用户的搜索使用水平也要过一段时间才能恢复。页面加载速度的影响甚至已经超越了最初的糟糕体验，用户会本能地记住之前访问这个网站时的感觉，并根据使用体验来决定重复使用这个网站的频率。1.1.2 搜索引擎排名
页面加载速度也是搜索引擎排序的依据之一，速度快的网站在搜索结果列表中位置更靠前。Google 在它的搜索结果排序算法中考虑了网站的速度（http://dwz.cn/28PnVx）。尽管 Google 明确说明页面内容在搜索结果排序中的权重会更高，但是网站速度仍然影响着网站整体的用户体验。Google 希望返回给用户的搜索结果中的网站在整体上能够提供最佳的使用体验。
忽视网站的页面加载速度不仅仅是错过了一个机会，同时也不利于用户记住你的品牌。微软进行了一项研究（http://research.microsoft.com/pubs/79628/tois08.pdf）来考察用户对搜索结果的记忆情况。参与者在搜索框中输入一个自创的搜索关键字，半小时之后会通过邮件收到一份调查，要求他们在不重新搜索的前提下回忆刚才的搜索结果。研究结果显示，有两大因素影响搜索结果的记忆情况，其中之一是在搜索结果列表中的位序。提升页面加载速度能够提高网站的搜索结果排名，这对品牌来说是非常有帮助的。
品牌和数字产品设计师 Naomi Atkinson 精辟地阐述了设计机构如何通过强调性能的重要性来同客户谈判：“很多设计机构会忽视一个重要的卖点。除了市场营销和视觉设计的计划外，强调计划（以及如何）将客户的网站或服务变得多么快，将会产生非常好的效果。无论是为自己还是为客户都将带来好处。”性能是整体用户体验的组成部分，能够对公司品牌产生重大影响。1.2 对移动用户的影响
随着越来越多的用户开始使用移动设备，以及越来越多的工作通过在线的方式完成，网站整体用户体验的重要性也愈发凸显。StatCounter Global Stats 的一份数据（http://gs.statcounter.com/）显示，移动设备的流量在互联网总流量中的比例正在稳步递增（图 1-1）。图 1-1：从 StatCounter Global Stats 的这份数据中可以发现，互联网流量中移动流量的比例正稳步上升。根据这个趋势，移动设备流量的增长在短期内并不会放缓
很多公司已经注意到移动设备流量的快速增长。Mary Meeker 的互联网趋势报告（http://slidesha.re/1ttKWvZ）显示，2013 年早期 Groupon 的交易有 45% 来自移动设备，而两年前还不足 15%。在 Etsy 公司（我负责性能工程团队），2014 年年初的流量有 50% 来自移动设备。
几乎所有网站的移动流量都在增长，这将会突出网络上页面加载时间的问题，特别是对手持设备用户来说。一项研究（http://slidesha.re/eW8wQ9）显示，对于全球大量的互联网用户来说，手持设备是主要的互联网接入方式。接近 50% 的非洲和亚洲互联网用户只使用移动设备，对比之下美国只有 25%。这项研究将那些从不或很少使用“桌面”互联网的用户归类为“只使用移动设备”（这项研究将平板电脑归类为“桌面”设备）。总而言之，大量用户主要使用手持设备来访问互联网，而在这些设备上都有其独特的一系列挑战。1.2.1 移动网络
手持设备需要花费更多的时间来加载网页，其首要原因是移动网络中数据的传输特点。在移动设备接收或发送数据前，需要同网络建立一个无线传输通道（图 1-2）。在 3G 连接的情况下这可能需要花费数秒的时间。在设备同无线基站通信询问何时能传输数据后，网络运营商首先要将数据从无线基站传输到自己的内部网络，然后再传递到公网。这些步骤组合在一起很容易造成数十到数千毫秒的额外延迟。而且，当无线通道中没有数据传输时，超时会让通道进入空闲状态。这时需要重新建立通信通道来从头开始整个流程，对 Web 页面加载来说这就是一场噩梦。图 1-2：在移动设备取回加载网站所需的资源前，设备必须同网络建立无线通道。这个过程会消耗数秒的时间，严重拖慢页面加载速度
Ilya Grigorik 写道（http://dwz.cn/29zWGz）：“如今，延迟已成为网络浏览体验的制约因素，而不是带宽。”用户所体验到的延迟越久，用户的设备获取数据所需的时间就会越久，页面完全加载的耗时就会越长。我们在第 2 章中会更详细地介绍页面速度相关的基础内容。延迟和带宽是什么？延迟是指数据包从一个点传输到另一个点所消耗的时
间。例如，服务器收到并处理请求有延迟，服务器将资源发
送回去到浏览器接收之间也有延迟。延迟同基础的物理属性
息息相关（比如光速）。通常用毫秒来衡量延迟（一毫秒是
一秒的千分之一）。带宽是通信通道的最大吞吐量，比如光线或者你的移动
服务商能够同时传输多少数据。打个比方，一辆出租车和一
辆大客车跑在同一条公路上，它们的延迟相同，但大客车的
带宽更高。
尽管网络本身的确在缓慢地加速，但当前用户在移动设备上加载页面时可能正在忍受非常糟糕的体验。一个普通的美国用户的桌面电脑在连接 WiFi 时，请求来回的平均延迟只有 50 毫秒（http://slidesha.re/1ttLhPw）。这是浏览器发送请求到服务器再通过网络将响应发送回来所需要的时间。但是，在移动网络情况下，数据来回的时间需要 300 毫秒以上。用更直观的例子来比较这个差异：移动网络和老式的拨号连接一样慢。
将加载页面的每一个请求的来回所需的时间添加到起初与网络建立无线通道所使用的时间（大概 1000~2000 毫秒）中，你就会明白移动网络性能是如何直接对网站的用户体验产生影响的。而且，由于一些因素，比如用户正在参加一个大量人群聚集的活动或者正处在一个信号不好的区域，很难预测无线网络何时会断掉连接。
这意味着你真的需要在为移动设备优化网站设计时更加重视性能，因为页面加载时间对移动用户的体验以及他们是否会使用你的网站有很大影响。很多公司的研究都为此提供了证据。我在 Esty 的团队发现，在页面添加 160 KB 的隐藏图片，将会使移动端网页跳出率增加 12%。Google 的广告产品 DoubleClick 移除了客户端的一个重定向（http://dwz.cn/29zWaE），然后发现移动设备上的点击率提高了 12%。为移动用户进行性能优化的一大好处是，使用其他任何设备访问网站的用户也将同时从这些优化中受益。1.2.2 移动行为模式
无论通过何种设备访问网站，用户体验都会被页面加载时间所影响。但是，如果用户使用的是移动设备，则缓慢的加载时间会导致更差的用户体验，因为除了网速慢，移动用户的使用习惯也不同。
Google 的一项研究（http://dwz.cn/29zXBa）发现，用户在以下情况下使用智能手机：● 外出及家中● 为了交流和通信● 使用时间短● 需要快速地获取信息时
类似地，平板电脑主要用来娱乐或浏览信息。而另一方面，桌面电脑主要用来进行更严肃或研究密集型的任务。根据这个研究的结果，通常情况下智能手机是下面这些在线行为的入口：● 搜索特定信息● 浏览● 购物● 网络社交
当设计网站时，需要考虑用户以有限的时间在设备上完成这些任务的便捷性，以及移动网络对此的影响程度。同时要记住，只使用移动设备的用户没有选择的余地，只能在手机上完成这些任务，同时无论使用什么设备，所有的用户都不喜欢浪费时间。设计应该直观且简单易用，而且无论在什么平台上，页面都要尽可能快地可以进行交互操作。1.2.3 移动硬件
另外，即使是在手持设备上使用 WiFi，受天线长度和输出功率的影响，用户的速度体验也可能会很慢。WiFi 可以同时使用不止一根天线来发送和接收信号，但是大部分智能手机并不支持多信道技术。而且手持设备的 WiFi 天线长度也比笔记本和桌面电脑的要短很多。
同时手持设备试图让电池电量更高效（这是智能手机用户体验的重要部分），而省电的主要途径之一就是限制无线信号的发送。桌面电脑并不使用电池，因此使用 WiFi 时并不需要限制信号强度。最后，现在大部分智能手机只支持比较老且慢的 WiFi 标准，只有新式的手持设备才支持最新的 802.11ac 标准。
很多对页面加载时间的优化同时也会优化设备的电量消耗，从而对用户体验产生影响。在移动设备上，诸如 WiFi 信号强度、JavaScript 渲染和图片渲染等都会对电量消耗产生影响。在一项研究中（http://www2012.org/proceedings/proceedings/p41.pdf）研究者发现，如果 Amazon 将它全部的图片文件转成 92% 质量压缩的 JPEG 文件，在 Android 手机上加载首页将节省 20% 的电量，而同样的改动对 Facebook 来说则可以节省 30% 的电量。这个改进通过减少电量消耗提升了用户体验，而图像质量的损失几乎可以忽略不计。另一项研究（https://www.usenix.org/system/files/conference/nsdi13/nsdi13-final177.pdf）发现，移动设备上的主要页面中，多达 35% 的加载时间花费在处理诸如 HTML 解析和 JavaScript 执行等任务上。
总而言之，优化网站的性能将会对整体的用户体验产生影响，包括电池续航能力。1.3 设计师对性能的影响
从用户输入网址、点击按钮或是从下拉列表中选择一个条目到页面响应之间的延迟，会影响他们对网站的印象。100 毫秒以内的延迟用户几乎感觉不到，而 100~300 毫秒的延迟就会被明显地察觉到。300~1000 毫秒的延迟会让用户感觉到计算机正在工作，但如果延迟超过 1000 毫秒，用户的心智就会开始切换到其他事情上去了，俗称溜号。
这些数字很重要，因为整体来说我们所设计的网站正包含越来越丰富的内容：大量的动态元素、庞大的 JavaScript 文件、漂亮的动画、复杂的图形等。你可能会关注于优化设计和布局，但这些都是以页面速度为代价的。有些响应式设计的网站会非常不负责任地使用大量用来适配小屏幕所需的 HTML 标记和图片，无意之中强迫用户加载了非必要的资源。
设计师在实现响应式 Web 设计的同时，已经决定了在不同的屏幕尺寸中如何显示内容。这些决定会显著地影响页面加载时间，而响应式 Web 设计为在设计流程中考虑性能提供了一个非常好的契机。
回顾一下你近期的设计。你使用了多少不同的字号？用了多少图片？图片多大，采用的是什么图片格式？你的设计对 HTML 标记和 CSS 的结构有何影响？
设计师的决策通常决定了网站建设的其他方面。在设计初始阶段需要做出以下决策。● 颜色和渐变，影响图片格式的选择，是否需要透明度，需要
创建多少 CSS 精灵图，以及需要使用多少 CSS3 属性。● 布局，影响 HTML 结构、类和 ID 名称、设计模式的复用能
力以及 CSS 的组织形式。● 字体，影响包含的字体文件的大小和数量。● 设计模式，影响可以在整个网站中复用和缓存的内容，资源
何时以及如何加载，以及未来设计师和开发者进行修改的难易程
度。
这些决策通常在产品流程的初始阶段就确定下来了，因此对最终的页面加载时间有很大的影响。下面通过例子来说明。假设我们有一个标志，想要叠加在 div 上并有淡蓝色的背景，如图 1-3 所示。图 1-3：这个示例标志的背景是透明的，叠加在一个 div 上，背景为淡蓝色
透明和叠加的需求会影响图片文件的类型和大小。如果设计师在设计阶段考虑页面加载时间，会思考以下问题：“如果我将图片输出为没有透明度的 JPEG 或 PNG-8 格式将会如何？如果我在 PNG-8 文件中使用亚光的淡蓝色将会如何？这对性能将有何影响？”我们可以测试一下，看看输出为 JPEG 和 PNG-8 版本的文件大小，如图 1-4 至图 1-7 所示。图 1-4：原始的带有透明度的 PNG-24：7.6 KB图 1-5：纯色背景的 PNG-8：5.0 KB图 1-6：亚光的 PNG-8：2.7 KB图 1-7：75% 质量、纯色背景的 JPEG：20.2 KB
在测试中我们发现，纯色背景和透明度会导致不同格式的文件大小不一。在第 3 章中我们将会介绍更多关于图片优化的内容，以及不同选择之间的优劣。
我们有一个良好的契机来尝试潜在的性能优势，度量不同的设计选择对性能的影响。在第 3 章中，我们将介绍如何选择和压缩各种图片格式，第 6 章中我们会介绍如何在时刻记住页面加载时间的前提下，在设计过程中进行性能的度量并迭代。
新设计和重新设计的网站，其性能都会被这些决策所影响。每一个已经存在的网站都可以进行优化并测试性能。曾经有一个网站，我通过清除非必需的 CSS、优化图片、颜色标准化和重新认真地组织网站模板中的资源，将加载时间减少到原来的一半。我通过着重减少冗余的 HTML 和 CSS 来减小 HTML、CSS 和图片文件的体积，而不是重新设计整个网站。
在第 4 章中你可以阅读到更多关于如何通过优化 HTML 和 CSS 来优化性能的内容。
即使你的工作职位并不包含设计师这个字眼，如果你负责网站的视觉和体验的决策工作，你的决策就会直接影响网站的性能。性能是大家共同的责任，团队中的每一个人都会影响性能。在做设计决策时考虑性能将对用户产生非常重要的影响。平衡视觉美感和性能在设计流程中应该是首要的任务，在第 7 章中会介绍相关内容。这同时也是组织内各部门进行合作的一个好机会，设计师和开发人员协同工作来创造非凡的用户体验。
在下一章中，我们将介绍页面加载速度的基础知识，包括浏览器如何获取并渲染内容。理解用户的浏览器如何同服务器上的文件通信，网站文件的大小如何影响页面加载时间，以及用户对网站性能的看法，将大大有助于你设计网站，并实现美观和性能的平衡。 第2章页面速度初探
了解有关页面速度的基础知识对于网站设计是非常重要的，只有这样才能更好地理解需要优化什么。浏览器获取和显示内容的方式是非常稳定且可靠的，理解网页是如何渲染的将有助于你准确地判断设计决策会对网站的页面速度产生什么影响。我们的目标是优化：● 页面中加载的资源数量（例如图片、字体、HTML 和 CSS）● 这些资源的文件大小● 用户对网站的感知性能
除了用户能够在浏览器中看见的渲染内容外，在后端也可以做进一步的优化，包括优化服务器在向客户端返回第一个字节之前所做的工作。还有很多因素会影响页面的加载速度，但这些因素并不在网站的前端，例如数据库请求，或者将模板编译成 HTML 等。然而正如 Steve Souders 所说：“终端用户的响应时间中有 80% 到 90% 都耗费在了前端。”在这里我们关注网页在前端的加载时间，因为前端对用户体验的影响最大。2.1 浏览器如何渲染内容
从用户在浏览器中输入你网站的 URL，到页面开始加载你的网站设计，这期间用户的浏览器会同你的服务器进行协商，以获得相互通信所需的全部数据。
首先，浏览器发出一个获取内容的请求。当浏览器首次向一个新的域名发送请求时，它首先要找到存放这个内容的服务器，这个过程叫作 DNS 查询（DNS lookup）。DNS 查询会找到你的网络主机在互联网中所处的位置，这样获取内容的请求才能一路畅通地抵达服务器。浏览器会“记住”这个地址一段时间（时间取决于服务器的 DNS 设置），这样就不需要每次请求时都花费宝贵的时间来进行查询。
当服务器和用户的浏览器建立连接并收到首个请求后，会对请求进行解码并定位浏览器所请求的内容，因为浏览器要渲染对应的页面。无论是图像、CSS、HTML 或者其他种类的资源，服务器都会将内容发送回去，然后浏览器会开始为用户下载并渲染页面。图 2-1 说明了这个通信的循环过程。图 2-1：加载页面时用户浏览器和内容服务器之间的循环过程
我们会测量浏览器收到响应内容的第一个字节的时间，并将其称作首字节响应时间（Time To First Byte，TTFB）。这是一个用来衡量网站的后端处理并返回内容的速度的很好的指标。对于前端来说，即使浏览器已经开始接收从服务器返回的内容，它依然需要继续花费一定的时间来下载并在页面上渲染这些内容。浏览器可以很快地处理并渲染某些文件类型；还有些请求（比如阻塞式的 JavaScript）则需要被完整处理，之后用户的浏览器才能继续渲染其他内容。
这些内容请求的顺序和大小是不同的。浏览器会聪明地尝试向服务器并行发送这些请求，来减少渲染页面所需的时间。但我们依然可以做很多事情，来优化请求和获取内容的过程，让用户可以尽快和网站进行交互。2.1.1 请求
优化用来创建页面的请求的大小和数量，将会对网站的加载速度产生巨大的影响。为了说明请求如何影响页面加载速度，我们来看一个用 WebPagetest（http://www.WebPagetest.org/）生成的瀑布图（第 6 章中会介绍如何使用 WebPagetest）。图 2-2 所示的瀑布图展示了请求一个页面的内容所消耗的时间，比如 CSS、图片和 HTML，以及在浏览器显示这些内容前所花费的下载时间。图 2-2：水平方向的每一条线代表一个独立的资源请求
瀑布图中水平方向的每一条线都代表一个独立的资源请求，比如一个 HTML 文件、一个样式表、一个脚本或一张图片。我们的第一个请求通常是 HTML 页面，其中包含 DNS 查询，因为浏览器需要找到 Web 中存放这些内容的位置。随后的每一个请求与文件所在的服务器之间将有一个初始连接时间，一段时间后用户的浏览器才会收到返回的第一个字节，另外还需要一定的时间来下载和显示内容。
自然，所请求的内容片段越大，下载的时间、浏览器处理的时间以及显示在页面上所需的时间就越长。同样，渲染页面所需的独立内容片段越多，页面完全加载所需的时间就越长。这就是我们需要同时优化网站加载所需的图片、CSS 和 JavaScript 文件的数量和大小的原因。
例如，当处理图片时，可以将独立的图片请求组织到一个单独的精灵图（也就是一个图片的集合）中，来减少浏览器需要发起的请求数量（我们会在 3.2.1 节中介绍这个技术）。我们还可以通过压缩工具对每一张图片进行处理以减小文件体积，同时不损害图片质量（在 3.1.4 节中阅读更多相关内容）。我们还会关注如何减少 CSS 和 JavaScript 文件的总数，以及如何以最合理的顺序来加载它们从而提升感知性能，4.5.1 节中会详细介绍。优化浏览器加载页面所需的请求的大小和数量可以提升网站的速度。2.1.2 连接
加载页面所需的请求数量同浏览器为获取这些内容而建立的连接数量不同。WebPagetest 中的连接视图（图 2-3）展示了浏览器同服务器之间的每一条连接，以及通过这些连接所发送的请求。图 2-3：连接视图展示了浏览器同服务器之间的每一条连接，以及通过这些连接所发送的请求
对于每一个连接，都可以看到一次针对该域名的 DNS 查询（深绿色），与服务器的初始连接（橙色），以及在浏览器开始获取通过 HTTPS 传输的内容（粉红色）之前可能会进行的 SSL 协商。但浏览器非常聪明，在同服务器建立连接后会尝试对下载内容进行优化。什么是 SSL 协商？SSL 协商发生在浏览器为内容建立安全连接的阶段，
SSL 也就是加密的 HTTPS 连接。用户的浏览器同服务器协
商密钥和认证来在彼此间建立一条安全连接。由于 SSL 协
商需要在浏览器和服务器之间交换数据，因此会额外增加页
面的加载时间。
注意图中的每一行都会有几种不同类型的文件被下载。这就是持续连接（persistent connection），浏览器会保持连接的打开状态以便在其他请求中复用该连接。浏览器可以在取回 JavaScript 文件后利用这个已经建立的连接来获取一个字体文件、一个图片，直到不得不建立一条新的连接来获取更多的内容。
同时可以观察到浏览器（在这个例子中是 Chrome）在同一时间建立了多条连接，并行地获取内容。每个浏览器可建立的并发的持续连接的数量是有差异的。现代浏览器允许同时建立六条（Chrome、Firefox、Opera 12）或八条（Internet Explorer 10）并发连接。
了解加载页面所需的连接数量是非常重要的。如果你发现加载你的页面需要很多连接，说明你的网站内容被分散在过多的域名中，这样浏览器就无法对已经建立的连接进行优化。请求过多的第三方脚本可能会导致这个问题。
借助瀑布图可以通过测量页面整体的大小和感知性能来估算页面的综合加载性能。在第 6 章中会更详细地介绍 WebPagetest 的瀑布图，以及如何查找有问题的内容加载。2.2 页面大小
加载页面所需的 HTML、图片和其他内容的文件大小会对页面加载的总时间产生影响。使用浏览器插件 YSlow 可以测量每种内容的文件大小。我们来简要介绍一下如何使用 YSlow。
在页面上运行 YSlow 后，切换到 Components 标签页（图 2-4）来查看这个页面中的内容列表，列表展示了内容的类型和大小。图 2-4：在 YSlow 中的 Components 标签页可以看到这个页面中的内容类型、内容大小的列表
在这个例子中，可以看到启用 gzip 减少了 HTML（表格中的 doc 一项）、JavaScript 和 CSS 文件的大小。如果你好奇 gzip 是如何工作的，我们会在 4.5.2 节中介绍。同时可以发现尽管加载页面只需要 6 个图片文件，但是它们的大小达到了 722.6 KB ！这些图片非常大。“cssimage”这一行将所有通过 CSS 来请求并应用的图片同直接内嵌在 HTML 页面中的图片区分开来。
查看一下你自己的页面大小，然后同 http://httparchive.org/interesting.php 中的“页面平均字节”图表进行对比。你是否使用了过多的 CSS 或 JavaScript ？页面中细分的内容类型是什么样的——图片的大小是否如前面的例子中那样明显超过其他类型内容，还是有其他的异常？什么是 HTTP Archive ？HTTP Archive 是一个固定存放页面性能信息的地方，
诸如页面大小、失败的请求和使用的技术等。它收集了
Alexa 前 250 000 名网站的 URL 的 WebPagetest 信息。
关于页面大小并没有硬性规定，但是长期跟踪页面的大小是非常重要的，这样可以确保在页面改版和引入更多内容，或设计迭代时不会发生巨大和意料之外的改变。我们会在 6.4 节中详细介绍网站页面大小和加载时间的测量和迭代。
审视页面的总大小和细分的内容种类时，要兼顾加载页面所需的请求数量和页面的感知性能。渲染页面所需的内容总数将直接影响用户加载所需的时间——越小越好。2.3 感知性能
网站加载的感知速度比实际的速度更重要。用户的感知速度主要基于开始在页面上看见内容渲染的速度，页面变得可以交互的速度，以及网站滚动的流畅程度。2.3.1 关键渲染路径
当用户开始加载页面时，首先出现的是空白。空白网页是一种很糟糕的用户体验，用户会感觉什么都没有发生。为了解决这个用户体验问题，你需要优化你的关键渲染路径。
为了了解关键渲染路径的工作原理，你需要首先了解浏览器如何通过读取页面中的 HTML、CSS 和 JavaScript 来进行可视化渲染。浏览器首先会创建文档对象模型（Document Object Model，DOM）。浏览器从服务器取回 HTML 后会对其进行解析：原始字节变成字符，字符组成的字符串变成诸如
这样的标记，标记变成拥有属性和规则的对象，最终这些对象互相联系在一起变成一种特定的数据结构。最后一步就是创建 DOM 树，浏览器对页面的进一步处理完全依赖于它。在浏览器读取 HTML 的过程中，可能会遇到样式表。浏览器会暂停所有事情，并向服务器请求这个文件。当接收到文件后，浏览器会进行一个同前面类似的流程：原始字节变成字符，字符串组成标记，标记变成对象，对象互相联系在一起变成一个树结构，最终我们得到一个 CSS 对象模型（CSS Object Model，CSSOM）。
接下来，浏览器将 DOM 和 CSSOM 组合在一起来创建渲染树，渲染树用来计算所有可见元素的大小及位置。渲染树中只包含渲染页面所必需的内容（因此所有 display: none 的元素都不会包含在渲染树中）。最后，浏览器将最终的渲染树显示在屏幕上。
浏览器经过这个过程为用户将内容显示在屏幕上，这个过程就叫作关键渲染路径。WebPagetest 中的“Start Render”指标是观察用户需要多久才能看见网站加载的方式之一，它可以告诉你浏览器需要多少秒才能开始渲染内容。
通过 WebPagetest，我们可以用幻灯片视图方式（图 2-5）来观看页面，并观察页面随着加载在视觉上的变化情况。图 2-5：通过 WebPagetest 的幻灯片视图可以观察随着页面的加载屏幕内容的变化
以 0.5 秒为间隔，观察 Yahoo! 的首页可以发现，加载开始大约 2 秒后页面还是一片空白。页面上显示可见内容的时间越早，用户感觉到的页面速度就会越快。说明WebPagetest的测试结果随着地区、浏览器、连接速度
和其他因素的不同而有所差异。以0.5秒的间隔来观察
Yahoo!首页的加载情况很简单，你也可以在WebPagetest的
幻灯片视图中将间隔时间设置为0.1秒来观察自己的网站。
有一些方法可以优化关键渲染路径。由于默认情况下 CSS 会被当作阻塞渲染的资源来处理，可以使用媒体类型和媒体查询来标识 CSS 的某些部分为非阻塞渲染的： ➊ ❷
➊ 这个样式只有在打印页面时才会生效。它在页面首次加载时不会阻塞渲染。
❷ 这个样式只有浏览器的宽度大于等于 61.5 em 时才会生效。当浏览器宽度小于 61.5 em 时它不会阻塞渲染，但当浏览器宽度满足 min-width 的条件时会阻塞渲染。
另外一个优化关键渲染路径的方法是确保 JavaScript 以尽可能高效的方式加载。JavaScript 会阻塞 DOM 的构建，除非它被声明为异步加载；参见 4.5.1 节，详细了解如何让 JavaScript 不阻塞页面渲染。
想更深入地了解关键路径对网站感知性能的影响？ WebPagetest 还给你的页面提供了一个叫作“Speed Index”（https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index）的指标。根据 WebPagetest 的文档，Speed Index 是页面上可见内容被展示出来所需的平均时间。它以毫秒为单位，并且依赖于所选视口的大小。
当你想要测量页面的感知性能时，Speed Index 指标是非常好的选择，因为它可以告诉你“第一屏”内容需要多久才能展示给用户。关注用户需要多久才能看见并且和内容进行交互，比仅仅关注浏览器需要多久才能完整加载整个页面（包括文档被完整展示后，所有异步内容都加载并执行完成）更重要。在第 6 章中可以阅读更多关于 WebPagetest 如何测量 Speed Index 以及页面完整加载所需时间的内容。
可交互时间（Time To Interactivity，TTI）指的是从用户来到一个页面，到可以完成诸如点击链接、搜索或播放视频等交互操作所需的时间。有数种方法可以通过优化关键渲染路径，来提升页面加载并变得可交互的速度：● 异步加载内容● 提高“第一屏”内容请求的优先级● 遵循 CSS 和 JavaScript 加载的最佳实践（在 4.5.1 节中有
详细内容）● 为再次访问网站的用户缓存资源（在 4.5.3 节中有详细内
容）● 确保页面上的主要功能尽快对用户可用
通过将关键渲染路径和页面加载的其他方面一同优化，可以确保网站的加载速度给用户留下好印象。2.3.2 卡顿
当你滚动一个网页时，有没有注意到断断续续或者是画面跳跃的情况？这些现象统称为卡顿，当浏览器的渲染速度低于每秒 60 帧时就会发生卡顿。卡顿会使用户体验下降，并且会使用户对网站的感知性能不满。
断断续续是由于浏览器试图在页面上绘制更新。改变一个元素的视觉属性（比如背景、颜色、边框半径或阴影）会引起浏览器进行绘制。用户改变页面元素可见性的操作也会引起绘制，比如显示或隐藏某些内容，或者点击一个轮播的内容。当内容改变时，浏览器会“重绘”显示器上的部分画面。
重绘有时会对浏览器渲染产生巨大影响，使渲染速度低于每秒 60 帧的阈值。例如，现代浏览器能以高于每秒 60 帧的速度处理某些动画（比如位移、缩放、旋转和透明度等），而其他动画则可能会产生卡顿。对浏览器来说重绘是成本非常高昂的操作，并且会让人感觉页面加载非常缓慢。
如果你发现网站出现了卡顿的迹象，有一些浏览器工具可以帮助你寻找症结所在。Chrome 开发者工具中有一个 Timeline 视图（图 2-6），展示了当你同页面进行交互时浏览器渲染的帧率。图 2-6：Chrome 开发者工具的 Timeline 视图展示了当你同页面进行交互时浏览器渲染的帧率
当你点击“record”并开始同页面交互时，Chrome 开发者工具会记录每秒的帧数，以及浏览器在做什么，比如重计算样式、触发事件或绘制。当你发现某个区域的渲染帧率低于每秒 60 帧的阈值时，就可以有针对性地对该区域减少重绘。首先通过隐藏页面中该区域的元素来查找造成卡顿的原因，接下来可以尝试通过隐藏颜色、阴影和动画来查找造成网页缓慢的根本原因。在 6.1.2 节阅读更多关于如何使用 Chrome 开发者工具的内容。
就网站的感知性能而言，要确保有人定期在不同的地区用不同的设备对页面进行测试。你是否可以很快地完成该页面上的主要操作？是否感觉你的网站很慢？是否发现在某些浏览器或移动设备上网页缓慢？进行用户测试同样可以帮助你确定页面上的哪个区域需要以最快的速度加载，以及哪个区域需要进一步优化来改善感知性能和关键渲染路径。
如果你发现用户由于加载时页面空白时间过长，或者没有耐心等待某个区域变成可点击状态而感觉网站很慢的话，可以优化加载顺序和页面请求的大小。如果网站第一屏页面能够更快地变成可交互状态，更快地将内容显示出来，网站的感知性能就会提升，从而带来更好的用户体验。
试读结束[说明：试读内容隐藏了图片]