ウェブパフォーマンスガイド
このページには、ウェブパフォーマンスに関するガイドが掲載されています。 これらは、ウェブ上の自分のプロジェクトのパフォーマンスを改善するためにどのようなことが使用可能か理解するのに役立てるためのものです。
- CSS と JavaScript のアニメーションのパフォーマンス
多くのアプリケーションにおいて、アニメーションは快適なユーザー体験に不可欠です。ウェブアニメーションの実装方法には、CSS
transition/animationや JavaScript ベースのアニメーション（Window.requestAnimationFrameを使用）など様々な手法があります。この記事では、CSS ベースと JavaScrip tベースのアニメーションのパフォーマンス差を分析します。- dns-prefetch の使用
DNS-prefetchはリソースがリクエストされる前にドメイン名を解決しようとする試みです。これは後で読み込まれるファイルであったり、ユーザーが辿ろうとするリンク対象であったりします。- アニメーションのパフォーマンスとフレームレート
ウェブ上でのアニメーションは、
SVGAnimationElement、window.requestAnimationFrame（canvasやWebGL_APIを含む）、CSS のanimation、video、アニメーション GIF、さらにアニメーション PNG やその他の種類の画像もあります。CSS プロパティをアニメーションさせることによるパフォーマンスコストは、プロパティによって異なり、高価な CSS プロパティをアニメーションさせると、ブラウザーが滑らかなフレームレートを実現するのに苦労し、ジャンクとなることがあります。- クリティカルレンダリングパス
クリティカルレンダリングパスとは、ブラウザーが HTML、CSS、JavaScript を画面上のピクセルに変換する際に経る一連のステップです。クリティカルレンダリングパスを最適化すると、レンダリングパフォーマンスが改善されます。 クリティカルレンダリングパスには、ドキュメントオブジェクトモデル (DOM)、CSS オブジェクトモデル (CSSOM)、レンダリングツリー、レイアウトを含みます。
- ナビゲーションおよびリソースタイミング
ナビゲーションタイミングは、ブラウザーによる文書ナビゲーションイベントを測定する指標です。リソースタイミングは、アプリケーションのリソースの読み込みに関する詳細なネットワークタイミングの測定値です。どちらも同じ読み取り専用のプロパティを提供しますが、ナビゲーションタイミングはメイン文書の時間を測定するのに対し、リソースタイミングはそのメイン文書内の呼び出されるすべての資産やリソース、およびリソースのリクエストされたリソースの時刻を提供します。
- パフォーマンスの基礎
パフォーマンスとは、効率性を意味します。この文書では、オープンウェブアプリの観点から、パフォーマンスとは何か、ブラウザープラットフォームでどのようにパフォーマンスを向上させるか、テストや改善にどのようなツールやプロセスを使用できるかについて全般的な説明をします。
- パフォーマンスモニタリング: RUM と合成モニタリング
合成モニタリングと実ユーザーモニタリング (RUM) は、ウェブパフォーマンスを監視し洞察を提供するための 2 つの手法です。 RUM と合成モニタリングはパフォーマンスを異なる視点から捉え、それぞれ好ましいこと、適切な用途、欠点が存在します。 RUM は長期的な傾向の把握に一般的に良く適している一方、合成モニタリングは退行テストや開発中の短期的なパフォーマンス課題の軽減にとても適しています。この記事で、これら 2 つのパフォーマンス監視手法を定義し比較します。
- パフォーマンス予算
パフォーマンス予算は、退行を防止するための制限です。これは、ファイル、ファイル形式、ページに読み込まれたすべてのファイル、特定の指標（例えば Time to Interactive）、カスタム指標（例えば Time to Hero Element）、または一定期間にわたるしきい値に適用できます。
- ページの生成: ブラウザーの動作の仕組み
ユーザーは、読み込みが速く、スムーズに操作できるコンテンツを、ウェブで体験することを求めています。したがって、開発者はこれらふたつの目標を達成するために努力しなければいけません。
- レイテンシーを理解する
レイテンシーとは、データパケットがソースから出力先まで到達するまでの時間を指します。パフォーマンス最適化の観点では、レイテンシーの発生原因を縮小する最適化と、低速な接続環境のユーザー向けに最適化するため、高レイテンシーをエミュレートしたサイト性能検査が重要です。この記事では、レイテンシーの定義、パフォーマンスへの影響、測定方法、縮小手法について解説します。
- 投機的読み込み
投機的読み込み (Speculative loading) とは、関連するページが実際に訪問される前に、ユーザーが次に訪問する可能性の高いページに関する予測に基づいて、ナビゲーションのアクション（DNS 読み込み、リソースの読み込み、文書のレンダリングなど）を実行することを指します。
- 推奨されるウェブパフォーマンスのタイミング: 長すぎるとはどのくらいか
ページの読み込み速度が遅いという明確な基準は存在しませんが、コンテンツの読み込み（1 秒）、アイドル状態（50 ミリ秒）、アニメーション（16.7 ミリ秒）、ユーザー入力への応答（50 ～ 200 ミリ秒）を示すための特定のガイドラインは存在します。
- 起動パフォーマンスの最適化
起動パフォーマンスの向上は、多くの場合、実施可能なパフォーマンス最適化の中で最も価値の高いものの一つです。アプリの起動にはどれくらいの時間がかかりますか？アプリの読み込み中に端末やユーザーのブラウザーがフリーズしているように見えていませんか？それはユーザーにアプリケーションがクラッシュしたり、何か問題が起きているのではないかと不安を抱かせます。使い勝手を良くするためには、アプリがすばやく読み込まれるようにすることが必要です。この記事では、新規アプリケーションの作成と、その他のプラットフォームからウェブへのアプリケーション移植の両方について、パフォーマンスに関するヒントと提案を提供します。
- 遅延読み込み
遅延読み込み (Lazy loading) とは、リソースをノンブロッキング（クリティカルでない）ものとして識別し、必要なときだけこれらを読み込む戦略のことです。クリティカルレンダリングパスの長さを短縮する方法であり、ページのロード時間の短縮につながります。