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

方法論

概要

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

Web Almanacの使命は、ウェブの状態に関する一般的な知識の年次リポジトリになることです。私たちの目標は、主題の専門家が文脈に沿った洞察を提供することで、HTTP Archiveのデータウェアハウスをウェブコミュニティがさらに利用しやすいものにすることです。

Web Almanacの2020年版は、ページコンテンツ、体験、公開、配信の4つの部に分かれています。各部の、いくつかの章では、その全体的なテーマをさまざまな角度から探求しています。例えば、部IIではユーザー体験を、パフォーマンスやセキュリティ、アクセシビリティの各章で、さまざまな角度から探求しています。

データセットについて

HTTP Archiveデータセットは、毎月新しいデータで継続的に更新されています。Web Almanacの2020年版については、この章で特に断りのない限り、すべてのメトリクスは2020年8月のクロールからソースを得ています。これらの結果は、BigQuery上で接頭語のテーブル2020_08_01公開できます。

Web Almanacで紹介されているすべてのメトリクスは、BigQuery上のデータセットを使用して一般に再現可能です。すべての章で使用されているクエリは、GitHubリポジトリで閲覧できます。

BigQueryはテラバイト単位で課金されるため、これらのクエリの中には非常に大規模なものもあり、自分で実行するには費用がかかる可能性があることに注意してください。支出のコントロールについては、Tim Kadlec氏の投稿Using BigQuery Without Breaking the Bankを参照してください。

例えば、デスクトップページとモバイルページあたりの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 UXレポート からウェブサイトのURLを取得しています。Chrome UXレポートはGoogleが公開しているデータセットで、Chromeユーザーが積極的に訪問している数百万のウェブサイトのユーザー体験を集計しています。これにより、実際のウェブ利用状況を反映した最新のウェブサイトのリストが得られます。Chrome UXレポートデータセットにはフォーム ファクター ディメンションが含まれており、デスクトップ ユーザーやモバイル ユーザーがアクセスしたすべてのWebサイトを取得するために使用します。

Web Almanacが使用した2020年8月のHTTPアーカイブのクロールでは、Webサイトのリストに、最新のChrome UXレポートのリリースを使用しました。202006データセットは2020年7月14日にリリースされたもので、6月中にChromeユーザーが訪問したウェブサイトをキャプチャしています。

分析したウェブサイトの数は、2019 Web Almanacに掲載されているウェブサイトと比較して、20~30%の増加が見られました。この増加は、Paul Calvanoが、Growth of the Web in 2020の投稿で分析しています。

リソースの制限のため、HTTP Archiveでは、Chrome UXレポートで各ウェブサイトの1ページしかテストできません。これを調整するために、ホームページのみが含まれています。ホームページは必ずしもウェブサイト全体を代表するものではないため、結果に多少の偏りが生じることに注意してください。

HTTP Archiveは、データセンターからウェブサイトをテストし、実際のユーザー体験からデータを収集しないという意味で、ラボテストツールとも考えられています。そのため、すべてのページはログアウト状態で空のキャッシュを使ってテストされており、実際のユーザーがどのようにアクセスするかを反映していない可能性があります。

メトリクス

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

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

研究室のデータセットに固有の制限を回避するために、Web Almanacでは、Chrome UXレポートを利用して、特にウェブパフォーマンスの分野でのユーザー体験に関するメトリクスを提供しています。

メトリクスの中には、完全に手の届かないものもあります。例えば、ウェブサイトの構築に使用されたツールを検出できるとは限りません。ウェブサイトがcreat-react-appを使って構築されている場合、Reactフレームワークを使っていることはわかりますが、特定のビルドツールが使われているとは限りません。これらのツールがウェブサイトのコードに検出可能な指紋を残さない限り、その使用状況を測定することはできません。

その他のメトリクスは、必ずしも測定が不可能ではないかもしれませんが、測定が困難であったり、信頼性が低いものもあります。例えば、Webデザインの側面は本質的に視覚的であり、ページに押し付けがましいモーダルダイアログがあるかどうかなど、定量化するのは難しいかもしれません。

ツール

Web Almanacは、以下のオープンソース・ツールの助けを借りて実現しています。

WebPageTest

WebPageTestは、著名なウェブパフォーマンステストツールであり、HTTP Archiveのバックボーンです。WebPageTestはプライベートインスタンスとプライベートテストエージェントを使用しており、これは各Webページをテストする実際のブラウザです。デスクトップとモバイルのウェブサイトは、異なる構成でテストされます。

設定 デスクトップ モバイル
デバイス Linux VM Emulated Moto G4
ユーザーエージェント 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
接続方法 ケーブル(5/1 Mbps 28ms RTT) 3G (1.600/0.768 Mbps 300ms RTT)
ビューポート 1024 x 768px 512 x 360px

デスクトップのWebサイトは、Linux VM上のデスクトップChrome環境内から実行されます。ネットワーク速度はケーブル接続と同等です。

モバイルWebサイトは、3G接続と同等のネットワーク速度を持つエミュレートされたMoto G4デバイス上のモバイルChrome環境から実行されます。エミュレートされたモバイルユーザーエージェントはChrome65と自称していますが、実際は Chrome84であることに注意してください。

テストが実行される場所は2つあります。カリフォルニア州とオレゴン州です。HTTP Archiveは、カリフォルニア州にあるInternet Archiveのデータセンターにある独自のテストエージェントハードウェアを維持しています。オレゴン州にあるGoogle Cloud Platform のus-west-1にあるテストエージェントは、必要に応じて追加されています。

HTTP ArchiveのWebPageTestのプライベートインスタンスは、最新のパブリックバージョンと同期して維持され、カスタムメトリクスで強化されています。これらは、テストの最後に各ウェブサイトで評価されるJavaScriptのスニペットです。多くのデータアナリストの貢献に感謝します、特に献身的な努力をしたTony McCreathのおかげで、Web Almanacの2020年版では、HTTPアーカイブのテストインフラストラクチャの機能が3,000行以上の新しいコードで大幅に拡張されました。

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

Lighthouse

Lighthouseは、Googleが構築した自動化されたウェブサイト品質保証ツールです。最適化されていない画像やアクセスできないコンテンツなどのユーザー体験のアンチパターンが含まれていないことを確認するためにウェブページを監査します。

HTTP Archiveは、すべてのモバイルWebページでLighthouseの最新バージョンを実行しています - リソースが限られているため、デスクトップページは含まれていません。2020年8月のクロール時点で、HTTP Archiveは6.2.0バージョンのLighthouseを使用していました。

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

設定
CPUスローダウン 1x
Downloadスループット 1.6 Mbps
Uploadスループット 0.768 Mbps
RTT 150 ms

LighthouseとHTTP Archiveで利用可能な監査の詳細については、Lighthouse開発者向けドキュメントを参照してください。

Wappalyzer

Wappalyzerは、ウェブページで使用されている技術を検出するためのツールです。64のカテゴリがあり、JavaScriptフレームワークからCMSプラットフォーム、さらには暗号通貨の採掘者に至るまで、テストされた技術の範囲があります。1,400以上の技術がサポートされています。

HTTP Archiveは、すべてのウェブページに対して最新バージョンのWappalyzerを実行します。2020年8月現在、Web AlmanacはWappalyzerの6.2.0バージョンを使用しています。

Wappalyzerは、WordPress、Bootstrap、jQueryのような開発者ツールの人気を分析する多くの章を強力にしています。例えば、EコマースCMS の各章は、それぞれの EコマースCMS の各チャプターは、Wappalyzer が検出した技術のカテゴリに大きく依存しています。

Wappalyzerを含むすべての検出ツールには限界があります。その結果の妥当性は、その検出メカニズムがどれだけ正確であるかに常に依存します。Web Almanacでは、Wappalyzerが使用されているすべての章に注意書きが追加されますが、特定の理由により、その分析が正確でない場合があります。

Chrome UXレポート

Chrome UXレポート は、実際のChromeユーザーの体験をまとめた公開データセットです。エクスペリエンスは、https://www.example.com などのように、ウェブサイトの起源によってグループ化されています。このデータセットには、ペイント、ロード、インタラクション、レイアウトの安定性などのUXメトリクスの分布が含まれています。月ごとのグループ化に加えて、国レベルの地理、フォームファクター(デスクトップ、モバイル、タブレット)、有効な接続タイプ(4G、3Gなど)などの大きさ、速度によっても経験をスライスすることができます。

Chrome UXレポートの実世界のユーザー体験データを参照するWeb Almanacメトリクスについては、2020年8月のデータセット(202008)を使用しています。

データセットの詳細については、BigQueryでChrome UXレポートを使用するのガイドweb.devを参照してください。

サードパーティウェブは、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の分析で広く使われています。

分析プロセス

Web Almanacの計画と実行には、100人以上のWebコミュニティの貢献者の協力を得て、約1年を要しました。このセクションでは、Web Almanacに掲載されている章を選んだ理由、それらのメトリクスがどのようにして分析されたか、そしてどのように解釈されたかを説明します。

プランニング

2020年のWeb Almanacは、2020年6月に開始されましたが、COVID-19に関連した不安や社会正義の抗議活動のため、2019年のタイムラインよりも遅くなりました。2020年のこれらの出来事やその他の出来事は、制作プロセス全体の下火となり、このようなテンポの速いプロジェクトのストレスを超えて、私たちの貢献者に多くの追加的な負担をかけました。

昨年の方法論で述べたように、

Web Almanacの今後のエディションの明確な目標の1つは、著者やレビュワーとして、代表性の低い声や異質な声をより多く取り入れることを奨励することです。

そのために、今年は著者の探し方、選び方を体系的に変えてみました。

  • これまでの著者は、異なる視点のためのスペースを確保するために、再び書くことを特別に望まれていませんでした。
  • 2020年の著者を支持する人たちは皆、見た目や考え方が似ている人を指名しないように特に意識するように求められました。
  • 2019年の執筆者の多くはGoogleの社員であり、今年はより広いウェブコミュニティからの視点をよりバランスよく得ることを試みました。Web Alamanacの声はコミュニティそのものを反映したものであるべきであり、反響室を作らないように特定の企業に偏ったものではないと考えています。
  • プロジェクトのリーダーは、すべての著者の推薦を検討し、新しい視点をもたらし、地域社会の中での未発表グループの声を増幅させる著者の選定に尽力しました。

将来的には、このプロセスを繰り返していくことで、Web Almanacがより多様で包括的なプロジェクトとなり、さまざまなバックグラウンドを持つ投稿者が参加できるようにしたいと考えています。

最終的には、2020年7月にブレインストーミングとノミネートを経て、22のチャプターが固まり、各チャプターごとにコンテンツチームを編成して、執筆、レビュー、分析を行いました。

分析

2020年7月と8月に、メトリクスとチャプターの安定したリストを持って、データアナリストは、実現可能性のためにメトリクスをトリアージしました。場合によっては、分析能力のギャップを埋めるために、カスタムメトリクスを作成されました。

2020年8月を通して、HTTPアーカイブデータパイプラインは数百万のウェブサイトをクロールし、Web Almanacで使用するためのメタデータを収集しました。

データアナリストは、各メトリクスの結果を抽出するためのクエリを書き始めました。合計すると、何百ものクエリが手書きで書かれていました。GitHubのオープンソースクエリのリポジトリ で、年別、章別にすべてのクエリを閲覧することができます。

解釈

著者はアナリストと協力して、結果を正しく解釈し、適切な結論を導き出しました。著者はそれぞれの章を執筆する際には、これらの統計からウェブの状態についての枠組みを支持しました。レビュワーは著者と協力して、分析の技術的な正確さを確認しました。

読者に結果をよりわかりやすく伝えるために、ウェブ開発者やアナリストは、この章に埋め込むデータの可視化を作成しました。いくつかの可視化は、ポイントをより明確にするために簡略化されています。たとえば、完全な分布を表示するのではなく、ほんの一握りのパーセンタイルのみを表示しています。特に断りのない限り、すべての分布は、平均値ではなくパーセンタイル、特に中央値(50 パーセンタイル)を使用して要約されています。

最後に、編集者は各章を修正し、簡単な文法的な誤りを修正し、読書体験全体に一貫性を持たせるようにしました。

将来を見据えて

Web Almanacの2020年版は毎年恒例、Webコミュニティ伝統の2回目で、内省と前向きな変化への取り組みを続けていきたいです。ここまで来れたのは、多くの献身的なコントリビューターのおかげで、記念碑的な努力をしてきました。

Web Almanacの2021年版への貢献にご興味のある方は、関心フォームにご記入ください。みんなで協力してウェブの状態を追いかけていきましょう!