跳过导航

方法论

概览

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

Web Almanac 的任务是让主题专家提供情境化的见解,从而使Web社区更容易访问HTTP Archive的数据仓库。你可以把它看作为成一个关于web状态的年度知识库,2019是它的第一版。

2019年版的网络年鉴Web Almanac由四大支柱组成:内容、体验、发布和分发。书面报告的每一部分都是一个支柱,由探究其不同方面的章节组成。例如,第二部分表示用户体验,并包括性能、安全性、可访问性、SEO、PWA和移动Web章节。

关于数据集

HTTP Archive 数据集每月持续更新新的数据。对于2019年版的Web Almanac,除非本章另有说明,否则所有的指标都来自于2019年7月的抓取。这些结果可以用 2019_07_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 结果

网站

数据集中有 5,790,700 个网站。 其中,移动网站5,297,442 个,桌面网站4,371,973个。大多数网站都包括在移动和桌面子集中。

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

Web Almanac使用的2019年七月的HTTP Archive爬取,是利用了最新可用的Chrome用户体验报告版本 2019 5月 (201905) 作为它的网站列表。 该数据集于2019年6月11日发布,收集了Chrome用户在5月份访问的网站。

由于资源限制, 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/75.0.3770.100 Safari/537.36 PTST/190704.170731 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/190628.140653
位置 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 75。

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

HTTP Archive 的 WebPageTest 私有实例和最新的公有版本保持一致,使用 自定义指标来增强。 这些是测试结尾时在每个网站上评估测试的JavaScript片段almanac.js 。自定义指标包括一些其他情况下无法计算的指标,例如那些依赖于DOM状态的指标。

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

Lighthouse

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

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

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

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

* 请注意,Lighthouse通常的配置是CPU降速4倍,但是因为一个WebPageTest的bug , 在当时的测试是降速1倍。

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

Wappalyzer

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

HTTP Archive 为所有的页面运行最新版本的 Wappalyzer。 截止2019年7月 Web Almanac 使用5.8.3 版本 的Wappalyzer。

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

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

Chrome UX Report

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

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

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

第三方资源网络

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

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

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

Rework CSS

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

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

分析过程

Web Almanac网络年鉴花了大约一年的时间来计划和执行,与来自网络社区的许多贡献者进行协调。本节描述我们为什么选择您在Web Almanac网络年鉴中看到的指标,以及如何查询和解释它们。

头脑风暴

Web Almanac网络年鉴的想法始于2019年1月,当时是一个HTTP Archive论坛的帖子。 描述计划并召集支持。在2019年3月我们建立了一个公共头脑风暴文档 网络社区的任何人都可以在此写下关于章节或指标的想法。这是一个至关重要的步骤,以确保我们关注于对社区有意义的事情,并在这个过程中包含各种各样的声音。

经过头脑风暴,20个章节被固化确定,我们开始 分配主题专家和对应的审稿人。 这个过程有一些固有的偏见,因为要让志愿者致力于这样规模的项目是一个挑战。因此,许多贡献者是同一专业圈子的成员。Web Almanac网络年鉴的未来版本的一个明确目标是鼓励更多未被充分代表和异质的声音作为作者和审稿人。

我们用了2019年5月到6月的时间将成员与章节对应,并归纳他们的建议以最终确定组成每个章节的各个度量标准。

分析

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

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

从2019年8月开始,数据分析师开始编写查询来提取每个指标的结果。总计 431个查询 是手动编写的! 你可以在这个项目的Github仓库的章节 sql/2019 的目录下浏览所有的查询代码。

诠释

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

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

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

展望未来

我们希望2019年版的 Web Almanac 网络年鉴可以成为一个网络社区内部反省和承诺积极变革的年度传统的开始。我们付出了巨大的努力才走到今日,这多亏了许多有奉献精神的 贡献者。 我们希望尽可能多地利用这些工作,使未来的版本更加精简。

如果您对2020年版的Web Almanac网络年鉴有兴趣,请填写 感兴趣表格. 我们非常希望倾听你的想法,让这个项目变得更好!