ウェブパフォーマンス

ウェブパフォーマンスは客観的な測定値と、読み込み時や実行時のユーザー体験の知覚状況からなります。ウェブパフォーマンスとは、サイトが読み込まれるまでの時間、操作可能・応答可能になるまでの時間、そしてユーザーが操作する際のコンテンツのスムーズさを意味します。パフォーマンスに関する懸念事項としては、スクロールはスムーズか、ボタンは反応が良いか、ポップアップはすばやく読み込まれ、アニメーションは滑らかか、などが挙げられます。客観的な測定項目としては、読み込み時間、1 秒あたりのフレーム数、操作可能になるまでの時間などが挙げられ、主観的な使用感としては、コンテンツの読み込みに時間がかかると感じるかどうかが挙げられます。

サイトが応答するまでの時間が長ければ長いほど、ユーザーはそのサイトを放棄する傾向があります。読み込み時間と応答時間を最小限に抑え、さらに機能を追加して遅延を隠すことで、できるだけ早く、できるだけ利用可能でインタラクティブな体験を提供し、一方で、体験のロングテール部分では非同期的に読み込みを行うことが重要です。

ウェブパフォーマンスの測定と改善に役立つツール、API、およびベストプラクティスがあります。以下のページでそれを扱います。

ウェブパフォーマンスガイド

パフォーマンスガイドは、ブラウザーの動作、パフォーマンスに影響を与える要素、およびアプリケーションのさまざまな側面におけるパフォーマンスの測定、最適化、監視の方法について説明したリソースです。

パフォーマンスの基本: パフォーマンスとは効率を意味します。オープンウェブアプリというコンテキストにおいて、この記事では、パフォーマンスとは何か、ブラウザープラットフォームがパフォーマンスの改善にどのように役立つか、そしてパフォーマンスを検査および改善するために使用できるツールやプロセスについて、全般的に説明しています。
ページの生成: ブラウザーの動作の仕組み: ユーザーは、コンテンツの読み込みが速く、操作がスムーズなウェブの使い勝手を求めています。したがって、開発者はこの 2 つの目標の達成に努める必要があります。パフォーマンスと知覚的パフォーマンスを改善する方法を理解するには、ブラウザーの動作を理解することが役立ちます。
レイテンシーを理解する: レイテンシーは、データパケットがソースから宛先まで到達するのにかかる時間です。パフォーマンスの最適化に関しては、レイテンシーの原因を縮小するための最適化を行い、接続速度が遅いまたは不安定なユーザーに対応するために、高レイテンシーをエミュレートしてサイトのパフォーマンスを検査することが重要です。
推奨されるウェブパフォーマンスのタイミング：どのくらいの時間が長すぎるのか: ページの読み込み速度が遅いという明確な基準は設定されていませんが、コンテンツの読み込み（1 秒）、アイドル状態（50 ミリ秒）、アニメーション（16.7 ミリ秒）、ユーザー入力への応答（50～200 ミリ秒）を示すための具体的なガイドラインがあります。
dns-prefetch の使い方: DNS-prefetch は、リソースがリクエストされる前にドメイン名を解決しようとする試みです。これは、後で読み込まれるファイルや、ユーザーが従おうとするリンク先などです。
ナビゲーションタイミングとリソースタイミング: ナビゲーションタイミングは、ブラウザーの文書ナビゲーションイベントを測定する指標です。リソースタイミングは、アプリケーションのリソースの読み込みに関する詳細なネットワークタイミング測定値です。どちらも同じ読み取り専用プロパティを提供しますが、ナビゲーションタイミングはメイン文書のタイミングを測定するのに対し、リソースタイミングは、そのメイン文書によって呼び出されたすべての資産またはリソース、およびリソースが要求したリソースの時間を測定します。
起動パフォーマンスの最適化: 起動パフォーマンスの改善は、多くの場合、実行できるパフォーマンスの最適化の中で最も価値の高いものの 1 つです。良い使い勝手を得るためには、アプリケーションが確実にすばやく読み込まれるようにすることが重要です。この記事では、新しいアプリケーションを作成する場合と、他のプラットフォームからアプリケーションをウェブに移植する場合の両方について、パフォーマンスに関するヒントや提案を提供します。
クリティカルレンダリングパス: クリティカルレンダリングパスとは、HTML、CSS、JavaScript を画面にピクセルとして表示するために、ブラウザーが実行する一連の段階のことです。クリティカルレンダリングパスを最適化すると、レンダリングのパフォーマンスが改善されます。重要なレンダリングパスには、ドキュメントオブジェクトモデル (DOM)、CSS オブジェクトモデル (CSSOM)、レンダリングツリー、レイアウトがあります。
遅延読み込み: 遅延読み込みは、リソースを非ブロック（非クリティカル）として識別し、必要な場合にのみ読み込む戦略です。これは、クリティカルレンダリングパスの長さを短縮する方法であり、ページの読み込み時間を短縮することになります。
投機的読み込み: 投機的読み込みとは、ユーザーが次に訪問する可能性が最も高いページを予測し、関連付けられたページが実際に訪問される前に、ナビゲーション措置（DNS の先読み、リソースの取得、文書のレンダリングなど）を実行する慣行を指します。
パフォーマンス予算: パフォーマンス予算は、パフォーマンスの低下を防ぐための制限です。パフォーマンス予算は、ファイル、ファイル形式、ページに読み込まれたすべてのファイル、特定の指標（対話までの時間など）、独自の指標（ヒーロー要素までの時間など）、または一定期間におけるしきい値に適用できます。
パフォーマンスモニタリング: RUM と合成モニタリング: 合成モニタリングと実ユーザーモニタリング (RUM) は、ウェブパフォーマンスを監視し、その洞察を提供する 2 つの手法です。RUM と合成モニタリングは、パフォーマンスの異なるビューを提供し、それぞれ長所、用途、短所があります。RUM は一般的に、長期的な傾向の把握に最適ですが、合成モニタリングは、開発中の回帰検査や短期的なパフォーマンスの問題の軽減に非常に適しています。この記事では、これら 2 つのパフォーマンス監視手法を定義し、比較します。
CSS および JavaScript によるアニメーションのパフォーマンス: アニメーションは、多くのアプリケーションで快適な使い勝手を実現するために不可欠です。Web アニメーションを実装するには、CSS transitions/animations や JavaScript ベースのアニメーション（requestAnimationFrame() を使用）など、さまざまな方法があります。この記事では、CSS ベースと JavaScript ベースのアニメーションのパフォーマンスの違いを分析します。
アニメーションのパフォーマンスとフレームレート: ウェブ上のアニメーションは、SVG、 JavaScript を使用することで実現できます。これには、<canvas> および WebGL、CSS animation、<video>、アニメーション GIF、さらにはアニメーション PNG およびそれ以外の画像形式も含まれます。 CSS プロパティのアニメーションのパフォーマンスコストはプロパティごとに異なり、コストの高い CSS プロパティをアニメーション化すると、ブラウザーがスムーズなフレームレートを実現できなくなり、ジャンクが発生する場合があります。

初心者向けチュートリアル

MDN のウェブパフォーマンスの学習領域には、パフォーマンスの基礎をカバーする最新のチュートリアルが含まれています。パフォーマンスについての初心者は、ここから始めてください。

ウェブパフォーマンス: 短い概要: ウェブパフォーマンスの学習経路の概要です。ここから旅を始めましょう。
ウェブパフォーマンスとは: この記事では、パフォーマンスとは何かをよく理解することからモジュールを始めます。パフォーマンスについて考えるときに考慮すべきツール、指標、API、ネットワーク、人々のグループ、そしてウェブ開発のワークフローの一部としてパフォーマンスを活用する方法などを紹介します。
ユーザーはパフォーマンスをどう知覚するのか: ウェブサイトの速さをミリ秒単位で示すことよりも重要なのは、ユーザーがサイトの速さをどのように認識しているかということです。これらの認識は、実際のページロード時間、アイドリング、ユーザーインタラクションへの応答性、スクロールやその他のアニメーションのスムーズさに影響されます。この記事では、様々なロード指標、アニメーション、応答性の指標と、実際の時間ではなくてもユーザーの認識を改善するためのベストプラクティスについて説明します。
ウェブパフォーマンスの基本: HTML、CSS、JavaScript、メディアファイルなどのフロントエンド部品に加えて、アプリケーションを遅くする機能と、主観的・客観的にアプリケーションを速くする機能があります。ウェブパフォーマンスに関連する API、開発者ツール、ベストプラクティス、バッドプラクティスは数多くあります。ここでは、これらの機能の多くを基本的なレベルで紹介し、それぞれのトピックについて、パフォーマンスを向上させるためのより深い考察へのリンクを提供します。
HTML のパフォーマンス特性: マークアップの属性やソースの順序によっては、ウェブサイトのパフォーマンスに影響を与えることがあります。 DOM ノードの数を最小限に抑え、スタイル、スクリプト、メディア、サードパーティのスクリプトなどのコンテンツを含むために、最適な順序と属性を使用することで、ユーザーエクスペリエンスを劇的に向上させることができます。この記事では、最大限のパフォーマンスを確保するために HTML をどのように使用すればよいかを詳しく見ていきます。
マルチメディア: 画像と動画: ウェブパフォーマンスの中で最も身近な位置にあるのは、メディアの最適化です。各ユーザーエージェントの能力、サイズ、ピクセル密度に応じて、異なるメディアファイルを提供することが可能です。また、バックグラウンドのビデオからオーディオトラックを削除するなどのヒントを加えると、さらにパフォーマンスが向上します。この記事では、動画、音声、画像のコンテンツがパフォーマンスに与える影響と、その影響をできるだけ小さくするための方法について説明します。
CSS パフォーマンス特性: CSS は、パフォーマンス向上のための最適化の焦点としてはあまり重要ではないかもしれませんが、パフォーマンスに影響を与える CSS の機能はいくつかあります。この記事では、パフォーマンスに影響を与えるいくつかの CSS プロパティと、パフォーマンスに悪影響を与えないためのスタイルの処理方法を提案します。
JavaScript パフォーマンスのベストプラクティス: JavaScript は、適切に使用すればインタラクティブで没入感のあるウェブ体験を実現できますが、ダウンロード時間、レンダリング時間、アプリ内のパフォーマンス、バッテリー寿命、ユーザーエクスペリエンスを大きく損なう可能性があります。この記事では、複雑なコンテンツであっても可能な限りパフォーマンスを向上させるために考慮すべき JavaScript のベストプラクティスを紹介します。

パフォーマンス API

パフォーマンス API は、ウェブアプリケーションのパフォーマンスを測定するために使用される一連の標準です。次のページでは、パフォーマンス API の概要と、その使用方法に関する情報を記載しています。

高精度タイミング: パフォーマンス API は、システムクロックのずれや調整の影響を受けない、潜在的に 1 ミリ秒以下の分解能を持つ、安定した単調なクロックに基づく高精度な測定を可能にします。高分解能のタイマーは、精度が低く単調ではない Date タイムスタンプの代わりに、正確なベンチマーク測定を行うために必要です。
長いアニメーションフレームのタイミング: 長いアニメーションフレーム (LoAF) は、ウェブサイトの使い勝手に影響を与える可能性があります。ユーザーインターフェイス (UI) の更新が遅くなり、コントロールが反応しないように見えたり、アニメーション効果やスクロールがぎこちない（または滑らかでない）ものになったりして、ユーザーに不満を与える原因となります。長いアニメーションフレーム API を使用すると、開発者は長いアニメーションフレームに関する情報を取得し、その根本的な原因をより深く理解することができます。この記事では、長いアニメーションフレーム API の使い方について説明します。
bfcache ブロックの原因の監視: PerformanceNavigationTiming.notRestoredReasons プロパティは、ナビゲーション時に現在の文書が bfcache を使用できなくなった理由に関する情報を報告します。開発者は、この情報を使用して、bfcache 対応にするために更新が必要なページを特定し、サイトのパフォーマンスを改善することができます。
ナビゲーションタイミング: ナビゲーションタイミングは、PerformanceNavigationTiming API を使用して、あるページから別のページへ移動することに関連する指標を提供します。例えば、ドキュメントの読み込みやアンロードに要した時間を測定したり、DOM の構築が完了し、DOM との操作が可能になるまでに要した時間を記録したりすることができます。
パフォーマンスデータ: パフォーマンス API は、パフォーマンスデータの分析や視覚化は提供しません。しかし、パフォーマンス API は開発者ツールとよく統合されており、そのデータは多くの場合、分析の終了点やライブラリーに送信され、パフォーマンスの指標を記録します。この指標は、ユーザーに影響を与えるパフォーマンスのボトルネックを見つけるためにデータを評価するのに役立ちます。このページでは、パフォーマンス API データの種類、その収集方法、およびアクセス方法の概要について説明します。
リソースタイミング API: リソースタイミングは、アプリケーションのリソースの読み込みに関する詳細なネットワークタイミングデータを取得および分析することを可能にします。アプリケーションは、タイミングメトリクスを使用して、例えば、ページ読み込みの一部として暗黙的に、あるいは JavaScript から明示的に（例えば fetch() API を使用して）特定のリソース（画像やスクリプトなど）の読み込みにかかる時間を決定することができます。
サーバータイミング: サーバータイミングにより、サーバーはリクエストとレスポンスのサイクルに関する指標をユーザーエージェントに伝えることができます。この情報を収集し、パフォーマンス API で処理される他のすべての指標と同じ方法で、サーバー側の指標に基づいてアクションを実行することができます。
ユーザータイミング API: アプリケーション固有のタイムスタンプを生成するために、ユーザータイミング API の "mark" および "measure" の種類の項目を使用します。これらはブラウザーのパフォーマンスタイムラインの一部です。

プロファイリングとツール

Firefox プロファイラーのパフォーマンス機能: このウェブサイトでは、コールツリー、フレイムグラフ、スタックチャート、マーカーチャート、ネットワークチャートなど、開発者ツールのパフォーマンス機能を使用し、理解する方法に関する情報を提供しています。
組み込みプロファイラーによるプロファイル: Firefox 組み込みのプロファイラーを使用して、アプリのパフォーマンスをプロファイリングする方法を紹介します。

リファレンス

HTML

<picture> 要素
<video> 要素
<source> 要素
<img> のレスポンシブ画像向け属性（srcset など）
rel="preload" 属性

CSS

will-change

JavaScript

HTTP

Content-encoding
リソースヒント（dns-prefetch、preconnect、prefetch、事前レンダリングによる
HTTP/2
クライアントヒント