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

このページには、ウェブパフォーマンスに関するガイドが掲載されています。 これらは、ウェブ上の自分のプロジェクトのパフォーマンスを改善するためにどのようなことが使用可能か理解するのに役立てるためのものです。

dns-prefetch の使用

DNS-prefetch はリソースがリクエストされる前にドメイン名を解決しようとする試みです。これは後で読み込まれるファイルであったり、ユーザーが辿ろうとするリンク対象であったりします。

アニメーションのパフォーマンスとフレームレート

ウェブ上でのアニメーションは、SVGAnimationElement、window.requestAnimationFrame（canvas や WebGL_API を含む）、CSS の animation、video、アニメーション GIF、さらにアニメーション PNG やその他の種類の画像もあります。CSS プロパティをアニメーションさせることによるパフォーマンスコストは、プロパティによって異なり、高価な CSS プロパティをアニメーションさせると、ブラウザーが滑らかなフレームレートを実現するのに苦労し、ジャンクとなることがあります。

ナビゲーションおよびリソースタイミング

ナビゲーションタイミングは、ブラウザーによる文書ナビゲーションイベントを測定する指標です。リソースタイミングは、アプリケーションのリソースの読み込みに関する詳細なネットワークタイミングの測定値です。どちらも同じ読み取り専用のプロパティを提供しますが、ナビゲーションタイミングはメイン文書の時間を測定するのに対し、リソースタイミングはそのメイン文書内の呼び出されるすべての資産やリソース、およびリソースのリクエストされたリソースの時刻を提供します。

パフォーマンスの基礎

パフォーマンスとは、効率性を意味します。この文書では、オープンウェブアプリの観点から、パフォーマンスとは何か、ブラウザープラットフォームでどのようにパフォーマンスを向上させるか、テストや改善にどのようなツールやプロセスを使用できるかについて一般的な説明をします。

ページの生成: ブラウザーの動作の仕組み

ユーザーは、読み込みが速く、スムーズに操作できるコンテンツを、ウェブで体験することを求めています。したがって、開発者はこれらふたつの目標を達成するために努力しなければいけません。

投機的読み込み

投機的読み込み (Speculative loading) とは、関連するページが実際に訪問される前に、ユーザーが次に訪問する可能性の高いページに関する予測に基づいて、ナビゲーションのアクション（DNS 読み込み、リソースの読み込み、文書のレンダリングなど）を実行することを指します。

遅延読み込み

遅延読み込み (Lazy loading) とは、リソースをノンブロッキング（クリティカルでない）ものとして識別し、必要なときだけこれらを読み込む戦略のことです。クリティカルレンダリングパスの長さを短縮する方法であり、ページのロード時間の短縮につながります。