initial commit

7 files changed, 699 insertions, 0 deletions

diff --git a/files/ja/learn/performance/business_case_for_performance/index.html b/files/ja/learn/performance/business_case_for_performance/index.html
new file mode 100644
index 0000000000..106a517a8f
--- /dev/null
+++ b/files/ja/learn/performance/business_case_for_performance/index.html
@@ -0,0 +1,83 @@
+---
+title: ウェブパフォーマンスのビジネスケース
+slug: Learn/Performance/business_case_for_performance
+tags:
+  - Web パフォーマンス
+  - Web 開発
+translation_of: Learn/Performance/business_case_for_performance
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Performance/Mobile", "Learn/Performance")}}</div>
+
+<p>{{draft}}</p>
+
+<p>ここまで、ウェブパフォーマンスの重要性についてお話してきました。ウェブパフォーマンスを最適化するために何をすべきかを学びました。しかし、クライアントや経営陣にパフォーマンスに優先順位をつけて投資するように説得するにはどうすればよいのでしょうか？このセクションでは、意思決定者に投資をするように説得するための明確なビジネスケースの作成について説明します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>コンピュータリテラシーの基礎、<a href="/ja/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基礎知識、<a href="/ja/docs/Web/Performance">ウェブパフォーマンス最適化</a>の基礎知識。</td>
+  </tr>
+  <tr>
+   <th scope="row">目標:</th>
+   <td>クライアントや経営者に ウェブパフォーマンスを優先してもらい、自信を持って仕事ができるようになること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="パフォーマンスを経営の最優先事項にする">パフォーマンスを経営の最優先事項にする</h2>
+
+<p>これまで、パフォーマンスに優先順位をつけることで、ユーザー体験を向上させ、その結果として収益を上げる方法について説明してきました。ウェブパフォーマンスを優先させないと、ビジネスの収益を失う可能性があることを知っています。この記事では、特定のビジネス指標がユーザーのウェブパフォーマンス体験にどのように直接関係しているか、ウェブパフォーマンスのユーザー体験を向上させるためにサービス設計を適用する方法について説明しています。また、累積的な経験がコンバージョン率やリテンション率にどのように影響するかを理解することの重要性を強調しています。</p>
+
+<dl>
+</dl>
+
+<h3 id="パフォーマンス予算">パフォーマンス予算</h3>
+
+<p>ウェブパフォーマンス予算を設定することで、チームがサイトを維持するための軌道に乗っているかどうかを確認し、回帰を防ぐのに役立ちます。パフォーマンスバジェットとは、維持しなければならない最大の http リクエスト数、すべてのアセットを合わせた最大の合計サイズ、特定のデバイスでの最小許容 FPS などの制限を指定するために設定される制限のセットです。予算は、単一のファイル、ファイルタイプ、ページに読み込まれたすべてのファイル、特定のメトリック、または一定期間のしきい値に適用することができます。</p>
+
+<p>予算を定義して推進することで、マーケティング、セールス、さらにはビデオやサードパーティスクリプト、フレームワークを追加したいと考えている他の開発者など、競合する利害関係者に対抗して、優れたユーザーエクスペリエンスを提供するためのパフォーマンス推進者を支援することができます。<a href="/ja/docs/Web/Performance/Performance_budgets">パフォーマンス予算</a>は、開発者チームがユーザーのために最適なパフォーマンスを保護し、ビジネスが新しい市場に参入してカスタム体験を提供できるようにするのに役立ちます。</p>
+
+<h3 id="key_performance_indicators"><strong>k</strong>ey <strong>p</strong>erformance <strong>i</strong>ndicators</h3>
+
+<p>目標として主要業績評価指標（KPI）を設定することで、ビジネスの目標でもある業績目標を明確にすることができます。KPIは、ユーザーエクスペリエンスとパフォーマンスがビジネスのトップラインに与える影響を測定する上で重要なビジネスメトリクスのセットであると同時に、パフォーマンスに優先順位をつけることのメリットを示す方法でもあります。ここでは、検討すべき KPI をいくつか紹介します。</p>
+
+<dl>
+ <dt><strong>コンバージョン率 (CR)</strong></dt>
+ <dd>購入の完了やニュースレターへの登録など、意図した行動をとったトラフィックの割合。ビジネスサイトの表示速度が遅いと、ユーザーが意図したタスクを完了できないことがあります。これは、コンバージョン率の低下につながる可能性があります。</dd>
+ <dt><strong>Time on Site</strong></dt>
+ <dd>集計したユーザーがサイトに費やす平均時間。サイトのパフォーマンスが低下すると、ユーザーはサイトを早期に放棄する可能性が高くなり、サイトのメトリクスにかかる時間が短くなる可能性があります。</dd>
+ <dt><strong>ネットプロモーションスコア (NPS)</strong></dt>
+ <dd>ネットプロモーションスコア (NPS) は、企業のブランド、製品、サービスに対する顧客の忠誠心を評価するための指標です。ユーザーのパフォーマンスが悪いと、ブランドの評判が悪くなります。</dd>
+</dl>
+
+<p>KPI としてコンバージョン率、サイト上の時間、および/またはネットプロモーションのスコアを設定すると、ウェブパフォーマンスの努力に財務および他のビジネス目標の価値を与え、努力の価値を証明するためのメトリクスを使用して、購入を後押しするのに役立ちます。</p>
+
+<div class="hidden">
+<h2 id="パフォーマンスにおける期待と現実">パフォーマンスにおける期待と現実</h2>
+
+<p>ビジネスパフォーマンス (収益や運用などで) は、ウェブパフォーマンスをどうするかに直結します。(ソースが必要)</p>
+
+<p>競合の領域 - ウェブパフォーマンスを優先しないが、良いビジネスメトリクスを期待する (上記の3つを参照)。</p>
+</div>
+
+<div>{{PreviousMenu("Learn/Performance/Mobile", "Learn/Performance")}}</div>
+
+<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="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li>
+ <li><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></li>
+ <li><a href="/ja/docs/Learn/Performance/business_case_for_performance">パフォーマンスに光をあてる</a></li>
+</ul>
diff --git a/files/ja/learn/performance/index.html b/files/ja/learn/performance/index.html
new file mode 100644
index 0000000000..070c09f1f1
--- /dev/null
+++ b/files/ja/learn/performance/index.html
@@ -0,0 +1,120 @@
+---
+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>
diff --git a/files/ja/learn/performance/measuring_performance/index.html b/files/ja/learn/performance/measuring_performance/index.html
new file mode 100644
index 0000000000..f70a9cfa20
--- /dev/null
+++ b/files/ja/learn/performance/measuring_performance/index.html
@@ -0,0 +1,105 @@
+---
+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="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/en-US/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="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li>
+ <li><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></li>
+ <li><a href="/ja/docs/Learn/Performance/business_case_for_performance">パフォーマスに光をあてる</a></li>
+</ul>
diff --git a/files/ja/learn/performance/perceived_performance/index.html b/files/ja/learn/performance/perceived_performance/index.html
new file mode 100644
index 0000000000..8af223ce2e
--- /dev/null
+++ b/files/ja/learn/performance/perceived_performance/index.html
@@ -0,0 +1,111 @@
+---
+title: 知覚されるパフォーマンス
+slug: Learn/Performance/perceived_performance
+tags:
+  - Perceived Performance
+  - Web Performance
+translation_of: Learn/Performance/perceived_performance
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Performance/what_is_web_performance", "Learn/Performance/Measuring_performance", "Learn/Performance")}}</div>
+
+<p><span class="seoSummary"><strong><a href="/ja/docs/Glossary/Perceived_performance">知覚されるパフォーマンス</a></strong></span>は、ユーザーから見てウェブサイトがどれくらい速く感じられるかを表します。ユーザーがパフォーマンスをどのように知覚するかは、具体的な統計値と同じくらい、あるいはどんな具体的な統計値よりも重要ですが、それは主観的で簡単に計測できるものではありません。知覚されるパフォーマンスはユーザーの視点であり、計測される値ではありません。</p>
+
+<p>この記事は、ユーザーの知覚と、主観的な要素を計測するために使える具体的なツールに目を通し、知覚されるパフォーマンスの簡潔な紹介を提供します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/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>ウェブパフォーマンスに対するユーザーの知覚について基本的な理解を獲得すること</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>パフォーマンスはユーザーの知覚に関連します。ウェブサイトの読み込みや描画がどれくらい速く感じられるかは、そのサイトが実際にどのくらい速く読み込まれ描画されるか以上にユーザーの体験に大きなインパクトを与えます。ある操作に（遅延やメインスレッドの無効状態によって）長い時間がかかる場合であっても、待っている間にローディングスピナーや一連の便利なヒント・ティップス（あるいはジョーク、その他適切なものであれば何でも）を表示することでユーザーのエンゲージを維持することが可能です。そのようなアプローチはただ何も表示しないよりずっと良いことです。何も表示しないことはより長い時間を感じさせ、ユーザーはそれが壊れていると思って待つのを諦めるかもしれません。</p>
+
+<h2 id="Perceived_performance" name="Perceived_performance">知覚されるパフォーマンス</h2>
+
+<p>サイトがどのくらい速く読み込まれるか、ユーザーのインタラクションにどのくらい良く反応すかの知覚はきわめて重要です。それは定量化することが難しい一方、実際のダウンロード時間以上に重要です。サイトにはそれ以上高速化することができない領域があるかもしれません。しかし、他のセクションで議論した統計値がそれ以上改善できない場合でも、サイトをより速く感じさせることは可能です。</p>
+
+<p>ユーザーがどう感じるかを計測するたった一つの統計値 (unicorn metric) はありませんが、統計値は改善（または悪化）を判断するために有用です。関連する計測値には、First Meaningful Paint  (FMP)、Largetst contentful paint (LCP)、Time to interactive (TTI)、render start、DOM interactive、Speed Index があります。</p>
+
+<p><strong><a href="/ja/docs/Glossary/First_paint">First paint</a></strong> はブラウザーから報告され、ページの変更が始まる時間をミリ秒単位で提供します。しかし、この変更はシンプルな背景色の更新や、より気付きづらい小さなものである可能性があります。それは変更の完了を意味しておらず、目に見えるものが何も描画されていない時間を報告することもあります。<strong><a href="/ja/docs/Glossary/First_contentful_paint">First Contentful Paint</a> (FCP)</strong> はブラウザーが最初に意味のある何か、テキスト、フォアグラウンド・バックグラウンドの画像、またはキャンバスや SVG を描画した時間を報告します。読み込みの経験のまさに始まりを補足します。しかし、それはただ単なるコンテンツであるため、意味のあるコンテンツ、あるいはユーザーが消費できるコンテンツであることを意味していません。<strong><a href="/ja/docs/Glossary/first_meaningful_paint">First Meaningful Paint</a> (FMP)</strong> は実際に意味のあるコンテンツがスクリーンに映し出された時間です。それは、ユーザーが知覚する読み込みの経験としてより適切な統計値ですが、まだ理想的とは言えません。<strong>Largest contentful paint (LCP)</strong> は、ビューポートの中で最も大きい目に見えるコンテンツの要素が描画される時間を報告する、<a href="https://wicg.github.io/largest-contentful-paint/">Largest Contentful Paint API</a> の中で定義された統計値です。</p>
+
+<p><strong><a href="/ja/docs/Glossary/Speed_index">Speed index</a></strong> も知覚されるパフォーマンスの概算として使用されます。それは目に見えるスクリーン上にピクセルが描画される平均時間を計測します。それはジッターも、どのコンテンツがユーザーによってより重要であるかも考慮しません。そのため完全な統計値ではありません。</p>
+
+<p>これらの統計値は最初の読み込みと描画に関わります。ユーザーがサイトとインタラクションを始めた後もサイトが速いと感じさせることは重要です。このために、<strong><a href="/ja/docs/Glossary/Time_to_interactive">time to interactive</a></strong> は良い統計値です。それは読み込みプロセスにおける最後の <a href="/ja/docs/Glossary/Long_task">long task </a>が終わり、ユーザーに UI が利用可能になる時間を表します。</p>
+
+<p>UI の欠落や質の悪い反応はどちらも知覚されるパフォーマンスに悪い影響を与えます。タスクに長い時間がかかる場合であっても、それをより速く見せる方法はあります。知覚されるパフォーマンスを改善するいくつかのティップスがあります。</p>
+
+<h3 id="Improving_perceived_performance" name="Improving_perceived_performance">知覚されるパフォーマンスを改善する</h3>
+
+<p>ネットワークを理解すること、ブラウザがどのように動作するか、ユーザーが知覚する時間など、こういったものはユーザーのインタラクションを改善する方法を理解するために役立ちます。しかし、速さの知覚を改善するために、人間の心がどのように働くかと言った全てを理解する必要はありません。</p>
+
+<p>それがどのくらい速い、または遅いと感じられるかは、ユーザーが能動的に待つか、受動的に待つかに大きく影響されます。待つことには能動と受動のフェーズがあります。ユーザが活動しているとき、マウスを動かしたり、考えたり、楽しんだりしているとき、ユーザーは能動的なフェーズにいます。受動的なフェーズは、ユーザーがモノクロのスクリーンを見つめるように受動的に待つ時に起こります。受動と能動の時間が客観的に同じとき、ユーザーは受動的に待つ時間が長かったと感じるでしょう。読み込み、描画、または反応の時間が客観的にそれ以上小さくできない場合、待つことを受動から能動的に待つ時間に変えることでより速く感じさせることができます。</p>
+
+<p>いくつか従うべきヒントとコツがあります。より深く知りたい場合、これらのヒントのいくつかには別途完全な記事があります。</p>
+
+<p>コンテンツ、または少なくともページの一部をコンテンツが読み込み中であることと併せてできるだけ速く表示することは、知覚されるパフォーマンスを改善するためにきわめて重要です。たとえば、ページの描画は CSS と Java Script の読み込みとパース処理にブロックされるため、最初の読み込みに必要とされる CSS と JS の量を最小化することは知覚されるパフォーマンスに大きな影響を持つでしょう。バイトとしてのサイズが同じだったとしても、ページの描画をブロックしないことは読み込みをより速く感じさせます。</p>
+
+<p>知覚されるパフォーマンスを改善するヒントとコツを以下に示します。</p>
+
+<h3 id="Minimize_initial_load" name="Minimize_initial_load">最初の読み込みを最小化する</h3>
+
+<p>知覚されるパフォーマンスを改善するために、最初のページ読み込みを最小化しましょう。すなわち、最初に、実際に表示するものすべて、ただし本当に使うものだけをダウンロードしましょう。それから残りをダウンロードしましょう。すべてのアセットを最後までダウンロードしたときにはアセットの総量は改善されていません。実際にはコードを追加する必要があるかもしれません。しかし、直ちに必要ではないアセットをユーザーに気づかれない形で後からダウンロードすることによって、ユーザーはダウンロードが速くなったように感じます。</p>
+
+<p><a href="https://onilab.com/blog/perceived-performance-vs-actual-load-time-5-secrets-of-lightning-fast-magento-store/">アセットを最小化する</a>には最初の読み込みとコンテンツのインタラクティブな機能を分割する必要があります。その結果、目に見えるテキスト、スタイル、画像などの必要なコンテンツが最初に読み込まれます。</p>
+
+<p>最初のページ読み込みで使用されない、あるいは目に見えない画像やスクリプトは読み込みしないようにしましょう。それらは読み込みを遅らせて、ページが使用可能になってから読み込むか、必要になった時に読み込みましょう。最初のページ読み込みの後で、追加のアセットやリソースを読み込むことは知覚されるパフォーマンスを改善します。最初のリクエストで必要なデータを読み込み、必要に応じて徐々に必要な部分やデータを読み込むことは帯域が限られている場合やスペックの低いハードウェアの問題を緩和することにも役立ちます。</p>
+
+<p>さらに、読み込むアセットを最適化する必要があります。画像と動画は最適なフォーマットで、圧縮され、適切なサイズで提供されるべきです。</p>
+
+<h3 id="Prevent_jumping_content_and_other_reflows" name="Prevent_jumping_content_and_other_reflows">コンテンツのジャンプとリフローを防ぐ</h3>
+
+<p>画像やサードバーティーの広告のような、コンテンツを押し下げたり他の場所にジャンプさせたりするアセットは、ページがまだ読み込み中であるように感じさせ、知覚されるパフォーマンスを悪化させます。ユーザーのインタラクションに起因することなくリフローするコンテンツは特に悪いと言えます。他と比べて読み込みが遅く、かつ他のコンテンツがスクリーンに描画された後に要素が読み込まれるアセットは、レイアウト上にそれらのためのスペースを残すよう事前に計画しましょう。そうすることでコンテンツは、とくにサイトがインタラクション可能になった後で、ジャンプやリサイズしなくなります。</p>
+
+<h3 id="Avoid_font_file_delays" name="Avoid_font_file_delays">フォントファイルの遅延を避ける</h3>
+
+<p>フォントの使用はユーザーの体験を良くすることも悪くすることもあります。適切なフォントを選ぶことは芸術的であり、ユーザーの体験を劇的に良くすることもできます。フォントは、特に使用するフォントをインポートしなければいけないという点でユーザーの体験を悪化させることがあります。インポートするフォントが最適化されていない場合や馬鹿げた Comic Sans が使用されている場合はそうです。スタイリングされていないテキストのチラつきや該当するテキストが見つからないことはどちらもパフォーマンスを悪化させます。</p>
+
+<p>同じサイズとウェイトのフォールバックフォントを用意しておきましょう。そうすることでフォントの読み込みによるページの変化に気付かれにくくなります。</p>
+
+<h3 id="Interactive_elements_are_interactive" name="Interactive_elements_are_interactive">インタラクティブな要素はインタラクティブに</h3>
+
+<p>目に見えるインタラクティブな要素は常にインタラクティブで反応できるようにしましょう。入力の要素が目に見える場合、ユーザーは遅延なしにそれらとインタラクションできるべきです。ユーザーは反応に 50 ミリ秒より長い時間がかかる場合、それが遅れていると感じます。コンテンツの再描画が 16.67 ミリ秒（または 60 frames per second）より遅いか、不規則な間隔で再描画されるとページが壊れているように感じます。</p>
+
+<p>CSS で入力用のモーダルを表示したり、可能な場合は JS で先行入力・自動補完を追加するなど、先行入力や漸進的な拡張を使いましょう。</p>
+
+<h3 id="Make_task_initiators_appear_more_interactive" name="Make_task_initiators_appear_more_interactive">タスクの開始をよりインタラクティブにする</h3>
+
+<p>キーの押し上げを待たずにキーの押し下げでコンテンツをリクエストすることにより、知覚されるコンテンツの読み込みを 200 ミリ秒減らすことができます。キーの押し上げに合わせて興味深く、ただし目立ちすぎない 200 ミリ秒のアニメーションを追加することで知覚される読み込みをさらに 200 ミリ秒減らすことができます。実際に 400 ミリ秒の時間を削減したわけではありませんが、ユーザーは、自分がコンテンツを待っていると感じるまでは待っているとは感じないものです。</p>
+
+<h2 id="Conclusion" name="Conclusion">結論</h2>
+
+<p>ダウンロード、描画、待ち時間を能動的なフェーズに変え、受動的に待つ時間を減らすことにより、客観的な測定値が同じであったとしても、ユーザーはコンテンツのダウンロード、描画、反応がより速くなったように感じます。これで速度向上のために何をするべきかわかりました。次はいくつかの統計値を確認し、これらのイベントをどのように測定できるか学びましょう。</p>
+
+<p>{{PreviousMenuNext("Learn/Performance/what_is_web_performance", "Learn/Performance/Measuring_performance", "Learn/Performance")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内</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>
diff --git a/files/ja/learn/performance/web_performance_basics/index.html b/files/ja/learn/performance/web_performance_basics/index.html
new file mode 100644
index 0000000000..276e2f2e04
--- /dev/null
+++ b/files/ja/learn/performance/web_performance_basics/index.html
@@ -0,0 +1,89 @@
+---
+title: ウェブパフォーマンスの基礎
+slug: Learn/Performance/Web_Performance_Basics
+tags:
+  - Best practices
+  - Website performance
+translation_of: Learn/Performance/Web_Performance_Basics
+---
+<p>{{draft}}あなたのウェブサイトが可能な限りのパフォーマンスを発揮すべき<a href="https://web.dev/why-speed-matters/">理由</a>はたくさんあります。<br>
+ 以下に、各トピックの詳細情報を提供するためのリンク付きのベストプラクティス、ツール、API の簡単なレビューを示します。</p>
+
+<h2 id="Best_practices">Best practices</h2>
+
+<ul>
+ <li>Start with learning the <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path">critical rendering path</a> of the browser. Knowing this will help you understand how to improve the performance of the site.</li>
+ <li>Using <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints">resource hints</a> such as <code>rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload</code></li>
+ <li>Keep the size of Javascript to a <a href="https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4">minimum</a>. Only use as much Javascript as needed for the current page.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/CSS_performance">CSS</a> performance factors</li>
+ <li>Use <a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/HTTP2">HTTP/2</a> on your server (or CDN).</li>
+ <li>Use a CDN for resources which can reduce load times significantly.</li>
+ <li>Compress your resources using <a href="https://www.gnu.org/software/gzip/" rel="nofollow noopener">gzip</a>, <a href="https://github.com/google/brotli" rel="nofollow noopener">Brotli</a>, and <a href="https://github.com/google/zopfli" rel="nofollow noopener">Zopfli</a>.</li>
+ <li>Image optimization (use CSS animation, or SVG if possible).</li>
+ <li>Lazy loading parts of your application outside the viewport. If you do, have a backup plan for SEO (e.g render full page for bot traffic); for example, by using the {{htmlattrxref("loading", "img")}} attribute on the {{HTMLElement("img")}} element</li>
+ <li>It is also crucial to realize what is really important to your users. It might not be absolute timing, but <a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/perceived_performance">user perception</a>.</li>
+</ul>
+
+<h2 id="Quick_Wins">Quick Wins</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Web performance is all about user experience and perceived performance. As we learned in the <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path">critical rendering path</a> document, linking CSS with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering. Optimize the rendering of your page by removing blocking CSS.</p>
+
+<p>To load CSS asynchronously one can simpy set the media type to print and then change to all once loaded. The following snippet includes an onload attribute, requiring Javascript, so it is important to include a noscript tag with a traditional fallback.</p>
+
+<pre class="brush: html notranslate">&lt;link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"&gt;
+&lt;noscript&gt;&lt;link rel="stylesheet" href="/path/to/my.css"&gt;&lt;/noscript&gt;
+</pre>
+
+<p>The downside with this approach is the flash of unstyled text (FOUT.) The simplist way to address this is by inlining CSS that is required for any content that is rendered above the fold, or what you see in the browser viewport before scrolling. These styles will improve perceived performance as the CSS does not require a file request.</p>
+
+<pre class="brush: html notranslate">&lt;style type="text/css"&gt;
+// Insert your CSS here
+&lt;/style&gt;
+</pre>
+
+<h3 id="Javascript">Javascript</h3>
+
+<p>Avoid Javascript blocking by using the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script">async</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script">defer</a> attributes, or link javascript assets after the page's DOM elements. Javascript only block rendering for elements that appear after the script tag in the DOM tree.</p>
+
+<h3 id="Web_Fonts">Web Fonts</h3>
+
+<p>EOT and TTF formats are not compressed by default. Apply compression such as GZIP or Brotli for these file types. Use WOFF and WOFF2. These formats have compression built in.</p>
+
+<p>Within @font-face use font-display: swap. By using font display swap the browser will not block rendering and will use the backup system fonts that are defined. Optimiize <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight">font weight</a> to match the web font as closely as possible.</p>
+
+<h4 id="Icon_web_fonts">Icon web fonts</h4>
+
+<p>If possible avoid icon web fonts and use compressed SVGs. To further optimize inline your SVG data within HTML markup to avoid HTTP requests.</p>
+
+<h2 id="Tools">Tools</h2>
+
+<ul>
+ <li>Learn to use the <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance">Firefox Dev Tools</a> to profile your site.</li>
+ <li><a href="https://developers.google.com/speed/docs/insights/v5/about">Pagespeed Insights</a> can analyze your page and give some general hints to improve performance.</li>
+ <li><a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> can give you a detailed breakdown of many aspects of your site including performance, SEO and accessibility.</li>
+ <li>Test your page's speed using <a href="http://webpagetest.org/">Webpagetest.org</a>, where you can use different real device types and locations.</li>
+ <li>Try the <a href="https://developers.google.com/web/tools/chrome-user-experience-report">Chrome User Experience Report</a> which quantifies real user metrics.</li>
+ <li>Define a<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Performance_budget"> performance budget.</a></li>
+</ul>
+
+<h3 id="APIs">APIs</h3>
+
+<ul>
+ <li>Gather user metrics using <a href="https://github.com/akamai/boomerang">https://github.com/akamai/boomerang</a></li>
+ <li>Or directly gather with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/performance">window.performance.timing</a></li>
+</ul>
+
+<h3 id="Things_not_to_do_bad_practices">Things not to do (bad practices)</h3>
+
+<ul>
+ <li>Download everything</li>
+ <li>Use uncompressed media files</li>
+</ul>
+
+<h2 id="See_also">See also:</h2>
+
+<ul>
+ <li><a href="https://github.com/filamentgroup/loadCSS">https://github.com/filamentgroup/loadCSS</a></li>
+</ul>
diff --git a/files/ja/learn/performance/what_is_web_performance/index.html b/files/ja/learn/performance/what_is_web_performance/index.html
new file mode 100644
index 0000000000..f969943627
--- /dev/null
+++ b/files/ja/learn/performance/what_is_web_performance/index.html
@@ -0,0 +1,90 @@
+---
+title: ウェブパフォーマンスとは何ですか？
+slug: Learn/Performance/What_is_web_performance
+tags:
+  - Beginner
+  - Introduction
+  - Learn
+  - Performance
+  - Reference
+  - Tutorial
+  - Web Performance
+translation_of: Learn/Performance/What_is_web_performance
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Performance/why_web_performance", "Learn/Performance/Perceived_performance", "Learn/Performance")}}</div>
+
+<p>ウェブパフォーマンスは、実際には遅い処理を速いように見せることを含め、ウェブサイトを速くすることに関わるすべての事柄を表します。サイトを速く読み込む、ユーザーが早くインタラクションを始められるようにする、あるいは、読み込みに時間がかかる場合は、たとえばローディングスピナーを表示するなど、ユーザーが安心できるフィードバックを提供する、これらができていますか？スクロールとアニメーションは滑らかですか？この記事では、客観的で測定可能なウェブパフォーマンス*についての簡潔なイントロダクションを提示し、どのような技術、テクニック、そして最適化に関わるツールが利用できるかを探っていきます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>
+    <p>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基礎知識</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>
+    <p>Web パフォーマンスに関わる事項について基本的な理解を得ること</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><em>* 次の記事でカバーする主観的な<a href="/ja/docs/Learn/Performance/perceived_performance">知覚される</a></em><em><a href="/ja/docs/Learn/Performance/perceived_performance">パフォーマンス</a>の逆</em></p>
+
+<h2 id="What_is_web_performance" name="What_is_web_performance">ウェブパフォーマンスとは何ですか？</h2>
+
+<p>ウェブパフォーマンスはウェブサイトまたはウェブアプリケーションの客観的な測定結果とユーザーによって知覚される体験です。これには以下の主要な領域が含まれます。</p>
+
+<ul>
+ <li><strong>全体の読み込み時間を減らすこと</strong>：ウェブサイトを描画するためにリクエストされたファイルをユーザーのコンピューターにダウンロードするのにどれくらいの時間がかかりますか？この問いの答えは、ネットワークの<a href="/ja/docs/Web/Performance/Understanding_latency">レイテンシー</a>やファイルの大きさ、ファイルの数、その他様々な要因に影響を受けます。ひとつの一般的な戦略は、ファイルをできる限り小さくすること、HTTP リクエストの回数をできるだけ少なくすること、そしてファイルをより早く利用可能にするために、たとえば<a href="/ja/docs/Web/HTML/Preloading content">プリロード</a>のような、賢い読み込みのテクニックを使うことです。</li>
+ <li><strong>サイトをできる限り早く利用可能にすること</strong>：これはすなわち、ユーザーが実際により早く利用を開始できるように、ウェブサイトのアセットを意味のある順序で読み込むことを意味しています。ユーザーが最初のタスクに手をつけている間にバックグラウンドでその他のアセットの読み込みを続けます。必要になったときに必要なアセットだけを読み込む場合もあります（これを<a href="/ja/docs/Web/Performance/Lazy_loading">遅延読み込み</a>と言います。）サイトの読み込みを始めてから、そのサイトが最初に利用可能になるまでどのくらい時間がかかるか測定した値を <a href="/ja/docs/Glossary/Time_to_interactive">Time to Interactive</a> と呼びます。</li>
+ <li><strong>スムーズさとインタラクティブ性</strong>：そのアプリケーションは使っていて信頼でき、楽しいと感じられますか？スクロールはスムーズですか？ボタンはクリックできますか？ポップアップはすぐに開いてスムーズにアニメーションしますか？アプリケーションがスムーズだと感じさせるための様々なベストプラクティスがあります。たとえば、アニメーションのために JavaScript ではなく CSS を使うこと、DOM の変更により UI  が要求する再描画の回数をできる限り少なくすることなどが挙げられます。</li>
+ <li><strong><a href="/ja/docs/Learn/Performance/perceived_performance">知覚されるパフォーマンス</a></strong>：ウェブサイトがユーザーにとっていかに速いように見せるかは、ウェブサイトが実際に速いがどうかよりもユーザーの体験への大きなインパクトがあります。ユーザーがパフォーマンスについてどう感じるかは重要です。あるいは、それは客観的な統計以上に重要です。しかし、それは主観的なもので、簡単に測定できるものではありません。知覚されたパフォーマンスは測定項目 (metric) ではなく、ユーザーからの見え方を表します。レイテンシーやそのほか何かの問題で操作に長い時間がかかる場合であっても、たとえば待ち時間の間にローディングスピナーを表示したり、便利なヒントやティップスを表示したり（他にはジョークや、その他適切だと思えるものであれば何でも良いです）することでユーザーのエンゲージを維持することは可能です。そういったアプローチはただ何も表示しないよりもずっと良いと言えます。何も表示されない時間は長く感じられ、その結果ユーザーはウェブサイトが壊れていると考えて利用をやめてしまう可能性もあります。</li>
+ <li><strong>パフォーマンスの測定</strong>：ウェブパフォーマンスにはアプリケーションの実際の速度と知覚的な速度を計測すること、パフォーマンスをできる限り最適化しその結果が維持されているか監視するという面があります。そこではいくつかのメトリクス（成功か失敗かを表す測定可能な指標）とそれらのメトリクスを測定するツールが必要になります。本記事の全体を通してそれらを検討します。</li>
+</ul>
+
+<p>まとめると、たくさんの要素がパフォーマンスに影響を与えます。レイテンシー、アプリケーションのサイズ、DOM ノードの数、リクエストされるリソースの数、JavaScript の性能、CPU 負荷、その他いろいろです。それらの読み込みとレスポンスの時間を小さくすることが重要です。それから、ユーザーの体験上後で必要になる部分を同期で読み込むなどして、サイトが利用可能になる時間をできる限り早くすることでレイテンシーを感じさせないようにするといった追加の要素も重要です。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>:ウェブのパフォーマンスには、Time to load、Frames per second、<a href="/ja/docs/Glossary/Time_to_interactive">Time to interactive</a> のような客観的や測定結果とコンテンツの読み込みがどれくらい長く感じられるかといった主観的な経験の両方が含まれます。</p>
+</div>
+
+<h2 id="How_content_is_rendered" name="How_content_is_rendered">コンテンツはどのように描画されるか</h2>
+
+<p>効率的にウェブパフォーマンス、その背後にある問題やここまでに挙げた主要なトピックを理解するためにはブラウザーがどのように動作するかについていくつかの詳細を理解することが必要です。これには以下のトピックが含まれます。</p>
+
+<ul>
+ <li><strong>ブラウザーはどのように動作するか</strong>：URL を入力し、<kbd>Enter</kbd> / <kbd>Return</kbd> を打ち込んだとき、ブラウザーはウェブサイトのファイルを持っているサーバーがどこにあるかを探しだし、そのサーバーとの接続を確立し、ファイルをリクエストします。詳しい概要は「<a href="/ja/docs/Web/Performance/How_browsers_work">ページの生成：ブラウザーはどのように動作するか</a>」を参照してください。</li>
+ <li><strong>ソースコードの順番</strong>：HTML の index ファイル上のソースの順番はパフォーマンスに重大な影響を及ぼす場合があります。index ファイルからリンクされた追加のアセットのダウンロードは、一般的にソースコードの順番に従ってシーケンシャルに実行されます。しかし、この部分はいくつかのリソースがそのコンテンツが解析、実行されるまで追加のダウンロードをブロックすることに気づくことで最適化できるようになります。</li>
+ <li><strong>クリティカルパス</strong>：これはファイルがサーバーからダウンロードされた後にブラウザーがウェブのドキュメントを構築するプロセスのことを指します。ブラウザーは明確に定義されたステップに従って、クリティカルレンダリングパスを最適化し、そのときのユーザーのアクションに関連するコンテンツの表示に優先順位をつけて、コンテンツの描画時間を大きく改善します。より詳しい情報は、<a href="/ja/docs/Web/Performance/Critical_rendering_path">Critical rendering path</a> を参照してください。</li>
+ <li><strong>ドキュメントオブジェクトモデル</strong>：ドキュメントオブジェクトモデル (DOM) は HTML のコンテンツと要素をツリーのノードとして表現するツリー構造を指します。そこには HTML のすべての属性とノード間の関係が含まれます。ページがロードされた後の追加の DOM 操作（たとえば、ノードの追加、削除、移動）はパフォーマンスに影響を与えます。そのため、DOM がどのように動作し、その問題をどのように和らげるかを理解するを理解することが重要です。詳しくは <a href="/docs/Web/API/Document_Object_Model">Document Object Model </a><a href="/ja/docs/Web/API/Document_Object_Model"> </a>を参照してください。</li>
+ <li><strong>レイテンシー</strong>：事前に述べましたが、簡単に言うと、レイテンシーとは、Web サイトのアセットがサーバーからユーザーのコンピューターまで移動するのにかかる時間のことです。そこには TCP と HTTP の接続を確立にかかるオーバーヘッドも含まれます。そして、リクエストとレスポンスのデータ (bytes) がネットワーク間を行き来するために必要となる避けようのないレイテンシーがあります。一方で、レイテンシーを減らすためのいくつかの方法があります。（たとえば、ダウンロードするファイルの数を減らすことで HTTP リクエストの数を減らすこと、CDN を利用してサイトのデータを世界中に効率よく展開すること、サーバーがより効率よくファイルを提供できるように HTTP/2 を利用することなどが挙げられます）このトピックに関わるすべての事柄は <a href="/ja/docs/Web/Performance/Understanding_latency">Understanding Latency</a> を参照してください。</li>
+</ul>
+
+<h2 id="Conclusion" name="Conclusion">結論</h2>
+
+<p>以上です。ウェブパフォーマンスのトピックに関するこの簡潔な要約が、あなたが全体のアイデアを理解するための助けとなり、さらに学ぶ意欲をかき立てることができたなら幸いです。この後は知覚されたパフォーマンスを取り上げ、避けられないパフォーマンスへの影響を、ユーザーにとって深刻に見えないようにする、あるいは完全に気づかれないようにする賢い方法について見ていきます。</p>
+
+<p>{{PreviousMenuNext("Learn/Performance/why_web_performance", "Learn/Performance/Perceived_performance", "Learn/Performance")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内</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>
diff --git a/files/ja/learn/performance/why_web_performance/index.html b/files/ja/learn/performance/why_web_performance/index.html
new file mode 100644
index 0000000000..fdc99200d6
--- /dev/null
+++ b/files/ja/learn/performance/why_web_performance/index.html
@@ -0,0 +1,101 @@
+---
+title: ウェブパフォーマンスの "なぜ"
+slug: Learn/Performance/why_web_performance
+tags:
+  - Beginner
+  - Introduction
+  - Learn
+  - Performance
+  - Reference
+  - Tutorial
+  - Web パフォーマンス
+translation_of: Learn/Performance/why_web_performance
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}</div>
+
+<p>ウェブパフォーマンスは、遅いプロセスを速く見せることも含めて、ウェブサイトを速くすることがすべてです。この記事では、なぜウェブパフォーマンスがサイト訪問者にとって、またビジネスの目標にとって重要なのかを紹介しています。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>
+    <p>基本的なコンピュータリテラシー、<a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基本的な知識。</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">目標:</th>
+   <td>良いユーザー体験のために、なぜウェブパフォーマンスが重要なのか、その基礎知識を身につけること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>ウェブパフォーマンスとは、サイトのコンテンツの<strong>読み込み</strong>や<strong>レンダリング</strong>の速さ、ユーザーとのやりとりへの反応の速さを指します。パフォーマンスの悪いサイトは、表示に時間がかかり、入力への反応が遅くなります。パフォーマンスの悪いサイトは、サイトの離脱率を高めます。パフォーマンスが悪いと、最悪の場合、コンテンツに完全にアクセスできなくなります。Web パフォーマンスの良い目標は、ユーザーがパフォーマンスに気づかないことです。サイトパフォーマンスのパフォーマンスに対する個人の認識は主観的なものですが、読み込みとレンダリングは測定できます。パフォーマンスが良いことは、ほとんどのサイト訪問者には明らかではないかもしれませんが、ほとんどの人は停滞しているサイトをすぐに認識するでしょう。それが私たちが気にする理由です。</p>
+
+<h2 id="なぜパフォーマンスを気にするのか？">なぜパフォーマンスを気にするのか？</h2>
+
+<p class="summary">ウェブパフォーマンスとそれに付随するベストプラクティスは、ウェブサイトの訪問者が良い体験をするために不可欠です。ある意味では、ウェブパフォーマンスは<a href="/ja/docs/Learn/Accessibility">ウェブアクセシビリティ</a>のサブセットと考えることができます。アクセシビリティと同様にパフォーマンスでは、サイト訪問者がサイトにアクセスするために使用しているデバイスとデバイスの接続速度を考慮します。</p>
+
+<p class="summary">例として、この記事を書いている時点で、ファイルサイズが 22.6 MB を超える 400 以上の HTTP リクエストがあった CNN.com の読み込み体験を考えてみましょう。</p>
+
+<ul>
+ <li class="summary">光ファイバーネットワークに接続されたデスクトップコンピュータでこれをロードすることを想像してみてください。これは比較的高速で、ファイルサイズはほとんど関係ないと思われます</li>
+ <li class="summary">公共交通機関で通勤しながら、9年目の iPad でテザリングされたモバイルデータを使って同じサイトを読み込むことを想像してみてください。同じサイトの読み込みに時間がかかり、携帯電話の電波状況によっては使えなくなる可能性があります。読み込みが終わる前に諦めてしまうかもしれません</li>
+ <li class="summary">カバレッジが限られているか、カバレッジがないインドの農村部で、35 ドルの Huawei デバイスで同じサイトをロードすることを想像してみてください。サイトの読み込みには非常に時間がかかり、ブロッキングスクリプトがタイミングアウトする可能性があり、読み込みが行われると CPU に悪影響を与えてブラウザがクラッシュします</li>
+</ul>
+
+<p class="summary">22.6 MB のサイトは、3G ネットワーク上での読み込みに最大 83 秒かかり、<code><a href="/ja/docs/Web/API/Document/DOMContentLoaded_event">DOMContentLoaded</a></code> (サイトのベースとなる HTML 構造の意味) は 31.86 秒でした。</p>
+
+<p class="summary">ダウンロードにかかる時間だけが大きな問題ではありません。多くの国では、いまだにメガバイト単位で請求されるインターネット接続があります。私たちの例では、22.6 MB の CNN.com をダウンロードするのに平均的なインド人の日給の約 11 % の費用がかかることになります。アフリカ北西部のモバイル・デバイスからだと、平均的な給料の2日分の費用がかかるかもしれません。 もしこのサイトが米国のキャリアの国際ローミングプランで読み込まれたとしたら？その費用に誰もが泣くことでしょう。("<a href="https://whatdoesmysitecost.com/">how much your site costs to download</a>" を参照)</p>
+
+<h3 dir="ltr" id="コンバージョン率を改善する">コンバージョン率を改善する</h3>
+
+<p>サイトのダウンロードとレンダリング時間を短縮することで、コンバージョン率とユーザー維持率が向上します。</p>
+
+<p><strong>コンバージョン率</strong>とは、サイト訪問者が測定された、または希望するアクションを実行する率のことです。例えば、購入する、記事を読む、ニュースレターを購読するなどです。コンバージョン率として測定されるアクションは、ウェブサイトのビジネス目標によって異なります。</p>
+
+<p>パフォーマンスはコンバージョンに影響を与えます。サイト訪問者は、サイトが2秒以内に読み込まれることを期待していますが、モバイル (一般的にはもっと時間がかかる) ではそれ以下になることもあります。同じサイト訪問者でも、遅いサイトを3秒で放棄し始めます。</p>
+
+<p>サイトの読み込み速度は1つの要因です。サイトがユーザーとのやり取りに反応するのが遅かったり、不愉快に見えたりすると、サイト訪問者は興味を失い、信頼を失います。</p>
+
+<p dir="ltr">ここでは、パフォーマンス向上の実例をいくつか紹介します。</p>
+
+<ul>
+ <li dir="ltr">
+  <p dir="ltr"><a href="https://wpostats.com/2018/05/30/tokopedia-new-users.html">Tokopedia reduced render time from 14s to 2s for 3G connections and saw a 19% increase in visitors, 35% increase in total sessions, 7% increase in new users, 17% increase in active users and 16% increase in sessions per user.</a></p>
+ </li>
+ <li dir="ltr">
+  <p dir="ltr"><a href="https://wpostats.com/2017/03/10/pinterest-seo.html">Rebuilding Pinterest pages for performance resulted in a 40% decrease in wait time, a 15% increase in SEO traffic and a 15% increase in conversion rate to signup.</a></p>
+ </li>
+</ul>
+
+<p class="summary">サイト訪問者を惹きつけ、維持するためには、アクセスしやすいサイトを作成し、優れたユーザー体験を提供する必要があります。ウェブサイトを構築するには、HTML、CSS、JavaScript が必要であり、通常は画像や動画などのバイナリファイルタイプも含まれます。サイトを構築する際の決定やツールの選択は、完成した作品のパフォーマンスに大きく影響します。</p>
+
+<p class="summary">良いパフォーマンスは資産です。パフォーマンスが悪ければ負債となります。サイトの速度は、バウンス率、コンバージョン、収益、ユーザー満足度、検索エンジンランキングに直接影響します。パフォーマンスの高いサイトは、訪問者の維持率とユーザーの満足度を高めることが示されています。遅いコンテンツはサイトの放棄につながることが示されており、訪問者の中には二度と戻ってこない人もいます。クライアントとサーバーの間を通過するデータ量を減らすことで、すべての関係者のコストを削減します。HTML/CSS/JavaScript とメディアファイルのサイズを減らすことで、ロード時間とサイトの消費電力の両方を削減できます (<a href="/ja/docs/Web/Performance/Performance_budgets">パフォーマンス予算</a>を参照)。</p>
+
+<p>パフォーマンスのトラッキングは重要です。ネットワーク速度やデバイスの機能など、複数の要因がパフォーマンスに影響を与えます。また、ビジネスの目的が違えば、サイトやサポートしている組織の目標に応じて、異なるメトリクスの方がより関連性が高いことを意味する場合もあります。サイトのパフォーマンスがどのように認識されるかは、ユーザー体験です。</p>
+
+<h2 id="まとめ">まとめ</h2>
+
+<p>ウェブパフォーマンスは、アクセシビリティだけでなく、組織やビジネスの目標を達成するための他のWeb サイトの測定基準にとっても重要です。ウェブサイトのパフォーマンスの良し悪しは、ほとんどのサイトの全体的な有効性と同様に、ユーザーエクスペリエンスと強力に相関しています。これが、ウェブパフォーマンスに注意を払うべき理由です。</p>
+
+<p>{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}</p>
+
+<h2 id="このモジュール">このモジュール</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Performance/why_web_performance">ウェブパフォーマンスの"なぜ"</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/What_is_web_performance">ウェブパフォーマンスとは何ですか？</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Perceived_performance">ユーザーはパフォーマンスをどのように知覚しますか？</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Measuring_performance">パフォーマンスの測定</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li>
+ <li><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/business_case_for_performance">パフォーマンスに光をあてる</a></li>
+</ul>