跳过导航

方法论

概述

Web Almanac 是一个由 HTTP Archive 组织的项目. HTTP Archive 于2010年由Steve Souders创立,其任务是跟踪web是如何构建的。它按月评估数以百万计的网页,并使它的TB级别的元数据可供BigQuery分析。

Web Almanac网络年鉴的使命是成为一个关于网络状态的年度公共知识库。我们的目标是通过让主题专家提供符合实际情况的见解,使HTTP Archive的数据仓库更容易被Web社区使用。

2020年版 Web Almanac 分为四个部分:内容、体验、发布和分发。在每个部分中,有几个章节从不同的角度探讨其总体主题。例如,第二部分在性能、安全和可访问性等章节中探讨了用户体验的不同角度。

关于数据集

HTTP Archive 数据集每月持续更新新的数据。对于2020年版的Web Almanac,除非本章另有说明,否则所有的指标都来自于2020年8月的抓取。这些结果可以用2020_08_01为前缀在BigQuery公开的查询

Web Almanac中列出的所有指标都可以通过BigQuery上的数据集公开重现。您可以在我们的GitHub 仓库浏览我们的所有章节使用的查询。

请注意,其中一些查询相当大,如果你自己运行可能比较昂贵 ,因为BigQuery是按TB收费。为了帮助控制你的开支,请看 Tim Kadlec的文章 在不破产的情况下来使用BigQuery

例如,要了解每个桌面和移动页面的JavaScript字节数的中位数,请参阅 01_01b.sql:

#standardSQL
# 01_01b: Distribution of JS bytes by client
SELECT
  percentile,
  _TABLE_SUFFIX AS client,
  APPROX_QUANTILES(ROUND(bytesJs / 1024, 2), 1000)[OFFSET(percentile * 10)] AS js_kbytes
FROM
  `httparchive.summary_pages.2019_07_01_*`,
  UNNEST([10, 25, 50, 75, 90]) AS percentile
GROUP BY
  percentile,
  client
ORDER BY
  percentile,
  client

每个指标的结果都可以在章节对应的电子表格中公开查看,例如JavaScript 结果。 滚动到每一章的底部,可以看到它们的查询、结果和读者评论的链接。

网站

数据集中有 7,546,709 个网站。其中,移动网站 6,347,919 个,桌面网站 5,593,642 个。大多数网站都包括在移动和桌面子集中。

HTTP Archive 从 Chrome用户体验报告中获取其网站的URL。Chrome用户体验报告是谷歌的公共数据集,汇集了数百万Chrome用户活跃访问的网站的用户体验。这给了我们一个最新的网站列表,并反映了真实的web使用情况。Chrome用户体验报告数据集包括一个因子系数维度,我们使用它来获取桌面或移动用户访问的所有网站。

Web Almanac使用的2020年8月的HTTP Archive爬取,是利用了最新可用的Chrome用户体验报告版本作为它的网站列表。 202006数据集于2020年7月14日发布,收集了Chrome用户在6月份访问的网站。

2019 Web Almanac中的网站相比,被分析的网站数量有20-30%的增长。 Paul Calvano 在他的 2020年Web的增长 文章中分析了这一增长。

由于资源限制, HTTP Archive 只能对每个网站测试一个在Chrome UX报告之中的页面。为了兼顾这一点,只包括主页。请注意,这将引入一些偏见的结果,因为一个主页不一定代表整个网站。

HTTP Archive 也被认为是一个实验室测试工具,这意味着它从数据中心测试网站,而不是从真实的用户体验收集数据。因此,所有网站主页都是在一个处于登出的空缓存状态进行测试的,这也意味着不能反映出真实用户是如何访问的。

指标

HTTP Archive 收集了数以千计关于如何构建web的指标。它包括一些基本指标,如每个页面的字节数、页面是否通过HTTPS加载,以及单个请求和响应头。这些指标中的大多数是由WebPageTest提供, 它作为每个网站的测试运行工具。

其他测试工具用于提供关于页面的更高级的指标。 例如, Lighthouse 被用来对页面进行审计,以分析它在可访问性和SEO等方面的质量。下面的 工具 小节将更详细地介绍这些工具。

为了解决实验室数据集的一些固有限制,Web Almanac 还利用了 Chrome UX Report 来度量用户体验,特别是在Web性能方面。

有些指标是完全无法达到的。例如,我们不一定有能力检测用于创建网站的工具。如果一个网站是使用create-react-app构建的,我们可以看出它使用的是React框架,但不一定是使用了特定的构建工具。除非这些工具在网站代码中留下可探测的指纹,否则我们无法测量它们的使用情况。

其他的指标不一定是不可能度量的,但是是具有挑战性的或者不可靠的。例如,web设计的某些方面本质上是可视化的,可能很难量化,比如页面是否有插入式模态对话框。

工具

Web Almanac 是在以下开源工具的帮助下实现的。

WebPageTest

WebPageTest 是一个卓越的web性能测试工具,同时是HTTP Archive的骨干。我们使用一个WebPageTest的私有实例 ,携带着私有的测试UA,它是测试每个web页面的实际浏览器。桌面和移动网站在不同的配置下进行测试:

配置 桌面 移动
设备 Linux VM 模拟 Moto G4
用户代理UA Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36 PTST/200805.230825 Mozilla/5.0 (Linux; Android 6.0.1; Moto G (4) Build/MPJ24.139-64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.146 Mobile Safari/537.36 PTST/200815.130813
位置 Redwood City, California, USA
The Dalles, Oregon, USA
Redwood City, California, USA
The Dalles, Oregon, USA
连接 有线 (5/1 Mbps 28ms RTT) 3G (1.600/0.768 Mbps 300ms RTT)
可视区域Viewport 1024 x 768px 512 x 360px

桌面网站在Linux虚拟机的桌面Chrome环境中运行。网络速度等于有线连接。

移动网站在模拟的Moto G4设备上运行,网络速度相当于3G连接。注意,模拟的移动用户代理标识为Chrome 65,但实际的浏览器是Chrome 84。

测试是从两个位置发起的: 美国加利福尼亚和俄勒冈。HTTP Archive 维护它自己的测试代理硬件,位于加利福尼亚的互联网档案 数据中心。另外的测试代理是根据需要,添加了谷歌云的位于俄勒冈的 us-west-1 。

HTTP Archive 的 WebPageTest 私有实例和最新的公有版本保持一致,使用 自定义指标来增强。这些是测试结尾时在每个网站上评估测试的JavaScript片段。感谢众多数据分析师的 贡献 , 特别是Tony McCreath艰巨的努力, 2020年版的Web Almanac 网络年鉴极大地扩展了HTTP Archive的测试基础架构的功能,增加了3000多行新代码。

每个测试的结果都被保存为 HAR 文件,这是一个JSON格式的存档文件,包含网页的元数据。

Lighthouse

Lighthouse 是一个谷歌做的自动化的网站质量保证工具。它审核web页面以确保它们不包含阻碍用户体验的资源,如未优化的图像和不可访问的内容。

HTTP Archive 为所有的移动网页运行最新版本的Lighthouse — 因为资源的限制问题并没有包括桌面版本的页面。 在2019年八月的爬取中, HTTP Archive 使用了 6.2.0 版本的Lighthouse。

Lighthouse 在 WebPageTest中运行自己独特的测试,它有自己的配置文件:

配置
CPU 降速 1x/4x
下载吞吐 1.6 Mbps
上传吞吐 0.768 Mbps
RTT 150 ms

如需了解更多关于Lighthouse以及HTTP Archive中可用的审计,请参考 Lighthouse 开发者文档.

Wappalyzer

Wappalyzer 是用于检测web页面使用的技术的工具。 有 64 类技术被用于测试, 从JavaScript框架到CMS平台,甚至加密货币挖掘。支持的技术超过1400种。

HTTP Archive 为所有的页面运行最新版本的 Wappalyzer。 截止2020年8月 Web Almanac 使用 6.2.0 version 的Wappalyzer。

Wappalyzer为很多章节提供动力,它分析开发人员工具的流行程度,例如 WordPress,Bootstrap,和jQuery。比如 电商CMS 章节非常依赖于Wappalyzer探测出的各自的 电商CMS 类别。

所有的检测工具,包括Wappalyzer都有其局限性。他们的结果的有效性总是取决于他们的检测机制有多准确。Web Almanac网络年鉴将在使用Wappalyzer的每一章中添加注释,但由于特定的原因,其分析可能不准确。

Chrome用户体验报告

The Chrome用户体验报告 是Chrome真实用户体验的公共数据集。体验是根据网站的来源分类的,例如https://www.example.com。数据集包括用户体验指标的分布,如绘制、加载、交互和布局稳定性。除了按月分组,体验也可以按维度划分,比如国家地理位置、外形因素(桌面、手机、平板电脑)和网络连接类型(4G、3G等)。

Web Almanac网络年鉴参考了Chrome UX报告中的真实用户体验数据,使用了2020年7 8月的数据集 (202008)。

关于数据集,你可以在这里了解更多:web.dev上的在BigQuery使用Chrome 用户体验报告 指南。

第三方资源网络

第三方资源网络 是一个研究工程,由 Patrick Hulce创立,他是2019 第三方资源 章节的作者,它使用HTTP Archive和Lighthouse数据来识别和分析第三方资源对网络的影响。

如果域名出现在至少50个独立的页面,则会被认为是一个第三方提供者,该项目还将提供商按其各自的服务分类,如广告、分析和社交。

Web Almanac网络年鉴中的一些章节使用了来自这个数据集的域名和类别来理解第三方的影响。

Rework CSS

Rework CSS 是一个基于JavaScript的CSS解析器。它采用整个样式表并生成一个json编码的对象,以区分每个样式规则、选择器、指令和值。

CSS 章节,这个特殊用途的工具显著地提高了数据库中许多度量标准的准确性。所有外部样式表中的CSS和每个页面的内联样式块都被解析和查询,让这个分析工作成为可能。阅读这段 来了解更多关于它如何同BigQuery上的HTTP Archive数据集来集成。

Rework Utils

今年的CSS 章节是由 Lea Verou 领导的,对 CSS 的状态进行了显著的更加详细的研究,分布在 100+ 个查询。作为对比,这比2019年的查询多了2.5倍。为了使这种规模的分析可行, Lea 开源了 Rework Utils。这些实用程序通过提供有用的脚本来更轻松地提取CSS见解,将Rework的JSON数据提升到了一个新的水平。你在CSS章节中看到的大部分统计数据都是由这些脚本提供的。

Parsel

Parsel 是一个CSS选择器解析器和特异性计算器, 最初是由 CSS 章节带头人 Lea Verou撰写,并且作为一个独立的库进行开源。它被广泛用于所有与选择器和特异性相关的CSS指标。

Analytical process

在一百多位网络社区贡献者 的协调下, Web Almanac花了大约一年的时间来规划和执行。本节介绍了我们为什么要选择Web Almanac的章节,如何查询它们的指标,以及如何诠释它们。

计划

2020年网络年鉴于2020年6月启动,由于与COVID-19和社会正义抗议活动有关的动荡,时间晚于2019年的时间表。2020年的这些和其他事件是整个制作过程中的一股暗流,除了像这样一个快节奏的项目的压力之外,也给我们的贡献者带来了很多额外的压力。

正如我们在 去年的方法论指出的那样:

Web Almanac网络年鉴未来版本的一个明确目标是鼓励更多未被充分代表和异质的声音作为作者和审稿者。

为此,今年我们对寻找和选择作者的方式进行了系统的改革:

  • 以前的作者特别不鼓励再写,以便为不同的观点腾出空间。
  • 所有支持2020年作者的人都被要求特别注意,不要提名那些看法和想法都一样的人。
  • 许多2019年的作者都是谷歌员工,今年我们试图从更广泛的网络社区中获得更平衡的观点。我们认为,Web Almanac 中的声音应该是社区本身的反映,而不是向任何特定的公司倾斜,以避免变成回音壁。
  • 项目牵头人审查了所有的作者提名,并努力挑选能够带来新观点和扩大社区中代表性不足群体的声音的作者。

我们希望今后能对这一进程进行改进,以确保 Web Almanac 网络年鉴成为一个更加多样化和更具包容性的项目,供稿人来自各种背景。

最后,在2020年7月,经过一轮轮的头脑风暴和提名,22个章节被固定,我们为每个章节组建了内容团队,负责撰写、审核和分析。

分析

在2020的7月和8月, 随着指标和章节的列表稳定下来,数据分析师对指标的可行性进行了筛选。在一些情况下,自定义指标 需要被创建来填补我们分析能力的空白。

2020年8月, HTTP Archive 数据管道爬取了数百万网站,收集到的元数据用于了Web Almanac网络年鉴。

数据分析者开始编写查询来提取每个指标的结果。总计数百个查询是手动编写的! 你可以在这个项目的Github仓库的章节 query repository的目录下浏览所有的查询代码。

诠释

作者与分析者一起正确地解释结果并得出适当的结论。当作者撰写他们各自的章节时,他们利用这些统计数据得出支持他们的web状态理论的框架。审稿者与作者一起工作,以确保他们的分析在技术上的正确性。

为了让读者更容易理解结果,web开发人员和分析人员创建了数据可视化嵌入到本章中。为了使结论更容易理解,一些可视化方法被简化了。例如它没有显示一个完整的分布柱状图,而是只显示了少量的百分比。除非另有说明,所有分布都是用百分位数汇总的,特别是中位数(第50的百分位数),而不是平均值。

最后,编辑修改了章节,以纠正简单的语法错误,确保阅读体验的一致性。

展望未来

2020年版的 Web Almanac 是第二个版本,我们希望继续作为网络社区的年度传统,进行反思,并致力于积极变革。我们付出了巨大的努力才走到今日,这多亏了许多有奉献精神的 贡献者 我们希望尽可能多地利用这些工作,使未来的版本更加精简。

如果您对2021年版的Web Almanac网络年鉴有兴趣,请填写 感兴趣表格。让我们一起努力,追踪网络的状态!