方法論
概要
Web Almanacは、HTTP Archiveが主催するプロジェクトです。HTTP Archiveは、ウェブがどのように構築されているかを追跡することを使命として、2010年にSteve Soudersによって開始されました。何百万ものウェブページの構成を毎月評価し、その何テラバイトものメタデータをBigQuery で分析できるようにしています。
Web Almanacの使命は、ウェブの状態に関する一般的な知識の年次リポジトリとなることです。私たちの目標は、専門家が文脈に応じた洞察を提供することで、HTTP Archiveのデータウェアハウスをウェブコミュニティにとってさらに利用しやすいものにすることです。
Web Almanacの2021年版は、コンテンツ、体験、出版、流通の4つのパートに分かれています。各パートでは、いくつかの章がその包括的なテーマをさまざまな角度から探求しています。たとえば、パートIIでは、パフォーマンス、セキュリティ、アクセシビリティなどの各章で、ユーザー体験をさまざまな角度から探求しています。
データセットについて
HTTP Archiveのデータセットは、毎月新しいデータが追加され、継続的に更新されています。Web Almanacの2021年版では、その章でとくに断りがない限り、すべてのメトリクスは2021年7月のクロールから取得されました。これらの結果は、BigQuery上で公に照会可能で2021_07_01
というプレフィックスが付いたテーブルで提供されています。
Web Almanacに掲載されているすべてのメトリクスは、BigQuery上のデータセットを使用して一般に再現可能です。GitHub リポジトリで、すべての章で使われているクエリを閲覧できます。
これらのクエリの中には非常に大きなものがあり、自分で実行すると高くつく可能性があることに注意してください。出費を抑えるには、Tim Kadlecのポスト BigQueryを低コストで利用する を参照してください。
たとえば、デスクトップとモバイルのページあたりのJavaScriptのバイト数の中央値を理解するには、bytes_2021.sql をご覧ください。
#standardSQL
# 1ページあたりのJSリクエストバイトの合計(2021)
SELECT
percentile,
_TABLE_SUFFIX AS client,
APPROX_QUANTILES(bytesJs / 1024, 1000)[OFFSET(percentile * 10)] AS js_kilobytes
FROM
`httparchive.summary_pages.2021_07_01_*`,
UNNEST([10, 25, 50, 75, 90, 100]) AS percentile
GROUP BY
percentile,
client
ORDER BY
percentile,
client
各指標の結果は、たとえばJavaScript resultsのように、章ごとのスプレッドシートで一般に閲覧できます。生の結果やクエリへのリンクは各章の最下部にあります。また、指標別の結果とクエリも各図から直接リンクされています。
ウェブサイト
データセットには8,198,531のWebサイトが含まれています。これは、Web Almanacの2020年版と比較して9%の増加です。そのうち7,499,763件がモバイルサイト、6,294,605件がデスクトップサイトです。ほとんどのウェブサイトは、モバイルとデスクトップの両方のサブセットに含まれています。
HTTP Archiveは、Chrome UX Report からウェブサイトのURLを取得しています。Chrome UXレポートは、Googleが公開しているデータセットで、Chromeユーザーが積極的に訪問した数百万のウェブサイトのユーザー体験を集約しています。これにより、最新のWebサイトのリストが得られ、実際のWebの使用状況を反映できます。Chrome UXレポートのデータセットには、フォームファクターのディメンションが含まれており、これを使用して、デスクトップまたはモバイルユーザーがアクセスしたすべてのWebサイトを取得します。
7月の2021はWeb Almanacが使用したHTTP Archiveのクロールでは、ウェブサイトのリストとして、最新のChrome UXレポートのリリースが使用されました。202105データセットは、2021年6月8日に公開され、5月の間にChromeユーザーが訪問したウェブサイトをキャプチャしています。
リソースの制限により、HTTP Archiveでは、Chrome UXレポートの各ウェブサイトから1ページのみテストできます。このため、ホームページのみを対象としています。ホームページは必ずしもWebサイト全体を代表するものではないため、結果に偏りが生じることをご了承ください。
HTTP Archiveはラボテスト用のツールであり、データセンターからWebサイトをテストし、実際のユーザー体験からデータを収集するものではありません。すべてのページは、ログアウトした状態で空のキャッシュを使用してテストされており、実際のユーザーがどのようにアクセスするかを反映していない可能性があります。
Metrics
HTTP Archiveは、ウェブがどのように構築されているかについての数千もの指標を収集しています。ページあたりのバイト数、ページがHTTPSで読み込まれたかどうか、個々のリクエストおよびレスポンスヘッダーなどの基本的な測定基準が含まれています。これらのメトリクスの大部分は、各ウェブサイトのテスト ランナーとして機能する WebPageTest によって提供されます。
他のテストツールは、ページに関するより高度な指標を提供するために使用されます。たとえば、Lighthouseは、ページに対して監査を実行し、アクセシビリティやSEOなどの分野でその品質を分析するために使用されます。以下のツールの項では、それぞれのツールについて詳しく説明しています。
ラボのデータセット特有の制限を回避するために、Web Almanacは、とくにWebパフォーマンスの分野におけるユーザー体験の測定基準として Chrome UX レポート も利用しています。
測定基準によっては、まったく手の届かないものもあります。たとえば、ウェブサイトを構築するために使用されるツールを検出する能力は、必ずしもありません。ウェブサイトがcreate-react-appで構築されている場合、Reactフレームワークを使用していることはわかりますが、特定の構築ツールが使用されていることは必ずしもわかりません。これらのツールが、ウェブサイトのコードに検出可能なフィンガープリントを残さない限り、その使用状況を測定することはできないのです。
その他の指標は、必ずしも測定できないわけではないが、困難であったり、信頼性に欠けたりする場合がある。たとえば、ウェブデザインは本質的に視覚的なものであり、ページに邪魔なモーダルダイアログはあるかどうかなど定量化が、困難な場合があります。
ツール
Web Almanacは、以下のオープンソースツールの協力により実現されています。
ウェブページテスト
ウェブページテスト は著名なWebパフォーマンステストツールで、HTTP Archiveのバックボーンです。ウェブページテストのプライベートインスタンスを使用し、各ウェブページをテストする実際のブラウザであるプライベートテストエージェントを使用しています。デスクトップとモバイルのウェブサイトは、異なる設定の下でテストされます。
コンフィグ | デスクトップ | モバイル |
---|---|---|
デバイス | Linux VM | エミュレートされたMoto G4 |
ユーザーエージェント | Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36 PTST/210702.163639 | Mozilla/5.0 (Linux; Android 6.0.1; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Mobile Safari/537.36 PTST/210702.163639 |
ロケーション | Google Cloud Locations, USA | Google Cloud Locations, USA |
接続 | Cable (5/1 Mbps 28ms RTT) | 3G (1.600/0.768 Mbps 300ms RTT) |
ビューポート | 1376 x 768px | 512 x 360px |
デスクトップ用ウェブサイトは、Linux VM上のデスクトップ用Chrome環境内から実行されます。ネットワーク速度は、ケーブル接続と同等です。
モバイルサイトは、3G回線相当のネットワーク速度を持つMoto G4のエミュレーション端末で、モバイルChrome環境内から実行されます。
テストエージェントは、米国にあるさまざまなGoogle Cloud Platformの拠点から実行されます。
HTTP Archiveのウェブページテストのプライベートインスタンスは最新のパブリックバージョンと同期しており、カスタムメトリクス(テスト終了時に各ウェブサイト上で評価されるJavaScriptのスニペット)を追加しています。
各テストの結果は、HARファイルという、Webページに関するメタデータを含むJSON形式のアーカイブファイルとして提供されます。
Lighthouse
Lighthouseは、Googleが開発した自動ウェブサイト品質保証ツールです。ウェブページを監査し、最適化されていない画像やアクセスしにくいコンテンツなど、ユーザー体験を阻害するパターンが含まれていないことを確認します。
HTTP Archiveは、すべてのモバイル向けウェブページで最新バージョンのLighthouseを実行しています。デスクトップ向けページは、リソースが限られているため含まれていません。2021年7月のクロールの時点で、HTTP Archiveは8.0.0と 8.1.0のバージョンのLighthouseを組み合わせて使用していました。
Lighthouseは、ウェブページテスト 内から独立したテストとして実行されますが、独自の構成プロファイルを持っています。
コンフィグ | 値 |
---|---|
CPUの速度低下 | 1x/4x |
ダウンロードのスループット | 1.6 Mbps |
アップロードのスループット | 0.768 Mbps |
RTT | 150 ms |
LighthouseとHTTP Archiveで利用できる監査の詳細については、Lighthouse開発者向けドキュメントを参照してください。
Wappalyzer
Wappalyzer は、Webページで使用されている技術を検出するためのツールです。テストされる技術は、JavaScriptフレームワークからCMSプラットフォーム、さらには暗号通貨マイナーまで、90 のカテゴリに分類されています。サポートされている技術は2,600以上(昨年の1,400から増加)です。
HTTP Archiveは、すべてのウェブページで最新版のWappalyzerを実行しています。2021年7月の時点で、Web AlmanacはWappalyzerのバージョン6.7.7を使用しています。
Wappalyzerは、WordPress、Bootstrap、jQueryなどの開発者ツールの人気を分析する多くの章をパワーアップしています。たとえば、EコマースとCMSの章はそれぞれのEコマースとCMS は、Wappalyzerが検出した技術のカテゴリーです。
Wappalyzerを含むすべての検出ツールには、限界があります。その結果の妥当性は、常にその検出メカニズムがいかに正確であるかに依存します。Web Almanacは、Wappalyzerを使用されているすべての章に注釈を加えますが、特定の理由によりその分析が、正確でない可能性があります。
Chrome UXレポート
Chrome UX レポートは、実際のChromeユーザーの体験をまとめた公開データセットです。体験は、たとえばhttps://www.example.com
のように、Webサイトのオリジンでグループ化されています。このデータセットには、ペイント、負荷、インタラクション、レイアウトの安定性などのUX指標の分布が含まれています。月別のグループ化に加え、国レベルの地域、フォームファクター(デスクトップ、携帯、タブレット)、効果的な接続タイプ(4G、3Gなど)などの切り口で体験を分類することも可能です。
今年から、Chrome UXレポートのデータセットに、相対的な Web サイト ランキング データ が含まれるようになりました。これらは、ランク マグニチュードと呼ばれます。なぜなら、もっとも普及しているウェブサイトの1位や116位といった細かいランクとは対照的に、ウェブサイトは上位1K、上位10K、上位10Mまでのランクバケットにグループ化されるからです。各ウェブサイトは、そのすべてのページを合わせた対象ページビューの数によってランク付けされています。今年のWeb Almanacは、サイトの人気度によるウェブの構築方法のバリエーションを探る方法として、この新しいデータを広範に利用しています。
Chrome UX Reportの実際のユーザー体験データを参照するWeb Almanacの指標には、2021年7のデータセット(202107)が使用されています。
データセットについては、web.devのBigQueryのChrome UX レポートの活用 のガイドで詳しく説明しています。
Blink機能
ブリンク機能は、特定のウェブプラットフォーム機能が使用されていることが検知されるたびに、Chromeがフラグを立てるインジケーターです。
私たちはBlink機能を利用して、機能の採用状況を別の角度から見ています。このデータは、ページに実装された機能と実際に使用された機能を区別するのにとくに有効です。たとえば、CSS の章のグリッド レイアウトに関するセクションでは、実際のページ レイアウトの一部がグリッドで構築されているかを測定するのにBlink機能データが使用されています。それに比べて、より多くのページが、たまたまスタイルシートに未使用のグリッド スタイルを含んでいます。どちらの統計もそれなりに興味深く、ウェブがどのように構築されるかについて何かを教えてくれます。
Blink機能については、ウェブページテスト によって定期テストの一部として報告されます。
サードパーティウェブ
サードパーティウェブは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章で紹介された多くのメトリクスを再確認しています。LeaはRework Utilsを書き、Rework CSSの出力からより簡単に洞察を抽出できるようにしました。CSSの章で見ることができる統計のほとんどは、これらのスクリプトによって提供され続けています。
Parsel
ParselはCSSセレクタパーサーと特異性計算機で、元々は2020 CSS章のリーダーLea Verouによって書かれて、別のライブラリとしてオープンソース化されています。セレクターと特異性に関連するすべてのCSSメトリクスで広範囲に使用されています。
分析プロセス
Web Almanacは、ウェブ・コミュニティーの100人以上の貢献者の協力を得て、約1年かけて企画・実行されました。このセクションでは、Web Almanacに掲載されている章を選んだ理由、そのメトリクスを照会した方法、そしてその解釈について説明します。
計画
Web Almanacは、2021年4月に投稿者募集でスタートしました。私たちは、前年度の全23章でプロジェクトを初期化しましたが、コミュニティから追加のトピックが提案され、今年度は新たに2つの章を設けました。構造化データと WebAssembly です。
初年度の方法論で述べたとおりです。
Web Almanacの今後の明確な目標の1つは、著者や査読者として、代表的でない異質な声をより多く取り入れることを奨励することです。
そのため、今年は著者の選考方法をより洗練させました。
- これまでの著者は、異なる視点を持つために、とくに再執筆を控えるようにした。
- 2021年の著者を推薦する皆さんには、とくに「似たような人ばかりを推薦しない」ということを意識してもらいました。
- プロジェクトリーダーは、推薦されたすべての著者を検討し、新しい視点をもたらし、コミュニティで十分に代表されていないグループの声を増幅するような著者を選ぶように努めました。
今後、このプロセスを繰り返し、Web Almanacがあらゆるバックグラウンドの貢献者による、より多様で包括的なプロジェクトとなることを期待します。
分析
2021年5月と6月に、データアナリストは著者や査読者とともに、各章で照会が必要となる指標のリストを作成した。場合によっては、カスタム指標が、私たちの分析能力のギャップを埋めるために作成されることもありました。
2021年7月の間、HTTP Archiveデータパイプラインは数百万のウェブサイトをクロールし、Web Almanacに使用されるメタデータを収集しました。これらの結果は、後処理をしてBigQueryに保存されました。
3年目ということで、以前のアナリストが書いたクエリを更新して再利用することができました。それでも、ゼロから書く必要のある新しいメトリクスがたくさんありました。GitHubのオープン ソース query repository で、すべてのクエリを年別、章別に閲覧できます。
解釈
著者はアナリストと協力し、結果を正しく解釈し、適切な結論を導き出しました。著者はそれぞれの章を執筆する際、ウェブの現状を説明するために、これらの統計データを参考にしました。査読者は、著者の分析が技術的に正しいことを確認するために、著者と協力しました。
読者に結果をより分かりやすく伝えるため、ウェブ開発者とアナリストがデータビジュアライゼーションを作成し、章に埋め込んでいます。いくつかのビジュアライゼーションは、ポイントをより明確にするため簡略化されています。たとえば、分布をすべて表示するのではなく、ごく一部のパーセンタイルだけを表示する。とくに断りのない限り、すべての分布は平均値ではなく、パーセンタイル、とくに中央値(50パーセンタイル)を使って要約されています。
最後に、編集者は簡単な文法的な誤りを修正し、読書体験全体の一貫性を確保するために各章を改訂しました。
今後に向けて
Web Almanacの2021年版は、ウェブ・コミュニティにおける内省と前向きな変化へのコミットメントという毎年の伝統として続けていきたいと考えていることの3回目です。ここまで来るには、多くの献身的な貢献者のおかげで大変な努力をしました。この仕事をできるだけ活用して、将来の版をさらに合理的にしたいと思います。
Web Almanacの2022年版への貢献にご興味のある方は、関心フォームにご記入をお願いします。一緒にウェブの状況を追跡しましょう!