ナビゲーションをスキップ

方法論

概要

Web Almanacは、HTTP Archiveによって組織されたプロジェクトです。HTTP Archiveは、2010年にSteve Soudersによってウェブがどのように構築されているかを追跡する使命で始まりました。月に数百万のウェブページの構成を評価し、そのテラバイトのメタデータをBigQueryで分析用に提供しています。

The Web Almanacの使命は、Webの現状に関する公共知識の年間リポジトリになることです。我々の目標は、HTTP ArchiveのデータウェアハウスをWebコミュニティにとってさらにアクセスしやすくすることであり、専門家がコンテキストに沿った洞察を提供することでこれを実現します。

2022年版のWeb Almanacは、コンテンツ、エクスペリエンス、パブリッシング、ディストリビューションの4つの部分に分かれています。それぞれの部分では、複数の章がさまざまな角度からその全体的なテーマを探ります。たとえば、第2部では、パフォーマンス、セキュリティ、アクセシビリティの章などでユーザーエクスペリエンスを異なる視点から探求しています。

データセットについて

HTTP Archiveのデータセットは、毎月新しいデータで継続的に更新されています。2022年版のWeb Almanacでは、とくに章で記載がない限り、すべての指標は2022年6月のクロールから取得されました。これらの結果は、BigQuery上で2022_06_01というプレフィックスが付いたテーブルで公開クエリが可能です。

Web Almanacで提示されているすべての指標は、BigQuery上のデータセットを使用して公開再現可能です。すべての章で使用されたクエリは、GitHubリポジトリで閲覧できます。

これらのクエリの一部は非常に大きく、自分で実行する場合、高額になる可能性がありますのでご注意ください。費用を抑える方法については、Tim Kadlec氏の投稿Using BigQuery Without Breaking the Bankを参照してください。

たとえば、デスクトップおよびモバイルページごとのJavaScriptの中央値のバイト数を理解するには、bytes_2022.sqlを参照してください。

#standardSQL
# Sum of JS request bytes per page (2022)
SELECT
  percentile,
  _TABLE_SUFFIX AS client,
  APPROX_QUANTILES(bytesJs / 1024, 1000)[OFFSET(percentile * 10)] AS js_kilobytes
FROM
  `httparchive.summary_pages.2022_06_01_*`,
  UNNEST([10, 25, 50, 75, 90, 100]) AS percentile
GROUP BY
  percentile,
  client
ORDER BY
  client,
  percentile

Results for each metric are publicly viewable in chapter-specific spreadsheets, for example JavaScript results. Links to the raw results and queries are available at the bottom of each chapter. Metric-specific results and queries are also linked directly from each figure.

Websites

データセットには8,360,179のウェブサイトが含まれています。そのうち、7,905,956はモバイルウェブサイトで、5,428,235はデスクトップウェブサイトです。ほとんどのウェブサイトは、モバイルおよびデスクトップの両方のサブセットに含まれています。

HTTP Archiveは、Chrome UX ReportからウェブサイトのURLを取得しています。Chrome UX Reportは、Googleによる公開データセットで、Chromeユーザーが積極的に訪問している何百万ものウェブサイトにおけるユーザーエクスペリエンスを集約しています。これにより、最新の実際のWeb使用状況を反映したウェブサイトのリストを入手できます。Chrome UX Reportのデータセットにはフォームファクターの次元が含まれており、これを使用してデスクトップまたはモバイルユーザーがアクセスしたすべてのウェブサイトを取得しています。

Web Almanacで使用された2022年6月のHTTP Archiveクロールは、もっとも最近利用可能なChrome UX Reportリリースをウェブサイトのリストとして使用しました。202204のデータセットは2022年5月3日にリリースされ、4月にChromeユーザーが訪問したウェブサイトをキャプチャしています。

リソースの制約により、HTTP Archiveは以前、Chrome UX Reportの各ウェブサイトから1ページしかテストできず、ホームページのみが含まれていました。ホームページは必ずしもウェブサイト全体を代表しているわけではないため、結果にバイアスがかかる可能性があることに注意してください。今年、Web Almanacプロジェクトが開始された後にセカンダリページを導入し、一部の章ではこの新しいデータを使用しています。しかし、ほとんどの章ではホームページのみを使用しました。今後の分析では、この新しいデータセットがさらに活用されることを期待しています。

HTTP Archiveは、ラボテストツールとも見なされており、データセンターからウェブサイトをテストし、実際のユーザーエクスペリエンスからのデータを収集していません。すべてのページは、キャッシュが空の状態で、ログアウトした状態でテストされており、実際のユーザーがアクセスする方法を反映していない場合があります。

メトリクス

HTTP Archiveは、Webがどのように構築されているかについて何千ものメトリクスを収集しています。これには、ページごとのバイト数、ページがHTTPSで読み込まれたかどうか、個々のリクエストおよびレスポンスヘッダーなどの基本的なメトリクスが含まれます。これらのメトリクスの大部分は、各ウェブサイトのテストランナーとして機能するWebPageTestによって提供されます。

他のテストツールは、ページに関するより高度なメトリクスを提供するために使用されます。たとえば、Lighthouseは、アクセシビリティやSEOなどの分野でページの品質を分析するための監査を実行するために使用されます。これらのツールの詳細については、下のツールセクションで説明しています。

ラボデータセットの固有の制約を回避するために、Web Almanacは、とくにウェブパフォーマンスの分野でのユーザーエクスペリエンスに関するメトリクスのためにChrome UX Reportも使用しています。

一部のメトリクスは完全に把握できません。たとえば、ウェブサイトを構築するために使用されたツールを検出する能力は必ずしも持っていません。create-react-appを使用してウェブサイトが構築されている場合、そのサイトがReactフレームワークを使用していることはわかりますが、特定のビルドツールが使用されているかどうかは必ずしもわかりません。これらのツールがウェブサイトのコードに検出可能な指紋を残さない限り、それらの使用を測定することはできません。

他のメトリクスは測定が不可能ではないにしても、挑戦的であるか、信頼性が低いことがあります。たとえば、ウェブデザインの側面は本質的に視覚的であり、ページに煩わしいモーダルダイアログがあるかどうかなど、定量化が困難です。

ツール

Web Almanacは、次のオープンソースツールの助けを借りて実現されています。

WebPageTest

WebPageTestは、著名なウェブパフォーマンステストツールであり、HTTP Archiveの基盤です。私たちは、プライベートインスタンスのWebPageTestを使用しており、各ウェブページをテストするためのプライベートテストエージェント(実際のブラウザ)を使用しています。デスクトップおよびモバイルウェブサイトは、異なる構成でテストされています。

設定 デスクトップ モバイル
デバイス Linux VM エミュレートされたMoto G4
ユーザーエージェント Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36 PTST/220609.133020 Mozilla/5.0 (Linux; Android 8.1.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.115 Mobile Safari/537.36 PTST/220609.133020
ロケーション Google Cloud Locations, USA Google Cloud Locations, USA
接続 Cable (5/1 Mbps 28ms RTT) 4G (9 Mbps 170ms RTT)
ビューポート 1376 x 768px 512 x 360px

デスクトップウェブサイトは、Linux VM上のデスクトップChrome環境内で実行されます。ネットワーク速度はケーブル接続に相当します。

モバイルウェブサイトは、エミュレートされたMoto G4デバイス上のモバイルChrome環境内で実行され、ネットワーク速度は4G接続に相当します。

テストエージェントは、米国に拠点を置くさまざまなGoogle Cloud Platformロケーションから実行されます。

HTTP ArchiveのWebPageTestのプライベートインスタンスは、最新のパブリックバージョンと同期されており、カスタムメトリクスが追加されています。これらは、各ウェブサイトでテストの終了時に評価されるJavaScriptのスニペットです。

各テストの結果は、ウェブページに関するメタデータを含むJSON形式のアーカイブファイルであるHARファイルとして利用可能です。

Lighthouse

Lighthouseは、Googleによって開発された自動ウェブサイト品質保証ツールです。ウェブページを監査し、最適化されていない画像やアクセシビリティのないコンテンツなど、ユーザーエクスペリエンスに反するパターンが含まれていないことを確認します。

HTTP Archiveは、すべてのページで最新バージョンのLighthouseを実行しています。今年ははじめて、Lighthouseテストがモバイルとデスクトップの両方のページで行われています。2022年6月のクロール時点で、HTTP Archiveは9.6.2バージョンのLighthouseを使用しました。

Lighthouseは、WebPageTest内から独自のテストとして実行されますが、独自の設定プロファイルを持っています。

設定 デスクトップ モバイル
CPUの速度低下 N/A 1x/4x
ダウンロードのスループット 1.6 Mbps 1.6 Mbps
アップロードのスループット 0.768 Mbps 0.768 Mbps
RTT 150 ms 150 ms

LighthouseおよびHTTP Archiveで利用可能な監査に関する詳細は、Lighthouse開発者ドキュメントを参照してください。

Wappalyzer

Wappalyzerは、ウェブページで使用されている技術を検出するツールです。JavaScriptフレームワーク、CMSプラットフォーム、さらには暗号通貨マイナーまで、98のカテゴリにわたる技術がテストされています。サポートされている技術は3,805を超えており(昨年の2,600から増加しています)。

HTTP Archiveは、すべてのウェブページで最新バージョンのWappalyzerを実行しています。2022年7月の時点で、Web Almanacは6.10.26バージョンのWappalyzerを使用しました。

Wappalyzerは、WordPress、Bootstrap、jQueryなどの開発者ツールの人気を分析する多くの章で利用されています。たとえば、CMS章では、Wappalyzerが検出したCMSカテゴリの技術に大きく依存しています。

Wappalyzerを含むすべての検出ツールには制限があります。その結果の正確性は、検出メカニズムの精度に依存します。Web Almanacは、Wappalyzerが使用されるすべての章において、特定の理由で分析が正確でない可能性がある場合、その旨を注記します。

Chrome UX Report

Chrome UX Reportは、実際のChromeユーザーのエクスペリエンスに関する公開データセットです。エクスペリエンスは、ウェブサイトのオリジンごとにグループ化されます。たとえば、https://www.example.comです。このデータセットには、ペイント、ロード、インタラクション、レイアウト安定性などのUX指標の分布が含まれています。月ごとにグループ化されるだけでなく、国レベルの地理、フォームファクター(デスクトップ、電話、タブレット)、有効な接続タイプ(4G、3Gなど)などの次元で分割することもできます。

Chrome UX Reportのデータセットには、相対的なウェブサイトランキングデータも含まれています。これらはランクマグニチュードと呼ばれ、1位や116位のような細かな順位ではなく、上位1k、上位10k、最大で上位10Mまでのランクバケットにウェブサイトがグループ化されます。各ウェブサイトは、すべてのページを合わせた対象となるページビューの数に基づいてランク付けされます。今年のWeb Almanacでは、この新しいデータを広範に使用し、サイトの人気によってWebの構築方法にどのような違いがあるかを探る手段としています。

Web Almanacのメトリクスで、Chrome UX Reportからの実際のユーザーエクスペリエンスデータを参照しているものには、2022年6月のデータセット(202206)が使用されています。

データセットの詳細については、Using the Chrome UX Report on BigQueryガイドをweb.devでご覧ください。

Blink Featuresは、特定のWebプラットフォーム機能が使用されていると検出された際にChromeがフラグを立てる指標です。

私たちは、Blink Featuresを使用して機能の採用状況を別の視点から捉えています。このデータは、ページに実装されている機能と実際に使用されている機能を区別するのにとくに有用です。たとえば、CSS章のGridレイアウトに関するセクションでは、Blink Featuresデータを使用して、実際のページレイアウトの一部がGridで構築されているかどうかを測定しています。これに対して、多くのページが未使用のGridスタイルをスタイルシートに含んでいることもあります。どちらの統計もそれぞれに興味深く、Webがどのように構築されているかについて何かを教えてくれます。

Blink Featuresは、WebPageTestの通常のテストの一環として報告されています。

Third Party Web

Third Party Webは、HTTP ArchiveおよびLighthouseデータを使用して、Web上のサードパーティリソースの影響を特定し分析するPatrick Hulce2019年のサードパーティ章の著者)による研究プロジェクトです。

ドメインは、少なくとも50の異なるページに表示される場合、サードパーティプロバイダーと見なされます。このプロジェクトでは、プロバイダーを広告、分析、ソーシャルなどのカテゴリごとにグループ化しています。

Web Almanacのいくつかの章では、このデータセットのドメインとカテゴリを使用して、サードパーティの影響を理解しています。

Rework CSS

Rework CSSは、JavaScriptベースのCSSパーサーです。スタイルシート全体を取り込み、各スタイルルール、セレクター、ディレクティブ、値を区別するJSON形式のオブジェクトを生成します。

この特別なツールは、CSS章の多くの指標の精度を大幅に向上させました。各ページの全外部スタイルシートおよびインラインスタイルブロックのCSSが解析され、クエリされ、分析が可能になりました。BigQuery上のHTTP Archiveデータセットとの統合方法については、このスレッドを参照してください。

Rework Utils

今年のCSS章では、2020年のCSS章で導入された多くの指標を再訪します。その章はLea Verouが主導しました。Leaは、Rework CSSの出力から洞察をより簡単に抽出するためにRework Utilsを書きました。CSS章で見るほとんどの統計は、これらのスクリプトによって引き続き提供されています。

Parsel

Parselは、CSSセレクターパーサーおよび特異性計算機で、元々は2020年のCSS章のリーダーであるLea Verouによって書かれ、別のライブラリとしてオープンソース化されました。これは、セレクターや特異性に関連するすべてのCSS指標で広く使用されています。

分析プロセス

Web Almanacは、ウェブコミュニティの100人以上の寄稿者との調整を伴い、計画および実行に約1年かかりました。このセクションでは、Web Almanacで選ばれた章がどのような理由で選ばれ、その指標がどのようにクエリされ、どのように解釈されたかを説明します。

計画

2022年のWeb Almanacは、2022年3月に寄稿者募集の呼びかけでスタートしました。プロジェクトは前年の全26章から始まり、コミュニティから提案された追加のトピックが今年の新しい2章となりました:相互運用性持続可能性

私たちは創刊年の方法論で述べた通り:

Web Almanacの将来の版の1つの明確な目標は、著者やピアレビュアーとして代表されていない多様な声をさらに奨励することです。

そのために、今年も著者選定プロセスを続けています:

  • 以前の著者には、新しい視点を提供するため、再び執筆することをとくに奨励しませんでした。
  • 2022年の著者を推薦する全員に対して、外見や考え方が同じ人々を推薦しないようにとくに意識するよう求めました。
  • プロジェクトリーダーはすべての著者の推薦をレビューし、新しい視点をもたらし、コミュニティ内の代表されていないグループの声を増幅する著者を選出する努力をしました。

私たちは、Web Almanacがさらに多様で包括的なプロジェクトとなるよう、このプロセスを将来的に反復し、すべての背景を持つ寄稿者からの意見を取り入れることを望んでいます。

分析

2022年の4月と5月に、データアナリストは著者およびピアレビュアーと協力して、各章でクエリを実行する必要がある指標のリストを作成しました。場合によっては、分析能力のギャップを埋めるためにカスタムメトリクスが作成されました。

2022年6月を通じて、HTTP Archiveのデータパイプラインは数百万のウェブサイトをクロールし、Web Almanacで使用されるメタデータを収集しました。これらの結果は後処理され、BigQueryに保存されました。

4年目となる今年、以前のアナリストによって書かれたクエリを更新して再利用することができました。それでも、ゼロから書かれる必要がある多くの新しい指標がありました。GitHub上のオープンソースクエリリポジトリで、年度および章ごとのすべてのクエリを閲覧できます。

解釈

著者はアナリストと協力して結果を正しく解釈し、適切な結論を導き出しました。著者がそれぞれの章を書く際には、これらの統計を利用してウェブの状態を枠組みとして支えました。ピアレビュアーは著者と協力して分析の技術的正確さを保証しました。

結果を読者により容易に理解してもらうために、ウェブ開発者およびアナリストは章に埋め込むデータビジュアリゼーションを作成しました。いくつかのビジュアライゼーションは、ポイントをより明確にするために簡略化されています。たとえば、完全な分布を示すのではなく、いくつかのパーセンタイルのみが表示されます。とくに記載がない限り、すべての分布はパーセンタイルを使用して要約され、とくに中央値(50パーセンタイル)が使用され、平均は使用されません。

最後に、編集者が章を見直して単純な文法的な誤りを修正し、読書体験全体の一貫性を保証しました。

将来に向けて

2022年版のWeb Almanacは、ウェブコミュニティの内省と前向きな変化への取り組みとして、継続することを希望する年次の伝統の第4回目です。この地点に到達するまで、多くの献身的な寄稿者のおかげで壮大な努力がなされました。私たちは、将来の版をさらに効率的にするために、可能な限りこの作業を活用することを望んでいます。

2023年版のWeb Almanacへの寄与に興味がある方は、関心フォームに記入してください。一緒にウェブの状態を追跡しましょう!