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

---
title: パフォーマンスの測定
slug: Learn/Performance/Measuring_performance
tags:
  - API
  - Beginner
  - Guide
  - Tools
  - Web
translation_of: Learn/Performance/Measuring_performance
---
<div>{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}</div>

<div></div>

<div>パフォーマンスの測定は、あなたがあなたのアプリケーション、サイト、ウェブサービスを評価することを助ける重要な指標を提供します。たとえば、パフォーマンスの指標を使うことで、競合と比較してアプリケーションをどのように動作させるか決めたり、リリースごとのパフォーマンスを比較したりできます。測定対象として選択する指標はユーザー、サイト、そしてビジネスのゴールに関連するものであるべきです。それらは一貫した手法で収集、測定され、非技術系の関係者にも理解でき、利用可能なフォーマットで分析される必要があります。この記事ではサイトのパフォーマンス測定と最適化に利用できるウェブパフォーマンスの指標を紹介します。</div>

<div></div>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提:</th>
   <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基本的な知識</td>
  </tr>
  <tr>
   <th scope="row">目的:</th>
   <td>
    <p>様々なウェブパフォーマンス API を通じて収集できる ウェブパフォーマンスの指標とデータの視覚化に利用できるツールの情報を提供すること</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 dir="ltr" id="パフォーマンス_API">パフォーマンス API</h2>

<p>ウェブのコードを書くとき、自分自身でパフォーマンス測定ツールを作るために利用できるたくさんのウェブ API があります。</p>

<p>クライアントサイドのウェブパフォーマンスを測定するために <a href="/ja/docs/Web/API/Navigation_timing_API">Navigation Timing API</a> を利用できます。前のページをアンロードするために必要な時間、ドメインのルックアップにかかる時間、ウィンドウのロードハンドラー実行にかかる時間の合計などが含まれます。この API は、下図に示すナビゲーションイベント全てに関する指標として利用できます。</p>

<p><img alt="The various handlers that the navigation tiiming API can handle including Navigation timing API metrics Prompt for unload redirect unload App cache DNS TCP Request Response Processing onLoad navigationStart redirectStart redirectEnd fetchStart domainLookupEnd domainLookupStart connectStart (secureConnettionStart) connectEnd requestStart responseStart responseEnd unloadStart unloadEnd domLoading domInteractive domContentLoaded domComplete loadEventStart loadEventEnd" src="https://mdn.mozillademos.org/files/17062/navigationtimingapi.jpg" style="height: 612px; width: 959px;"></p>

<p>現在のページのパフォーマンスに関連する情報へのアクセスを提供する <a href="/ja/docs/Web/API/Performance_API/Using_the_Performance_API">Performance API</a> は、<a href="/ja/docs/Web/API/Performance_Timeline">Performance Timeline API</a>、<a href="/ja/docs/Web/API/Navigation_timing_API">Navigation Timing API</a>、<a href="/ja/docs/Web/API/User_Timing_API">User Timing API</a>、そして <a href="/ja/docs/Web/API/Resource_Timing_API">Resource Timing API </a>を含みます。これらのインターフェースにより、JavaScript のタスクが完了するまでにかかる時間の正確な測定が可能になります。</p>

<p><a href="/ja/docs/Web/API/PerformanceEntry">PerformanceEntry</a> オブジェクトは、パフォーマンスタイムラインの一部です。パフォーマンスエントリーは アプリケーション内の明示的なポイントでパフォーマンスの<em>{{domxref("PerformanceMark","mark")}}</em> または <em>{{domxref("PerformanceMeasure","measure")}} </em> を作ること（たとえば {{domxref("Performance.mark","mark()")}} メソッドを呼び出すこと）で直接的に作成されます。パフォーマンスエントリーは、画像などリソースの読み込みのようなタイミングで間接的に作成されることもあります。</p>

<p><a href="/ja/docs/Web/API/PerformanceObserver">PerformanceObserver API </a>はパフォーマンス測定のイベントを観察するために利用できます。さらにブラウザーのパフォーマンスタイムラインに新しいパフォーマンスエントリーが記録されるたびに通知することができます。</p>

<p>この記事ではこれらの API に深入りしませんが、これらの存在を知っていると便利です。パフォーマンスウェブ API を使う例についてより深く知りたい場合は <a href="/ja/docs/Web/Performance/Navigation_and_resource_timings">Navigation and timings</a> の記事を参照してください。</p>

<h2 dir="ltr" id="ツールと指標">ツールと指標</h2>

<p dir="ltr">パフォーマンスの改善を助けるために利用できるいくつかの異なるツールがあります。これらは一般的にふたつのカテゴリーに分類できます。</p>

<ul dir="ltr">
 <li>P<a href="/ja/docs/Tools/Network_Monitor">ageSpeed Insights</a> や Firefox の <a href="/ja/docs/Tools/Network_Monitor">Network Monitor</a> と <a href="/ja/docs/Tools/Performance">Performance Monitor</a> のようなパフォーマンスを測定したり、指し示したりするツール。これらのツールはウェブアプリケーションやサイトの読み込みがどれくらい速いかまたは遅いかを示します。また、ウェブアプリケーションを最適化して改善するべき領域を指し示します。</li>
 <li>コードを更新してウェブアプリケーションやサイトのパフォーマンスを改善するツール。たとえば、バンドルツールは HTTP リクエストの回数を減らすためにコードを単一のファイルにまとめ、ミニファイツールはファイルをより小さくするためにコードからホワイトスペースを取り除きます。</li>
</ul>

<p>このコースでは両方のカテゴリーを取り上げます。そしてパフォーマンスの指標だけではなく、サイトのパフォーマンスが改善しているかどうかを測定するための指標についても議論します。</p>

<h3 id="一般的なパフォーマンスレポートツール">一般的なパフォーマンスレポートツール</h3>

<p dir="ltr"><a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> のようなツールではウェブサイトのパフォーマンスを測定できます。URL を入力すると数秒でパフォーマンスのレポートを入手できます。レポートはモバイルとデスクトップの両方でウェブサイトがどの程度の性能を示すかを表すスコアを含みます。これは、すでにできていることと改善が必要な部分についてのアイデアを得る良いスタート地点になります。</p>

<p>本記事の執筆時点で、MDN のパフォーマンスレポートのサマリーは以下のようになっています。</p>

<p dir="ltr"><img alt="A screenshot of PageSpeed Insights report for the Mozilla homepage." src="https://mdn.mozillademos.org/files/16963/pagespeed-insight-mozilla-homepage.png" style="border-style: solid; border-width: 1px; height: 1354px; width: 1944px;"></p>

<p dir="ltr">パフォーマンスレポートは、ページに何かが表示されまでにユーザーがどのくらい待たなければならないか、ページを表示するまでに何バイトのデータがダウンロードされる必要があるかなどの情報を含みます。さらに測定された値が良好と考えられるか、あるいは不良であるかも示します。</p>

<p dir="ltr"><a href="https://webpagetest.org/">webpagetest.org</a> は、サイトを自動的にテストして有益な指標を返すツールのもう一つの実例です。ぜひ webpagetest.org と PageSpeed Insights の両方であなたの好きなウェブサイトを実行してみてください。そしてスコアを見てみましょう。</p>

<h3 dir="ltr" id="ネットワークツール">ネットワークツール</h3>

<p dir="ltr">多くのブラウザーが、読み込み対象のページに対してそれらがどのように動作しているか確認するために使えるツールを用意しています。たとえば、FIrefox の <a href="/ja/docs/Tools/Network_Monitor">Network Monitor</a> はネットワークからダウンロードされるすべてのアセットの詳細な情報を、それぞれダウンロードのどのくらいの時間がかかるかを示すグラフと合わせて表示します。</p>

<p dir="ltr"><img alt="" src="https://mdn.mozillademos.org/files/17030/network-monitor.png" style="border-style: solid; border-width: 1px; height: 325px; width: 900px;"></p>

<p dir="ltr">異なるアクションを実行したときのウェブアプリケーションやサイトのユーザーインターフェースのパフォーマンスを測定するために <a href="/ja/docs/Tools/Performance">Performance Monitor</a> を利用できます。これは ウェブアプリケーションやサイトを遅くしているかもしれない要素を指し示します。</p>

<p dir="ltr"><img alt="" src="https://mdn.mozillademos.org/files/17031/perf-monitor.png" style="border-style: solid; border-width: 1px;"></p>

<h2 id="結論">結論</h2>

<p>この記事ではウェブアプリケーションやサイトで利用可能なウェブパフォーマンスの指標の簡単な概要を紹介しました。次は、知覚されるパフォーマンスと、避けられないパフォーマンスへの影響をユーザーに深刻に見せない、あるいは完全に気づかれないようにするいくつかのテクニックを見ていきます。</p>

<p>{{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}</p>

<h2 id="このモジュール内">このモジュール内</h2>

<ul>
 <li><a href="/ja/docs/Learn/Performance/why_web_performance">ウェブパフォーマンスの"なぜ"</a></li>
 <li><a href="/ja/docs/Learn/Performance/What_is_web_performance">ウェブパフォーマンスとは何か</a></li>
 <li><a href="/ja/docs/Learn/Performance/Perceived_performance">ユーザーはパフォーマンスをどのように知覚するか</a></li>
 <li><a href="/ja/docs/Learn/Performance/Measuring_performance">パフォーマンスの測定</a></li>
 <li><a href="/ja/docs/Learn/Performance/Multimedia">Multimedia: images</a></li>
 <li><a href="/ja/docs/Learn/Performance/video">Multimedia: video</a></li>
 <li><a href="/ja/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li>
 <li><a href="/ja/docs/Learn/Performance/HTML">HTML performance features</a></li>
 <li><a href="/ja/docs/Learn/Performance/CSS">CSS performance features</a></li>
 <li><a href="/ja/docs/Learn/Performance/Fonts">Fonts and performance</a></li>
 <li><a href="/ja/docs/Learn/Performance/Mobile">Mobile performance</a></li>
 <li><a href="/ja/docs/Learn/Performance/business_case_for_performance">パフォーマスに光をあてる</a></li>
</ul>