Didn't make the #ChromeDevSummit this year? Catch all the content (and more!) in the Chrome Dev Summit 2019 playlist on our Chrome Developers YouTube Channel.

性能为何至关重要

在我们共同推动网页实现更多功能的过程中,将遇到一个常见的问题:性能。 如今,网站拥有比以往更多的功能, 以至于许多网站都将精力用于在各种网络条件和设备上提供更高的性能。

不过,性能问题多种多样。 轻微性能问题可能只会导致微弱的延迟,给您的用户带来短暂的不便。 而严重的性能问题可能导致您的网站完全无法访问,无法对用户输入进行响应或两者同时发生。

性能关乎用户的去留

我们希望用户能与我们构建的内容进行有意义的互动。 如果我们构建的是博客,我们希望用户阅读博文。 如果是在线商店,我们希望用户购买商品。 如果是社交网络,我们希望用户彼此互动。

性能在任何在线业务的成功方面都扮演重要角色。 以下是一些案例研究,显示了性能出色的网站与性能较差的网站相比,如何更好地与用户互动并留住用户:

以下是两个案例研究,显示了低性能会对业务目标产生不利影响:

上方引用的同一个 DoubleClick by Google 研究还表明,与加载时间约为四倍(19 秒)的网站相比,加载时间在 5 秒以内的网站会话加长 70%、跳出率下降 35%、广告可见率上升 25%。 如需大致了解您的网站对比竞争对手的性能,请使用 Speed Scorecard 工具

Speed Scorecard 工具对比四个热门新闻媒体性能的屏幕截图。
图 1. Speed Scorecard 借助来自美国 4G 网络用户的 Chrome UX Report 数据对比四个相互竞争网站的性能。

性能关乎转化率的提升

留住用户对于提升转化率至关重要。 响应速度慢会对网站收入带来不利影响,反之亦然。 以下是一些示例,显示了性能在提升业务收入方面扮演怎样的角色:

如果您在网页上开展业务,性能发挥着至关重要的作用。 如果您的网站加载速度快,对用户输入响应快,则收入不会差。 如需了解性能可能会对您的收入带来怎样的影响,请使用 Impact Calculator 工具。

Impact
Calculator 的屏幕截图,估算性能改进后网站可能获得的收入。
图 2. Impact Calculator 估算您可以通过提升网站性能获得的收入。

性能关乎用户体验

当您导航到某个网址时,您是从许多可能的起点开始导航。 根据诸多条件的不同(例如连接质量和您使用的设备),您的体验和其他用户的体验可能截然不同。

页面加载的两种幻灯片卷的对比。
 第一个显示基于较慢连接加载的页面,第二个显示基于较快连接加载的同一页面。
图 3. 基于极慢连接加载的页面(顶部)和基于较快连接加载的页面(底部)的对比。

网站开始加载时,用户需要等待一段时间才能看到要显示的内容。 在此之前就谈不上用户体验。 快速连接会让这段时间一闪而过。 而如果连接速度较慢,用户就不得不等待。 页面资源加载较慢时,用户可能会遇到更多问题。

性能是创造良好用户体验的基本要素。 当网站传输大量代码时,浏览器必须使用用户数兆字节的数据流量才能下载相应代码。 移动设备的 CPU 计算能力和内存有限。 一些未经优化的代码,可能我们认为并没有多大,但却常使移动设备崩溃。 这会导致性能低,进而导致无响应。 我们深知人类的行为,用户忍受低性能的应用到一定程度后,必定会将其抛弃。 如果您想了解更多关于如何评估网站性能及寻找改进机会的信息,请查阅如何看待提速工具

Lighthouse
中的页面性能概览。
图 4. Lighthouse 中的页面性能概览。

性能关乎用户

性能低的网站和应用还会导致用户产生实际成本。

随着移动用户持续占据全球互联网用户的较大比例,我们需要谨记,这些用户中的许多人都是通过移动 LTE、4G、3G,甚至 2G 网络上网。 正如 Calibre 的 Ben Schwarz 在此实际性能研究中指出,预付费数据流量的成本正在下滑,这将使得曾经需要支付高额费用才能实现的网络访问变得更加便宜。 移动设备和上网不再是奢侈消费。 在日益互连的世界中,它们成为进行导航和日常活动必需的常用工具。

自 2011 起,页面总大小就开始稳步增加,而这一趋势似乎将持续下去。 随着典型页面发送的数据增多,用户必须经常为其按流量计费的数据流量续费,如此一来,用户的成本便会增加。

除了为用户省钱,速度快、负荷轻的用户体验对处在危机中的用户同样至关重要。 医院、诊所和危机中心等公共资源提供各类在线资源,以为用户提供面临危机时需要的特定重要信息。 虽然紧急情况下设计在高效展示重要信息中扮演非常重要的角色,但快速传达此类信息的重要性同样不可低估。 这也是我们的职责。

后续步骤

下方列表或许会让人望而生畏,但请记住,要提升您网站的性能并非需要您完成所有事项。 这些方法仅仅是起点,不要感到无所适从!任何能够优化性能的做法都将为您的用户带来帮助。

注意您发送的资源

构建高性能应用的一个有效方法是审核您向用户发送了哪些资源。 尽管 Chrome DevTools 的 Network 面板汇总了给定页面使用的所有资源,但如果您之前未考虑过性能问题,可能会对从何处着手感到无所适从。 以下是几个建议:

  • 如果您使用 Bootstrap 或 Foundation 构建界面,询问自己这是否有必要。 此类抽象方法会增加浏览器必须下载、解析和应用到页面的 CSS,而这些 CSS 均会在您网站特定的 CSS 应用于网页之前加载。 FlexboxGrid 都擅长使用相对较少的代码创建简单和复杂的布局。 由于 CSS 是一种阻塞渲染的资源,CSS 框架的开销可能导致渲染延迟严重。 您可以视情况移除不必要的开销,以加速渲染。
  • JavaScript 库非常方便,但不一定必需。 以 TakejQuery 为例:得益于 querySelectorquerySelectorAll 等方法,元素选择得以大大简化。 addEventListener 使事件绑定得以轻松实现。 classListsetAttributegetAttribute 提供使用类和元素属性的简便方法。 如果您必须使用库,不妨寻找占空间较小的替代产品。 例如,Zepto 是较小的 jQuery 替代产品,Preact 是替代 React 的非常小的产品。
  • 并非所有网站都需要做成单页面应用 (SPA),此类应用通常广泛使用 JavaScript。 JavaScript 是我们在网页上提供的最昂贵的资源,因为此类资源必须经过下载、解析、编译和执行。 例如,采用经过优化的前端架构的新闻和博客网站可以提供与传统多页面网站一样的良好性能。 当 HTTP 缓存配置正确或者使用 Service Worker 时尤其如此。

注意您发送资源的方式

高效的交付对于构建快速用户体验至关重要。

注意您发送的数据量

以下是限制您发送的数据的一些建议:

如需查看更全面的性能优化指南,请参阅我们有关 RAIL 性能模型的文章,其中重点介绍如何优化加载时间和应用响应速度。 我们的 PRPL 模式指南也是一个实用资源,介绍如何优化现代单页面应用的性能。

如果您想进一步了解性能以及提高网站速度的方式,请浏览我们的性能文档,获取有关各类主题的指南。 我们会不断添加新指南并更新现有指南,请持续关注!

特别感谢 Addy OsmaniJeff PosnickMatt GauntPhilip WaltonVinamrata SingalDaniel AnPete LePage 在完善和发布本资源过程中提供的大量反馈!

反馈

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.