path: root/files/ja/learn/performance/index.html

---
title: Web パフォーマンス
slug: Learn/Performance
translation_of: Learn/Performance
---
<p>{{LearnSidebar}}{{draft}}</p>

<p class="summary">Web サイトを構築するには、HTML、CSS、および JavaScript が必要です。人々が使用したい Web サイトやアプリケーションを構築し、ユーザを引き付けて維持するには、優れたユーザエクスペリエンスを作成する必要があります。良好なユーザエクスペリエンスの一部は、コンテンツの読み込みが迅速であり、ユーザの操作に反応することを保証することです。これは Web パフォーマンスと呼ばれ、このモジュールではパフォーマンスのよい Web サイトを構築するために必要なすべてを学習します。</p>

<p>Webパフォーマンスとは、客観的な測定値であり、ロード時間と実行時間に関するユーザーエクスペリエンスの評価です。 Webパフォーマンスとは、サイトがロードされて対話型で応答するまでにかかる時間、およびユーザーとの対話中のコンテンツの滑らかさです。スクロールはスムーズですか？ボタンはクリック可能ですか？ポップアップはすばやく開くことができますか？また、ポップアップはスムーズにアニメーション化されますか？ Webパフォーマンスには、ロードにかかる時間、1秒あたりのフレーム数、インタラクティブにかかる時間などの客観的な測定値と、コンテンツのロードにかかったと感じる時間の主観的な経験値の両方が含まれます。<br>
 <br>
 レイテンシ、アプリケーションサイズ、DOMノードの数、行われたリソースリクエストの数、JavaScriptのパフォーマンス、CPU負荷など、多くの機能がパフォーマンスに影響を与えます。ロードと応答時間を最小限に抑え、エクスペリエンスを可能な限り早くインタラクティブにできるようにすることで、レイテンシーを隠すための追加機能を追加し、エクスペリエンスの長いテール部分で非同期的にロードすることが重要です。<br>
 <br>
 Webパフォーマンスの測定と改善に役立つツール、API、およびベストプラクティスがあります。これらもこのモジュールの過程で見ていきます。</p>

<h2 id="学習経路">学習経路</h2>

<p>Webパフォーマンスの改善に関する多くの推奨事項を実装するにはHTML、CSS、およびJavaScriptを知っている必要がありますが、アプリケーションの構築方法を知っていることはWebパフォーマンスを理解および測定するための必須条件ではありません。<br>
 <br>
 以下の導入モジュールのいくつかはプログラミングの知識を必要としませんが、HTMLおよびパフォーマンスモジュールにはHTMLの理解が必要であり、CSSおよびパフォーマンスモジュールにはCSSの理解が必要です。導入モジュールを使用することをお勧めします。まず、最初に「<a href="/ja/docs/">Webパフォーマンスとは何か</a>」から始めます。入門モジュールは、Webパフォーマンスの概要を提供します。最初の3つは、開発者であろうとプロジェクトマネージャーであろうと読む必要があると考えるべきです。技術トピックに焦点を当てたモジュールは、これらの技術を使用する開発者により適しています。<br>
 <br>
 高度なモジュールでは、入門モジュールで概要を説明したトピックをさらに深く掘り下げ、パフォーマンスAPI、テストおよび分析ツール、パフォーマンスのボトルネックの概要を提供します。<br>
 <br>
 このトピックに進む前に、「<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web">Web入門</a>」を完了することをお勧めします。ただし、そうすることは必ずしも必要ではありません。</p>

<h2 id="Introductory_modules">Introductory modules</h2>

<p>このトピックには、次のモジュールが含まれています。必ず最初のものから始めてください。</p>

<dl>
 <dt>Webパフォーマンスとは何ですか？</dt>
 <dd>この記事では、実際のパフォーマンスとは何かを詳しく説明することから始めます。これには、パフォーマンスを考える際に考慮する必要があるツール、メトリック、API、ネットワーク、人々のグループ、およびパフォーマンスをWeb開発ワークフローの一部にする方法が含まれます。</dd>
 <dt>ユーザーはパフォーマンスをどのように知覚しますか？</dt>
 <dd>ミリ秒単位のWebサイトの速度よりも重要なのは、ユーザーがサイトを認識する速度です。これらの認識は、実際のページの読み込み時間、アイドリング、ユーザーインタラクションへの応答性、スクロールやその他のアニメーションの滑らかさの影響を受けます。この記事では、実際のタイミングではなくても、ユーザーの認識を改善するためのベストプラクティスとともに、さまざまな読み込みメトリック、アニメーション、応答性メトリックについて説明します。</dd>
 <dt>Webパフォーマンスの基本</dt>
 <dd>
 <p>HTML、CSS、JavaScript、およびメディアファイルのフロントエンドコンポーネントに加えて、アプリケーションを遅くできる機能と、アプリケーションを主観的および客観的に高速化できる機能があります。 Webパフォーマンスに関連する多くのAPI、開発者ツール、ベストプラクティス、および悪いプラクティスがあります。ここでは、これらの機能の多くを基本レベルで紹介し、各トピックのパフォーマンスを改善するためのより深いダイブへのリンクを提供します。</p>
 </dd>
 <dt>HTMLパフォーマンス機能</dt>
 <dd>
 <p>一部の属性とマークアップのソースの順序は、パフォーマンスまたはWebサイトに影響を与える可能性があります。 DOMノードの数を最小限に抑え、スタイル、スクリプト、メディア、サードパーティスクリプトなどのコンテンツを含めるために最適な順序と属性が使用されるようにすることで、ユーザーエクスペリエンスを大幅に改善できます。この記事では、パフォーマンスを最大限に高めるためにHTMLを使用する方法について詳しく説明します。</p>
 </dd>
 <dt>マルチメディア：画像とビデオ</dt>
 <dd>
 <p>多くの場合、Webパフォーマンスの最も低い成果はメディアの最適化です。各ユーザーエージェントの機能、サイズ、ピクセル密度に基づいて異なるメディアファイルを提供することが可能です。バックグラウンドビデオからオーディオトラックを削除するなどの追加のヒントは、パフォーマンスをさらに向上させることができます。この記事では、ビデオ、オーディオ、画像のコンテンツがパフォーマンスに与える影響と、その影響を最小限に抑える方法について説明します。</p>
 </dd>
 <dt>レスポンシブ画像</dt>
 <dd>
 <p>画像を最適化することは、高性能なメディアリッチユーザーエクスペリエンスに不可欠ですが、画像をダウンロードするデバイスに合わせて適切なサイズにすることは特に重要です。この記事では、効率的な画像配信における&lt;picture&gt;要素やsrcset属性などのネイティブブラウザー機能の役割と、それらを自信を持って使用する方法について説明します。</p>
 </dd>
 <dt><a href="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">組み込みのプロファイラーを使用したプロファイリング</a></dt>
 <dd>Firefoxの組み込みプロファイラーでアプリのパフォーマンスをプロファイリングする方法を学びます。</dd>
 <dt>代替メディア形式</dt>
 <dd>画像やビデオに関しては、おそらくあなたが知っているよりも多くのフォーマットがあります。これらの形式の中には、ファイルサイズをさらに削減することにより、高度に最適化されたメディアリッチページをさらに活用できるものがあります。このガイドでは、いくつかの代替メディア形式、サポートされていないブラウザが寒さの中に置き去りにされないように責任を持って使用する方法、および既存のアセットをトランスコードするための高度なガイダンスについて説明します。</dd>
 <dt>CSSパフォーマンス機能</dt>
 <dd>CSSは、パフォーマンスを向上させるためにそれほど重要ではない最適化の焦点となる場合がありますが、他のCSSよりもパフォーマンスに影響を与えるCSS機能がいくつかあります。この記事では、パフォーマンスに影響を与えるいくつかのCSSプロパティを検討し、パフォーマンスが悪影響を受けないようにスタイルを処理する方法を提案しました。</dd>
 <dt>JavaScriptパフォーマンスのベストプラクティス</dt>
 <dd>
 <p>JavaScriptを適切に使用すると、インタラクティブで没入型のWebエクスペリエンスを実現できます。または、ダウンロード時間、レンダリング時間、アプリ内パフォーマンス、バッテリー寿命、ユーザーエクスペリエンスに大きな悪影響を与える可能性があります。この記事では、複雑なコンテンツであっても可能な限りパフォーマンスを高めるために考慮すべきJavaScriptのベストプラクティスの概要を説明します。</p>
 </dd>
 <dt>Webフォントのパフォーマンス</dt>
 <dd>
 <p>パフォーマンスのランドスケープで見落とされることが多いのは、Webフォントです。 WebフォントはWebデザインにおいてこれまで以上に目立っていますが、多くの開発者は単にサードパーティのサービスからフォントを埋め込み、それについて何も考えていません。この記事では、効率的なファイル形式とサブ設定を使用して、フォントファイルをできるだけ小さくする方法について説明します。そこから、ブラウザのテキストのしくみ、CSSとJavaScriptの機能を使用してフォントをすばやくレンダリングし、ユーザーエクスペリエンスの中断を最小限に抑える方法について説明します。</p>
 </dd>
 <dt>モバイル性能</dt>
 <dd>
 <p>モバイルデバイスでのWebアクセスは非常に人気があり、すべてのモバイルプラットフォームは本格的なWebブラウザーを備えていますが、帯域幅、CPU、およびバッテリーの寿命が制限されている可能性があるため、これらのプラットフォームでのWebコンテンツのパフォーマンスを考慮することが重要です。この記事では、モバイル固有のパフォーマンスに関する考慮事項について説明します。</p>
 </dd>
</dl>



<h2 id="Advanced_Modules">Advanced Modules</h2>

<dl>
 <dt>Populating the page</dt>
 <dd>HTTPリクエストが行われ、可能なら、数秒後にサイトが表示されます。コンテンツを表示するには、JavaScriptを実行し、DOMを変更し、スタイルを計算し、レイアウトを計算し、最後にコンテンツをレンダリングします。これには、ペイントと合成が含まれ、GPUアクセラレーションが別のスレッドに含まれます。</dd>
 <dt>パフォーマンスのボトルネック</dt>
 <dd></dd>
 <dt>レイテンシを理解する</dt>
 <dd>
 <p>レイテンシとは、ブラウザーがリソースを要求してから、ブラウザーが要求されたリソースの最初のバイトを受信するまでにかかる時間です。この記事では、レイテンシとは何か、それがパフォーマンスに与える影響、レイテンシを測定および改善する方法について説明します。</p>
 </dd>
 <dt>帯域幅について</dt>
 <dd>
 <p>帯域幅は、1秒間に送信できるデータの量（MbpsまたはKbpsで測定）です。この記事では、メディアリッチインターネットアプリケーションにおける帯域幅の役割、測定方法、利用可能な帯域幅を最大限に活用するためにアプリケーションを最適化する方法について説明します。</p>
 </dd>
 <dt>HTTP / 2とあなた</dt>
 <dd>
 <p>トランスポート層（つまりHTTP）はWebの機能に不可欠であり、HTTP / 2の形で大きな更新が行われたのは比較的最近になってからです。すぐに使用できるHTTP / 2は、以前のバージョンよりも多くのパフォーマンスの改善と利点を提供しますが、状況を変えます。この記事では、HTTP / 2が何をするのか、そしてアプリケーションをさらに微調整してさらに前進させる方法を学びます。</p>
 </dd>
 <dt>パフォーマンスにおけるTLSの役割</dt>
 <dd>
 <p>TLS（またはHTTPSと呼ばれる傾向がある）は、安全で安全なユーザーエクスペリエンスを作成するために重要です。ハードウェアはTLSがサーバーのパフォーマンスに与える悪影響を軽減しましたが、ブラウザーがサーバーに接続するのを待つ時間のかなりの部分を占めています。この記事では、TLSハンドシェイクプロセスについて説明し、OCSPステープリング、HSTSプリロードヘッダー、サードパーティのTLSレイテンシをマスクするリソースヒントの潜在的な役割など、この時間を短縮するためのヒントを提供します。</p>
 </dd>
 <dt><a href="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">組み込みのプロファイラーを使用したプロファイリング</a></dt>
 <dd>Firefoxの組み込みプロファイラーでアプリのパフォーマンスをプロファイリングする方法を学びます。</dd>
 <dt>パフォーマンスチャートを読む</dt>
 <dd>開発者ツールは、パフォーマンス、メモリ、およびネットワーク要求に関する情報を提供します。ブラウザ開発ツールのウォーターフォールチャート、コールツリー、トレース、フレームチャート、および割り当ての読み方を知っていると、他のパフォーマンスツールのウォーターフォールチャートとフレームチャートを理解するのに役立ちます。</dd>
 <dt><a href="/en-US/Apps/Build/Performance/CSS_JavaScript_animation_performance">CSSおよびJavaScriptアニメーションのパフォーマンス</a></dt>
 <dd>アニメーションは、楽しいユーザーエクスペリエンスにとって重要です。この記事では、CSSとJavaScriptベースのアニメーションのパフォーマンスの違いについて説明します。</dd>
 <dt>JavaScriptバンドルの分析</dt>
 <dd>間違いなく、JavaScriptは現代のWeb開発の大きな部分を占めています。アプリケーションで使用するJavaScriptの量を減らすよう常に努力する必要がありますが、どこから始めればよいかを知ることは困難です。このガイドでは、アプリケーションのスクリプトバンドルを分析し、使用しているものを把握する方法と、アプリのバンドル間でスクリプトが重複しているかどうかを検出する方法を示します。</dd>
 <dt>動的インポートを使用したJavaScriptのLazy-load</dt>
 <dd>開発者は「lazy loading」という用語を聞くと、ビューポートにスクロールするときに読み込まれるスクロールせずに見える画像をすぐに思い浮かべます。しかし、JavaScriptもlazy loadできることを知っていましたか？このガイドでは、動的import（）ステートメントについて説明します。これは、JavaScriptモジュールをオンデマンドでロードする最新のブラウザーの機能です。もちろん、この機能はどこでも利用できるわけではないため、この機能を広く互換性のある方法で使用するようにツールを構成する方法も示します。</dd>
</dl>

<dl>
 <dt>リソースヒントを使用したリソース配信の制御</dt>
 <dd>ブラウザは、リソースの優先順位付けと配信に関して、私たちよりもよく知っていますが、千里眼からはほど遠いです。ネイティブブラウザー機能により、ブラウザーが別のサーバーに接続するタイミングを示唆したり、ブラウザーが必要とする前にリソースをプリロードしたりできます。賢明に使用すると、これにより高速なエクスペリエンスがさらに速く見えるようになります。この記事では、rel = preconnect、rel = dns-prefetch、rel = prefetch、rel = preloadなどのネイティブブラウザー機能と、それらを活用する方法について説明します。</dd>
</dl>

<h2 id="See_Also">See Also</h2>

<ul>
 <li><a href="/en-US/docs/Web/Performance/Mobile_performance_checklist">Mobile performance checklist</a></li>
 <li><a href="/en-US/docs/Web/Apps/Fundamentals/Performance/Optimizing_startup_performance">Optimizing Startup Performance</a><a href="/en-US/docs/Web/Apps/Fundamentals/Performance/Optimizing_startup_performance"> </a></li>
</ul>

<p>{{LandingPageListSubpages}}</p>