diff --git a/src/content/zh-CN/2019/accessibility.md b/src/content/zh-CN/2019/accessibility.md index 62f6597b1b8..0a7def841ab 100644 --- a/src/content/zh-CN/2019/accessibility.md +++ b/src/content/zh-CN/2019/accessibility.md @@ -10,20 +10,20 @@ discuss: 1764 results: https://docs.google.com/spreadsheets/d/16JGy-ehf4taU0w4ABiKjsHGEXNDXxOlb__idY8ifUtQ/ queries: 09_Accessibility published: 2019-11-11T00:00:00.000Z -last_updated: 2020-08-12T00:00:00.000Z +last_updated: 2020-05-27T00:00:00.000Z --- ## 介绍 -互联网的无障碍可访问性对一个包容和公平的社会至关重要。随着我们的社会生活和工作生活越来越多地转移到网络世界，残疾人能够无障碍地参与所有在线互动就变得更加重要了。正如建筑设计师可以创建或省略无障碍功能，例如轮椅坡道，web开发人员可以帮助或阻碍用户依赖的辅助技术。 +互联网的无障碍可访问性对一个包容和公平的社会至关重要。随着我们的社会生活和工作生活越来越多地转移到网络世界，残障人士能够无障碍地参与所有在线互动就变得更加重要了。正如建筑设计师可以创建或省略无障碍功能，例如轮椅坡道，web开发人员可以帮助或阻碍用户依赖的辅助技术。 -当考虑到残疾用户时，我们应该记住他们的用户旅程通常是相同的——他们只是使用不同的工具。这些流行的工具包括但不限于:屏幕阅读器、屏幕放大器、浏览器或文本缩放以及语音控制。 +当考虑到残障用户时，我们应该记住他们的用户旅程通常是相同的——他们只是使用不同的工具。这些流行的工具包括但不限于：屏幕阅读器、屏幕放大器、浏览器或文本缩放以及语音控制。 -通常，提高站点的可访问性对每个人都有好处。虽然我们通常认为残疾人是永久性残疾，但任何人都可能有暂时的或随着环境变化的残疾。例如失明，有人可能是永久失明，有人是暂时的眼睛感染，而有人在特定的情况下失明，比如在外面强烈的阳光之下。所有这些都可以解释为什么有些人看不见自己的屏幕。每个人都有环境障碍，因此改进web页面的可访问性将改善所有用户在任何情况下的体验。 +通常，提高站点的可访问性对每个人都有好处。虽然我们通常认为残障人士是永久性残疾，但任何人都可能有暂时的或随着环境变化的残疾。例如失明，有人可能是永久失明，有人是暂时的眼睛感染，而有人在特定的情况下失明，比如在外面强烈的阳光之下。所有这些都可以解释为什么有些人看不见自己的屏幕。每个人都有环境障碍，因此改进web页面的可访问性将改善所有用户在任何情况下的体验。 [网页内容易读性指引](https://www.w3.org/WAI/WCAG21/quickref/) (WCAG) 针对如何使网页容易易阅读提供意见。这些准则被用作我们分析的基础。然而，在许多情况下，很难通过编程来分析网站的可访问性。例如，web平台提供了几种实现类似功能结果的方法，但是支持它们的底层代码可能完全不同。因此，我们的分析只是对整体网页可访问性的一个近似分析。 -我们将最有趣的观点分为四类:阅读的便捷性、网络媒体、页面导航的便捷性以及与辅助技术的兼容性。 +我们将最有趣的观点分为四类：阅读的便捷性、网络媒体、页面导航的便捷性以及与辅助技术的兼容性。 在测试过程中，桌面和移动设备的可访问性没有显著差异。因此除非另有说明，否则我们呈现的所有指标都是我们的桌面分析的结果。 @@ -45,23 +45,23 @@ last_updated: 2020-08-12T00:00:00.000Z
图1.色彩对比度不足的文本示例。由LookZook提供
-只有22.04%的网站给所有的文本提供了足够的颜色对比。或换句话说:每5个网站中就有4个网站的文字很容易和背景融合，导致难以阅读。 +只有22.04%的网站给所有的文本提供了足够的颜色对比。或换句话说：每5个网站中就有4个网站的文字很容易和背景融合，导致难以阅读。

请注意，我们无法分析图像中的任何文本，因此我们报告的指标是通过颜色对比测试的网站总数的上限。

### 缩放页面 -使用 [清晰的字体大小](https://accessibleweb.com/question-answer/minimum-font-size/) 和 [目标大小](https://www.w3.org/WAI/WCAG21/quickref/#target-size) 帮助用户阅读网站以及与你的网站互动。但即使网站完全遵循所有这些准则，也不能满足每个访问者的特定需求。这就是为什么像掐拉缩放这样的设备特性如此重要:它们允许用户调整你的页面以满足他们的需求。在某些使用微小字体和按钮的难以访问的网站上，这些特性甚至给了用户使用该网站的机会。 +使用 [清晰的字体大小](https://accessibleweb.com/question-answer/minimum-font-size/) 和 [目标大小](https://www.w3.org/WAI/WCAG21/quickref/#target-size) 帮助用户阅读网站以及与你的网站互动。但即使网站完全遵循所有这些准则，也不能满足每个访问者的特定需求。这就是为什么像掐拉缩放这样的设备特性如此重要：它们允许用户调整你的页面以满足他们的需求。在某些使用微小字体和按钮的难以访问的网站上，这些特性甚至给了用户使用该网站的机会。 在少数情况下，禁用缩放是可以接受的，比如有问题的页面是一个使用触摸控制的基于web的游戏。如果在这种情况下保持开启状态，玩家的手机游戏会在玩家双击时放大或缩小，讽刺的是，这个功能反而使得游戏无法访问。 -因此，开发人员被赋予禁用此特性的能力。可以通过设置[viewport元标签](https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag)中的两个属性其中之一: +因此，开发人员被赋予禁用此特性的能力。可以通过设置[viewport元标签](https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag)中的两个属性其中之一： 1. `user-scalable` 设为 `0` 或 `no` 2. `maximum-scale` 设为 `1`， `1.0`，等 -遗憾的是，开发者们滥用了这一功能，以至于几乎三分之一(32.21%)的移动版网站禁用了这一功能，而苹果(例如 iOS 10)也不再允许网络开发者禁用缩放功能。移动版 Safari 简单 [忽略了这个标记](https://archive.org/details/ios-10-beta-release-notes)。无论如何设置，所有网站都可以在更新的iOS设备上进行缩放。 +遗憾的是，开发者们滥用了这一功能，以至于几乎三分之一(32.21%)的移动版网站禁用了这一功能，而苹果(例如 iOS 10)也不再允许网络开发者禁用缩放功能。移动版Safari直接[忽略了这个标记](https://archive.org/details/ios-10-beta-release-notes)。无论如何设置，所有网站都可以在更新的iOS设备上进行缩放。
@@ -73,7 +73,7 @@ last_updated: 2020-08-12T00:00:00.000Z ### 语言识别 -网络充满了惊人数量的内容。但是，这里有一个问题:世界上有超过1000种不同的语言，而你要找的内容可能不是用你能流利使用的语言书写的。近年来我们在翻译技术方面取得了很大的进步，你可能已经在网络上使用过其中的一种(例如，谷歌翻译)。 +网络充满了惊人数量的内容。但是，这里有一个问题：世界上有超过1000种不同的语言，而你要找的内容可能不是用你能流利使用的语言书写的。近年来我们在翻译技术方面取得了很大的进步，你可能已经在网络上使用过其中的一种(例如，谷歌翻译)。 为了方便使用这个功能，翻译引擎需要知道你的页面是用什么语言编写的。这是通过使用 [lang`属性`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/lang) 来实现的。否则，计算机必须猜测你的页面是用什么语言写的。正如你所想象的那样，这会导致很多错误，特别是当页面使用多种语言时（例如，你的页面导航是英文的，但是发布的内容是日语的）。 @@ -125,7 +125,7 @@ last_updated: 2020-08-12T00:00:00.000Z 图3. 表头级别的流行程度 - +
图3. 表头级别的流行程度
@@ -139,7 +139,7 @@ last_updated: 2020-08-12T00:00:00.000Z Figure 4. 图4.按“main”地标数量划分的页面百分比。 - +
图4.按“main”地标数量划分的页面百分比。
@@ -157,7 +157,7 @@ last_updated: 2020-08-12T00:00:00.000Z 图5.各种HTML语义元素的使用。 - +
图5.各种HTML语义元素的使用。
@@ -169,7 +169,7 @@ last_updated: 2020-08-12T00:00:00.000Z 图6.用于导航的其他HTML元素。 - +
图6.用于导航的其他HTML元素。
@@ -193,7 +193,7 @@ last_updated: 2020-08-12T00:00:00.000Z ### 快捷方式 -快捷方式通过[`aria-keyshortcuts`](https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts)或者[`accesskey`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/accesskey)属性设置， 可以用于以下两种方式之一: +快捷方式通过[`aria-keyshortcuts`](https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts)或者[`accesskey`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/accesskey)属性设置， 可以用于以下两种方式之一： 1. 激活页面上的元素，例如链接或按钮。 @@ -233,7 +233,7 @@ last_updated: 2020-08-12T00:00:00.000Z 图8.页面总数与ARIA属性的百分比。 - +
图8.页面总数与ARIA属性的百分比。
@@ -247,7 +247,7 @@ last_updated: 2020-08-12T00:00:00.000Z 图9.前10名aria角色。 - +
图9.前10名aria角色。
@@ -297,13 +297,13 @@ Tab顺序中几乎总是包含按钮和链接，因此具有极高的可见性 并非只有残障人士有无障碍访问的需求。例如，任何遭受暂时性腕部伤害的人都曾经历过敲击小目标的困难。视力通常会随着年龄的增长而降低，使以小字体书写的文本难以阅读。手指的敏捷性在各个年龄段的人口统计数据中都不尽相同，这对于相当大比例的用户来说，轻敲交互式控件或在移动网站上滑动内容变得更加困难。 -同样，辅助软件不仅适用于残疾人，同时也在改善每个人的日常体验： +同样，辅助软件不仅适用于残障人士，同时也在改善每个人的日常体验： - 语音助手最近在移动设备和家庭中的流行已经证明，对于许多用户而言，使用语音命令控制计算设备既是期望的也是必不可少的。诸如此类的语音命令曾经只是一种辅助功能，但现在已成为主流产品。 - 驾驶员将从屏幕阅读功能中受益，该功能在他们注视路面的同时，还能大声朗读长篇的文字，例如新闻报导。 -- 字幕不仅会被无法收听视频的人观看，还会被想要在喧闹的餐厅或图书馆中观看视频的人观看。 +- 字幕不仅可以被无法收听视频的人观看，还可以被想要在喧闹的餐厅或图书馆中观看视频的人观看。 一旦网站建立后，通常很难在现有网站结构和窗口小部件上改造无障碍可访问性。无障碍可访问性并不是以后可以轻易点缀的东西，它必须是设计和实现过程的一部分。不幸的是，由于缺乏认知或缺乏易于使用的测试工具，许多开发人员并不熟悉所有用户的需求以及他们使用的辅助软件的需求。 -尽管不是结论性的，我们的结果表明在网络的*相当大，但并非实质性* 的部分中可以找到ARIA和可访问性最佳实践（例如使用替代文字）等无障碍标准的使用。从表面上看，这是令人鼓舞的，但是我们怀疑许多积极的趋势是由于某些UI框架的流行。一方面，这令人失望，因为Web开发人员不能仅仅依靠UI框架向其网站提供无障碍化支持。但是，另一方面，令人鼓舞的是，看到UI框架对Web的无障碍化可能有多大的影响。 +尽管不是结论性的，我们的结果表明在网络的*相当大，但并非实质性*的部分中可以找到ARIA和可访问性最佳实践（例如使用替代文字）等无障碍标准的使用。从表面上看，这是令人鼓舞的，但是我们怀疑许多积极的趋势是由于某些UI框架的流行。一方面，这令人失望，因为Web开发人员不能仅仅依靠UI框架向其网站提供无障碍化支持。但是，另一方面，令人鼓舞的是，看到UI框架对Web的无障碍化可能有多大的影响。 我们认为，下一个前沿领域是使可通过UI框架访问的小部件更易于访问。由于许多野外使用的复杂小部件（例如，日历选择器）均来自UI库，所以让这些小部件能够开箱即用将是非常棒的。我们希望下次收集结果时，可以看到更正确实现的复杂ARIA角色的使用在增加-这标志着更复杂的小部件也被无障碍化了。此外，我们希望看到更多无障碍访问的媒体，例如图像和视频，以便所有用户都能享受网络的丰富性。 diff --git a/src/content/zh-CN/2019/performance.md b/src/content/zh-CN/2019/performance.md new file mode 100644 index 00000000000..c21ab66928e --- /dev/null +++ b/src/content/zh-CN/2019/performance.md @@ -0,0 +1,274 @@ +--- +part_number: II +chapter_number: 7 +title: 性能 +description: 2019 Web Almanac网络年鉴的性能章节，包括 首次有内容的绘制 (FCP), 首包字节 (TTFB), 以及首次输入延迟 (FID)。 +authors: [rviscomi] +reviewers: [JMPerez,obto,sergeychernyshev,zeman] +translators: [chengxicn] +discuss: 1762 +results: https://docs.google.com/spreadsheets/d/1zWzFSQ_ygb-gGr1H1BsJCfB7Z89zSIf7GX0UayVEte4/ +queries: 07_Performance +published: 2019-11-11T00:00:00.000Z +last_updated: 2020-03-01T00:00:00.000Z +--- + +## 介绍 + +性能是用户体验的重要组成部分。对于[许多网站](https://wpostats.com/)来说，通过降低页面加载时间来改善用户体验与转化率的提高是一致的。相反，当性能不佳时，用户的转化率就不会像往常那样高，甚至还会在导致沮丧的页面观察到[愤怒点击](https://blog.fullstory.com/rage-clicks-turn-analytics-into-actionable-insights/)。 + +有许多方法可以量化Web性能。最关键的事情是要去量度什么是对用户而言真正重要。然而，`onload` 或者 `DOMContentLoaded` 之类的事件可能不一定反映用户的视觉体验。例如，当加载一个电子邮件客户端，收件箱内容异步加载的时候，它可能会显示一个进度栏。这里的问题在于 `onload` 事件不会等待收件箱异步加载。在这个范例中，对用户而言最重要的加载指标是"收件时间"，而关注`onload`事件可能会产生误导。基于这个原因，本章将研究更现代且普遍适用的绘制，加载和交互性指标，以尝试获得用户对页面的真实体验。 + +性能数据有两种：实验室数据和现场数据。您可能已经听说过这些被称为合成模拟测试和真实用户监控（或RUM）的测试监控方法。在实验室中评估性能可确保在通用条件下测试每个网站，并且例如浏览器，连接速度，物理位置，缓存状态等变量都可以保持一致。这种一致性的保证使各个网站之间都可以互相比较。而另一方面，现场真实的性能评估代表了用户在所有我们在实验室中无法捕捉到的无限的条件组合之下，用户网络体验的真实情况。在本章中，为了理解真实的用户体验，我们将研究现场数据。 + +## 性能的状态 + +几乎所有Web Almanac的章节都是基于[HTTP Archive](https://httparchive.org/)的数据。但是，为了捕获真实用户的Web体验，我们需要一个不同的数据集。在本章中，我们使用[Chrome 用户体验报告](http://bit.ly/chrome-ux-report) (CrUX)，这是一个Google的公共数据集，由与HTTP Archive相同的所有网站组成，汇总了Chrome用户访问这些网站的真实体验。体验分为以下类别： + +- 用户设备外形 + - 桌面 + - 手机 + - 平板 +- 移动用户有效链接类型(ECT) + - 离线 + - 缓慢的2G + - 2G + - 3G + - 4G +- 用户地理位置 + +用户体验按月量度，包括绘制、加载和交互性指标。我们要看的第一个度量是[首次有内容的绘制](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#first_paint_and_first_contentful_paint) (FCP)。这个指标是用户等待在屏幕上显示出有用处的页面内容（例如图像或文本）所花费的时间。然后，我们来看一下加载指标[首包时间](https://developer.mozilla.org/zh-CN/docs/Glossary/%E7%AC%AC%E4%B8%80%E5%AD%97%E8%8A%82%E6%97%B6%E9%97%B4) (TTFB)。这是网页从用户导航到接收到响应的第一个字节所花费的时间的指标。最后，我们要看的最后一个真实用户指标是[首次输入延迟](https://developers.google.com/web/updates/2018/05/first-input-delay) (FID)。这是一个相对较新的度量标准，它表示的是用户体验的部分，而不是加载性能。它测量从用户第一次与页面UI交互到浏览器主线程准备好处理事件的时间。 + +因此，让我们深入研究看看可以找到哪些见解。 + +### 首次有内容的绘制 + +
+ + 图1.网站的快速，中速和慢速FCP性能分布。 + + +
图1.网站的快速，中速和慢速FCP性能分布。
+
+ +在上面的图1中，您可以看到FCP体验是如何在Web上分布的。这个图表从CrUX数据集里面的数百万个网站之中，将分布缩减到1,000个网站，其中每个垂直切片代表一个站点。该图表按快速FCP的百分比排序，快速FCP体验是1秒之内发生的。慢速的体验会在3秒或更长时间内发生，而中速的体验（以前称为“平均”）介于两者之间。在图表的极端情况下，有些网站拥有近100％的快速体验，而有些网站则具有近100％的慢速体验。在这两者之间，兼具快速，中速和慢速性能的网站似乎更倾向于快速或中速，而不是慢速，这很好。 + +

注意：当用户的性能下降时，很难说出原因是什么。网站本身可能设计得很差且效率低下。或可能存在其他环境因素，例如用户的连接速度慢，没有缓存等。因此，在查看该现场数据时，我们更倾向于说用户自身的体验缓慢，而不一定是网站。

+ +为了对网站是否足够**快速**进行分类，我们将使用新的[PageSpeed Insights](https://developers.google.com/speed/docs/insights/v5/about#categories) (PSI) 方法，其中至少有75％的网站FCP体验必须快于1秒。同样，一个足够**慢速**的网站具有25％或更多的FCP体验慢于3秒。我们说一个网站不符合以上两个条件时，它们的性能就是**中速**。 + +
+ + 图2.标有快速，中等或慢速FCP的网站的分布。 + + +
图2.标有快速，中速或慢速FCP的网站的分布。
+
+ +图2的结果表明，只有13％的网站被认为是快速的。这表明仍然有很多改进的空间，但是许多网站都在快速，一致地绘制有意义的内容。三分之二的网站具有中速的FCP性能体验。 + +为了帮助我们了解用户在不同设备上的FCP体验，让我们按尺寸来做个分类。 + +#### 按设备类型看FCP + +
+ + 图3.<em>桌面</em>站点的快速，中速和慢速的FCP性能分布 + + +
图3.桌面 站点的快速，中速和慢速的FCP性能分布。
+
+ +
+ + 图4.移动站点的快速，中速和慢速的FCP性能分布。 + + +
图4.移动站点的快速，中速和慢速的FCP性能分布。
+
+ +在上面的图3和图4中，FCP分布按桌面和移动设备分类。可看到一个细微的区别，就是桌面快速FCP分布的主干似乎比移动用户的分布更凸出一点点。这种视觉上的近似值表明，桌面用户的快速FCP总体比例更高。 为了验证这一点，我们可以将PSI方法应用于每个分布。 + +
+ + 图5.按设备类型划分，被标记为具有快速、中速或慢速FCP的网站分布。 + + +
图5.按设备类型划分，被标记为具有快速、中速或慢速FCP的网站分布。
+
+ +根据PSI的分类，17%的网站为桌面用户提供了快速的FCP体验，而移动用户则为11％。整个分布偏向于桌面体验略快一些，慢速的网站更少，而快速和中等的网站更多。 + +为什么桌面用户在网站上体验快速FCP的比例高于移动用户？毕竟，我们只能根据数据集推测网络的运行情况， 对 _为什么_ 的回答则可能和实际表现不相符合。 但有一种猜测是，桌面用户通过更快更可靠的网络（如WiFi）而不是手机基站连接到因特网。为了帮助回答这个问题，我们还可以探讨ECT对用户体验的影响。 + +#### 按有效连接类型看FCP + +
+ + 图6. 被标记为具有快速、中速或慢速FCP的网站分布，按ECT分类 + + +
图6. 被标记为具有快速、中速或慢速FCP的网站分布，按ECT分类。
+
+ +在上面的图6中，FCP体验按用户的有效连接类型（ECT）分组。有意思的是，有效连接类型（ECT）速度与提供快速FCP的网站百分比间存在相关性。随着有效连接类型（ECT）速度的降低，快速体验的比例接近零。具有14％的站点为使用4G有效连接类型（ECT）的用户提供快速的FCP体验，而19％站点的体验较慢。为使用3G有效连接类型（ECT）的用户提供慢速FCP服务的网站比例为61％，为2G有效连接类型（ECT）的用户提供慢速FCP服务的网站比例为90％，为缓慢2G有效连接类型（ECT）的用户提供慢速FCP服务的网站比例为99％。这些结果表明，很少有网站对比4G慢的用户持续提供快速FCP服务。 + +#### 按地理位置看FCP + +
+ + 图7.标有快速，中速或慢速FCP的网站分布，按地理位置细分。 + + +
图7.标有快速，中速或慢速FCP的网站分布，按地理位置细分。
+
+ +最后，我们可以按用户的地理位置对FCP进行切片。上面的图表显示了拥有最多独立网站数量的前23个地理位置，这是开放网络总体流行程度的指标。美国的网络用户访问的独立网站最多，数量为1,211,002。地理位置按具有足够快速的FCP体验的网站百分比排序。排在首位的是三个[Asia-Pacific](https://en.wikipedia.org/wiki/Asia-Pacific) (APAC) 地理位置：韩国，台湾和日本。这可以通过在这些地区具有极高的[快速网络连接速度](https://en.wikipedia.org/wiki/List_of_countries_by_Internet_connection_speeds)。韩国有36％的网站符合快速FCP标准，只有7％被评为慢速FCP。回想一下，快速/中速/慢速网站的全球分布约为13/66/20，这使韩国区域成为一个明显积极的异常值。 + +其他亚太地区区域则讲述了一个不同的故事。泰国，越南，印度尼西亚和印度都拥有不到10％的快速网站。这些地理位置的慢速网站比例也比韩国高出三倍以上。 + +### 首包时间(TTFB) + +[首包时间](https://web.dev/time-to-first-byte) (TTFB)是页面从用户导航到接收到响应的第一个字节为止花费时间的度量。 + +
+ + 页面导航中Navigation Timing API的事件图 + + +
图8.页面导航中Navigation Timing API的事件图。
+
+ +为了帮助解释TTFB及其影响因素，让我们借鉴一份[Navigation Timing API 规范](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API)中的图表。在上面的图8中，TTFB是从`开始时间 startTime` 到 `响应时间 responseStart`，包括介于两者之间的所有内容：`卸载 unload`，`重定向 redirects`，`AppCache`，`DNS`，`SSL`，`TCP`，以及服务器处理请求的时间。在这些条件下，我们来看看这一指标用户的体验。 + +
+ + 图9.网站的快速，中速和慢速TTFB性能分布。 + + +
图9.网站的快速，中速和慢速TTFB性能分布。
+
+ +与图1中的FCP图表相似，这是按快速TTFB排序的1,000个代表性样本的视图。[快速 TTFB](https://developers.google.com/speed/docs/insights/Server#recommendations)是在0.2秒（200毫秒）内发生的，而慢速TTFB在1秒或更长时间内发生的，两者之间就属于中速。 + +从快速比例的曲线来看，其形状与FCP完全不同。很少有网站的快速TTFB高于75％，而超过一半的网站百分比低于25％。 + +让我们从上面用于FCP的PSI方法中获得灵感，将TTFB速度标签应用于每个网站。如果网站的快速TTFB达到75％或更高的用户体验，则标记为**快速**。否则，如果它为25％或更多的用户体验提供**慢速**用户体验，则被标为慢速。如果这些条件都不适用，就被标为 **中速** 。 + +
+ + 图10.标有快速，中速或慢速TTFB的网站分布。 + + +
图10.标有快速，中速或慢速TTFB的网站分布。
+
+ +42%的网站TTFB体验缓慢。这很值得注意，因为TTFB阻止了后续所有其他的性能指标。 _按照定义，如果TTFB花费的时间超过1秒，则用户可能无法体验快速的FCP。_ + +#### 按地理位置看TTFB + +
+ + 图11.标有快速，中速或慢速TTFB的网站分布，按地理位置细分。 + + +
图11.标有快速，中速或慢速TTFB的网站分布，按地理位置细分。
+
+ +现在，我们来看为不同地理位置的用户提供快速TTFB的网站百分比。韩国、台湾和日本等亚太地区的地理位置仍然优于其他地区的用户。但没有一个区域拥有15％以上的快速TTFB网站。 例如，印度的快速TTFB网站不到1％，大约79％是慢速TTFB网站。 + +### 首次输入延迟 + +我们将要查看的最后一个字段指标是[首次输入延迟](https://developers.google.com/web/updates/2018/05/first-input-delay) (FID)。此度量标准表示从用户第一次与页面UI交互到浏览器主线程准备处理事件的时间。请注意，这不包括应用程序实际花费在处理输入上的时间。最差的情况时，缓慢的FID会导致页面显示无响应，并给用户带来令人沮丧的体验。 + +让我们从定义一些阈值开始。根据新的PSI方法，**快速**FID是在100毫秒内发生的。这为应用程序提供了足够的时间来处理输入事件，并在瞬时的感觉时间内向用户提供反馈。一个**慢速**FID在300毫秒或更长时间内发生的。 介于两者之间的一切成为**中速**。 + +
+ + 图12.网站的快速，中速和慢速FID性能分布。 + + +
图12.网站的快速，中速和慢速FID性能分布。
+
+ +这样你就应该明白了。此图显示了网站的快速，中速和慢速FID体验的分布。这与以前的FCP和TTFB图表截然不同。(分别参见[图 1](#fig1)和[图 9](#fig9))。快速FID曲线从100％缓慢下降到75％，然后急速下降。 大多数网站的绝大多数FID体验都很快。 + +
+ + 图13.标有快速，中速或慢速TTFB的网站的分布。 + + +
图13.标有快速，中速或慢速TTFB的网站的分布。
+
+ +将网站标记为具有足够快速或慢速FID的PSI方法与FCP略有不同。为了使网站**快速**，95%的FID体验必须快速。如果5％的FID体验很慢，则该网站为**慢速**。所有其他的体验均为“中速”。 + +与以前的指标相比，FID总体表现的分布更倾向于快速和中速的体验，而不是慢速的。40％的网站具有快速FID，只有15％的网站具有慢速FID。FID的本质是一种交互性指标-与受网络速度限制的加载指标相反-带来了一种完全不同的性能表现方式。 + +#### 按设备类型看FID + +
+ + 图14.快速，中度和慢速FID性能'桌面'站点的分布 + + +
图14.快速，中度和慢速FID性能桌面站点的分布
+
+ +
+ + 图15.'移动'网站的快速，中速和慢速FID性能分布。 + + +
图15.移动网站的快速，中速和慢速FID性能分布。
+
+ +通过按设备划分FID，我们可以清楚地看到两个非常不同的故事。桌面用户几乎一直都在享受快速FID。当然，有些网站有时会带来缓慢的体验，但基本上都是快的。另一方面，移动用户似乎拥有以下两种体验之一：相当快（但不如桌面用户那么高频）和几乎从来不快。后者只有在尾部10%的站点，用户才会体验到，但这仍然是一个很大的差异。 + +
+ + 图16.标有快速，中速或慢速FID的网站分布，按设备类型细分。 + + +
图16.标有快速，中速或慢速FID的网站分布，按设备类型细分。
+
+ +当我们把PSI标签应用于桌面和移动体验时，两者之间的区别变得非常清晰。桌面用户的网站FID 82％具有快速体验，而慢速为5％。对于移动体验，26％的网站是快速的，而22％的是慢速的。设备形状因素在诸如FID之类的交互性指标的性能中起着重要作用。 + +#### 按有效链接类型看FID + +
+ + 图17.按ECT划分为具有快速，中速或慢速FID的网站分布。 + + +
图17. 按ECT划分为具有快速，中速或慢速FID的网站分布。
+
+ +从表面上看，FID似乎主要由CPU速度驱动。可以合理地假设如果设备越慢，那么当用户尝试与网页进行交互时设备繁忙的可能性就会越大，对吧？ + +上面的用户有效连接类型（ECT）结果似乎表明连接速度和FID性能之间存在相关性。随着用户有效连接速度的降低，他们体验快速FID的网站百分比也随之降低：4G有效连接类型（ECT）的用户的快速FID网站比例为41％，3G用户的快速FID的网站比例为22％，2G用户为19％，慢速2G用户为15％。 + +#### 按地理位置看FID + +
+ + 图18.标有快速，中速或慢速FID的网站分布，按地理位置细分。 + + +
图18.标有快速，中速或慢速FID的网站分布，按地理位置细分。
+
+ +在按地区划分的FID中，韩国再次领先于其他所有地区。但是排名靠前的地理位置有了一些新面孔：紧随其后的有澳大利亚，美国和加拿大，它们超过50％的网站具有快速FID。 + +与其他同地理位置相关的结果一样，有太多可能的因素在影响着用户体验。例如，也许较富裕的地区特权更高，因为可以负担得起更快的网络基础设施，同时这里的居民也可能有更多的钱可以花在台式机以及高端手机上。 + +## 结论 + +量化网页加载的速度是一门不完美的科学，无法用单个指标来表示。诸如`onload`之类的常规指标可能会通过测量用户体验中无关或不可察觉的部分完全得出错误的结论。用户感知的指标（如FCP和FID）可以更忠实地传达用户的看法和感受。即便如此，这两个指标都无法孤立地得出总体页面加载速度是快还是慢的结论。只有整体地看待许多指标，我们才能开始了解单个站点的性能和网络状态。 + +本章中提供的数据表明，要实现为快速网站设定的目标仍有大量工作要做。 某些外形尺寸、有效的连接类型和地理位置确实与更好的用户体验相关，但是我们不能忘记组合中性能差的那部分人口统计也在其中。在许多情况下Web平台用于商业，通过提高转化率来赚更多钱会是提升网站速度的巨大驱动力。 归根结底，对于所有网站而言，性能都是要为用户提供积极的体验，而不应阻碍、挫败或激怒用户。 + +随着网络的年纪又长了一岁，我们衡量用户体验的能力也逐步提高，我期待开发人员能够访问和捕获更多整体用户体验的指标。FCP在向用户展示有用内容上还处于非常初期的阶段，而诸如[最大内容绘制](https://web.dev/largest-contentful-paint) (LCP)之类的新指标正在涌现，提高了我们对页面加载感知的能见度。而[不稳定布局API](https://web.dev/layout-instability-api)也给我们了超越页面加载之外的视角，一窥用户对访问性能的沮丧体验。 + +配备了这些新指标后，2020年的网络将变得更加透明，更易于理解，并为开发人员创造有利条件来产生更有意义的进步，提升网络性能并为用户带来积极的体验。 diff --git a/src/templates/zh-CN/2019/base.html b/src/templates/zh-CN/2019/base.html index 3aaf2f62d95..d64baf15927 100644 --- a/src/templates/zh-CN/2019/base.html +++ b/src/templates/zh-CN/2019/base.html @@ -33,7 +33,7 @@ {% block contributors_title %}贡献者{% endblock %} {% block methodology_title %}方法论{% endblock %} -{% block part %}部{% endblock %} +{% block part %}部分{% endblock %} {% block chapter %}章{% endblock %} {% block start_exploring %}开始探索{% endblock %} @@ -115,7 +115,7 @@ 在这份报告中有太需要学习的东西，所以开始探索并与社区分享你的见解吧，这样我们就可以共同推进我们对网络状态的理解。

-

— Rick Viscomi, Web Almanac网络年鉴的创造者

+

— Rick Viscomi, Web Almanac网络年鉴的创建者

{% endblock %} {% block appendix %}附录{% endblock %} diff --git a/src/templates/zh-CN/2019/featured_chapters.html b/src/templates/zh-CN/2019/featured_chapters.html index 9deabd48c6a..50179ae0c3a 100644 --- a/src/templates/zh-CN/2019/featured_chapters.html +++ b/src/templates/zh-CN/2019/featured_chapters.html @@ -1,4 +1,4 @@ -{%- set featured_chapter = ("accessibility","accessibility") | random %}{# Below is the full set of chapters. If all are translated then replace above line with this one. Until then, add chapters to above first line as they are translated (min of two chapters so repeat if only one chapter) {%- set featured_chapter = ("accessibility","caching","cdn","cms","compression","css","ecommerce","fonts","http2","javascript","markup","media","mobile-web","page-weight","performance","pwa","resource-hints","security","seo","third-parties") | random %}#} +{%- set featured_chapter = ("accessibility","performance") | random %}{# Below is the full set of chapters. If all are translated then replace above line with this one. Until then, add chapters to above first line as they are translated (min of two chapters so repeat if only one chapter) {%- set featured_chapter = ("accessibility","caching","cdn","cms","compression","css","ecommerce","fonts","http2","javascript","markup","media","mobile-web","page-weight","performance","pwa","resource-hints","security","seo","third-parties") | random %}#} {%- if featured_chapter == "javascript" %} {%- set featured_chapter_name = "JavaScript" %} {%- set featured_chapter_quote = "JavaScript是我们发送给浏览器的最昂贵的资源;必须下载、解析、编译，最后执行。尽管浏览器大大减少了解析和编译脚本的时间，但在web页面处理JavaScript时，下载和执行已经成为最昂贵的阶段。" %} @@ -25,7 +25,7 @@ {%- set featured_chapter_stats = {"stat1":"74.9%","label1":"第三方字体请求使用谷歌体","stat2":"29%","label2":"包含谷歌字体样式表链接的页面的百分比","stat3":"718","label3":"单个页面上的大多数字体请求"} %} {%- elif featured_chapter == "performance" %} {%- set featured_chapter_name = "性能" %} - {%- set featured_chapter_quote = "性能是用户体验的本质部分。对于许多网站来说，通过加快页面加载时间来改善用户体验与提高转化率是一致的。相反，当性能较差时，用户不会经常转换，甚至会在沮丧时愤怒的点击页面。" %} + {%- set featured_chapter_quote = "性能是用户体验的重要组成部分。对于许多网站来说，通过降低页面加载时间来改善用户体验与转化率的提高是一致的。相反，当性能不佳时，用户的转化率就不会像往常那样高，甚至还会在导致沮丧的页面观察到愤怒点击。" %} {%- set featured_chapter_stats = {"stat1":"13%","label1":"有快速FCP的站点","stat2":"42%","label2":"有缓慢TTFB的站点","stat3":"40%","label3":"有快速FID的站点"} %} {%- elif featured_chapter == "security" %} {%- set featured_chapter_name = "安全" %} @@ -33,7 +33,7 @@ {%- set featured_chapter_stats = {"stat1":"79%","label1":"Sites using HTTPS","stat2":"41%","label2":"使用TLSv1.3的站点","stat3":"4.43%","label3":"使用CSP的站点"} %} {%- elif featured_chapter == "accessibility" %} {%- set featured_chapter_name = "无障碍可访问性" %} - {%- set featured_chapter_quote = "互联网的无障碍可访问性对一个包容和公平的社会至关重要。随着我们的社会生活和工作生活越来越多地转移到网络世界，残疾人能够无障碍地参与所有在线互动就变得更加重要了。正如建筑设计师可以创建或省略无障碍功能，例如轮椅坡道，web开发人员可以帮助或阻碍用户依赖的辅助技术。" %} + {%- set featured_chapter_quote = "互联网的无障碍可访问性对一个包容和公平的社会至关重要。随着我们的社会生活和工作生活越来越多地转移到网络世界，残障人士能够无障碍地参与所有在线互动就变得更加重要了。正如建筑设计师可以创建或省略无障碍功能，例如轮椅坡道，web开发人员可以帮助或阻碍用户依赖的辅助技术。" %} {%- set featured_chapter_stats = {"stat1":"22%","label1":"使用充分的色彩对比的网站","stat2":"50%","label2":"缺少图像alt属性的网站","stat3":"14%","label3":"使用跳过链接的网站"} %} {%- elif featured_chapter == "seo" %} {%- set featured_chapter_name = "SEO" %}