Learn/Performance を更新 (#1687)

以下の文書を 2021/07/25 時点の英語版に同期
- Learn/Performance
- Learn/Performance/What_is_web_performance
- Learn/Performance/why_web_performance

1 files changed, 50 insertions, 51 deletions

diff --git a/files/ja/learn/performance/why_web_performance/index.html b/files/ja/learn/performance/why_web_performance/index.html
index fdc99200d6..7365b2333b 100644
--- a/files/ja/learn/performance/why_web_performance/index.html
+++ b/files/ja/learn/performance/why_web_performance/index.html
@@ -1,5 +1,5 @@
 ---
-title: ウェブパフォーマンスの "なぜ"
+title: ウェブパフォーマンスの「なぜ」
 slug: Learn/Performance/why_web_performance
 tags:
   - Beginner
@@ -8,6 +8,7 @@ tags:
   - Performance
   - Reference
   - Tutorial
+  - Web Performance
   - Web パフォーマンス
 translation_of: Learn/Performance/why_web_performance
 ---
@@ -15,87 +16,85 @@ translation_of: Learn/Performance/why_web_performance
 
 <div>{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}</div>
 
-<p>ウェブパフォーマンスは、遅いプロセスを速く見せることも含めて、ウェブサイトを速くすることがすべてです。この記事では、なぜウェブパフォーマンスがサイト訪問者にとって、またビジネスの目標にとって重要なのかを紹介しています。</p>
+<p>ウェブパフォーマンスは、遅い処理を速く<em>見せる</em>ことも含めて、ウェブサイトを速くすることがすべてです。この記事では、なぜウェブパフォーマンスがサイト訪問者にとって、またビジネスの目標にとって重要なのかを紹介しています。</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>
+	<tbody>
+		<tr>
+			<th scope="row">前提条件:</th>
+			<td>基本的なコンピューターリテラシー、<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>の基本的な知識。</td>
+		</tr>
+		<tr>
+			<th scope="row">目標:</th>
+			<td>ユーザー体験を良くするために、なぜウェブパフォーマンスが重要なのか、その基礎知識を身につけること。</td>
+		</tr>
+	</tbody>
 </table>
 
-<p>ウェブパフォーマンスとは、サイトのコンテンツの<strong>読み込み</strong>や<strong>レンダリング</strong>の速さ、ユーザーとのやりとりへの反応の速さを指します。パフォーマンスの悪いサイトは、表示に時間がかかり、入力への反応が遅くなります。パフォーマンスの悪いサイトは、サイトの離脱率を高めます。パフォーマンスが悪いと、最悪の場合、コンテンツに完全にアクセスできなくなります。Web パフォーマンスの良い目標は、ユーザーがパフォーマンスに気づかないことです。サイトパフォーマンスのパフォーマンスに対する個人の認識は主観的なものですが、読み込みとレンダリングは測定できます。パフォーマンスが良いことは、ほとんどのサイト訪問者には明らかではないかもしれませんが、ほとんどの人は停滞しているサイトをすぐに認識するでしょう。それが私たちが気にする理由です。</p>
+<p>ウェブパフォーマンスとは、サイトのコンテンツの<strong>読み込み</strong>や<strong>レンダリング</strong>の速さ、ユーザーの操作への反応の速さを指します。パフォーマンスの悪いサイトは、表示に時間がかかり、入力への反応が遅くなります。パフォーマンスの悪いサイトは、サイトの離脱率を高めます。パフォーマンスが悪いと、最悪の場合、コンテンツに完全にアクセスできなくなります。ウェブパフォーマンスの良い目標は、ユーザーがパフォーマンスに気づかないことです。サイトパフォーマンスのパフォーマンスに対する個人の認識は主観的なものですが、読み込みとレンダリングは測定できます。パフォーマンスが良いことは、ほとんどのサイト訪問者には明らかではないかもしれませんが、ほとんどの人は停滞しているサイトをすぐに認識するでしょう。それが私たちが気にする理由です。</p>
 
-<h2 id="なぜパフォーマンスを気にするのか？">なぜパフォーマンスを気にするのか？</h2>
+<h2 id="Why_care_about_performance">なぜパフォーマンスを気にするのか</h2>
 
-<p class="summary">ウェブパフォーマンスとそれに付随するベストプラクティスは、ウェブサイトの訪問者が良い体験をするために不可欠です。ある意味では、ウェブパフォーマンスは<a href="/ja/docs/Learn/Accessibility">ウェブアクセシビリティ</a>のサブセットと考えることができます。アクセシビリティと同様にパフォーマンスでは、サイト訪問者がサイトにアクセスするために使用しているデバイスとデバイスの接続速度を考慮します。</p>
+<p class="summary">ウェブパフォーマンスとそれに関連するベストプラクティスは、ウェブサイトの訪問者が良い体験をするために不可欠です。ある意味では、ウェブパフォーマンスは<a href="/ja/docs/Learn/Accessibility">ウェブアクセシビリティ</a>の一部と考えることができます。アクセシビリティと同様にパフォーマンスでは、サイト訪問者がサイトにアクセスするために使用している端末と端末の接続速度を考慮します。</p>
 
-<p class="summary">例として、この記事を書いている時点で、ファイルサイズが 22.6 MB を超える 400 以上の HTTP リクエストがあった CNN.com の読み込み体験を考えてみましょう。</p>
+<p>例として、この記事を書いている時点で 400 以上の HTTP リクエストがあった、ファイルサイズが 22.6MB を超える CNN.com の読み込み時の体験を考えてみましょう。</p>
 
 <ul>
- <li class="summary">光ファイバーネットワークに接続されたデスクトップコンピュータでこれをロードすることを想像してみてください。これは比較的高速で、ファイルサイズはほとんど関係ないと思われます</li>
- <li class="summary">公共交通機関で通勤しながら、9年目の iPad でテザリングされたモバイルデータを使って同じサイトを読み込むことを想像してみてください。同じサイトの読み込みに時間がかかり、携帯電話の電波状況によっては使えなくなる可能性があります。読み込みが終わる前に諦めてしまうかもしれません</li>
- <li class="summary">カバレッジが限られているか、カバレッジがないインドの農村部で、35 ドルの Huawei デバイスで同じサイトをロードすることを想像してみてください。サイトの読み込みには非常に時間がかかり、ブロッキングスクリプトがタイミングアウトする可能性があり、読み込みが行われると CPU に悪影響を与えてブラウザがクラッシュします</li>
+ <li>光ファイバーネットワークに接続されたデスクトップコンピューターでこれを読み込むことを想像してみてください。これは比較的高速で、ファイルサイズはほとんど関係ないと思われます。</li>
+ <li>公共交通機関で通勤しながら、 9 年間使用してきた iPad でテザリングしたモバイルデータ通信を使って同じサイトを読み込むことを想像してみてください。同じサイトの読み込みに時間がかかり、携帯電話の電波状況によっては使えなくなる可能性があります。読み込みが終わる前に諦めてしまうかもしれません。</li>
+ <li>利用エリアが限られているか、圏外になっているインドの農村部で、 35 ドルのファーウェイ製端末で同じサイトを読み込むことを想像してみてください。サイトの読み込みには非常に時間がかかり、ブロッキングスクリプトがタイミングアウトする可能性があり、読み込みが行われたとしても 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>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>
+<p>また、大きな問題はダウンロードにかかる時間だけではありません。多くの国ではいまだに、メガバイト単位で課金されるインターネット接続が使われています。例として挙げた 22.6MB の CNN.com をダウンロードするには、平均的なインド人の日給の約 11 % の費用がかかることになります。北西アフリカのモバイル端末からだと、平均的な給料の 2 日分になるかもしれません。このサイトをアメリカのキャリアの国際ローミングプランで読み込んだとしたら？誰もが泣きたくなるようなコストになります。 ("<a href="https://whatdoesmysitecost.com/">how much your site costs to download</a>" を参照)</p>
 
-<h3 dir="ltr" id="コンバージョン率を改善する">コンバージョン率を改善する</h3>
+<h3 id="Improve_conversion_rates">コンバージョン率を改善する</h3>
 
 <p>サイトのダウンロードとレンダリング時間を短縮することで、コンバージョン率とユーザー維持率が向上します。</p>
 
 <p><strong>コンバージョン率</strong>とは、サイト訪問者が測定された、または希望するアクションを実行する率のことです。例えば、購入する、記事を読む、ニュースレターを購読するなどです。コンバージョン率として測定されるアクションは、ウェブサイトのビジネス目標によって異なります。</p>
 
-<p>パフォーマンスはコンバージョンに影響を与えます。サイト訪問者は、サイトが2秒以内に読み込まれることを期待していますが、モバイル (一般的にはもっと時間がかかる) ではそれ以下になることもあります。同じサイト訪問者でも、遅いサイトを3秒で放棄し始めます。</p>
+<p>パフォーマンスはコンバージョンに影響を与えます。サイト訪問者は、サイトが 2 秒以内に読み込まれることを期待していますが、モバイルではそれ以下になることもあります (一般的にはもっと時間がかかる)。同じサイト訪問者でも、遅いサイトを 3 秒で放棄し始めます。</p>
 
-<p>サイトの読み込み速度は1つの要因です。サイトがユーザーとのやり取りに反応するのが遅かったり、不愉快に見えたりすると、サイト訪問者は興味を失い、信頼を失います。</p>
+<p>サイトの読み込み速度は 1 つの要因です。サイトがユーザーの操作に反応するのが遅かったり、不愉快に見えたりすると、サイト訪問者は興味を失い、信頼を失います。</p>
 
-<p dir="ltr">ここでは、パフォーマンス向上の実例をいくつか紹介します。</p>
+<p>ここでは、パフォーマンス向上の実例をいくつか紹介します。</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>
+	<li>
+	<p><a href="https://wpostats.com/2018/05/30/tokopedia-new-users.html">Tokopedia は、 3G 接続でレンダリング時間を 14 秒から 2 秒に短縮し、訪問者数が 19% 増、総セッション数が 35% 増、新規ユーザー数が 7% 増、アクティブユーザー数が 17% 増、ユーザーあたりのセッション数が 16% 増となりました。</a></p>
+	</li>
+	<li>
+	<p><a href="https://wpostats.com/2017/03/10/pinterest-seo.html">Pinterest のページをパフォーマンス向上のために再構築した結果、待ち時間が 40% 減少し、 SEO トラフィックが 15% 増加し、サインアップへのコンバージョン率が 15% 増加しました。</a></p>
+	</li>
 </ul>
 
-<p class="summary">サイト訪問者を惹きつけ、維持するためには、アクセスしやすいサイトを作成し、優れたユーザー体験を提供する必要があります。ウェブサイトを構築するには、HTML、CSS、JavaScript が必要であり、通常は画像や動画などのバイナリファイルタイプも含まれます。サイトを構築する際の決定やツールの選択は、完成した作品のパフォーマンスに大きく影響します。</p>
+<p>サイト訪問者を惹きつけ、維持するためには、アクセスしやすいサイトを作成し、優れたユーザー体験を提供する必要があります。ウェブサイトを構築するには、HTML、CSS、JavaScript が必要であり、通常は画像や動画などのバイナリファイルタイプも含まれます。サイトを構築する際の決定やツールの選択は、完成した作品のパフォーマンスに大きく影響します。</p>
 
-<p class="summary">良いパフォーマンスは資産です。パフォーマンスが悪ければ負債となります。サイトの速度は、バウンス率、コンバージョン、収益、ユーザー満足度、検索エンジンランキングに直接影響します。パフォーマンスの高いサイトは、訪問者の維持率とユーザーの満足度を高めることが示されています。遅いコンテンツはサイトの放棄につながることが示されており、訪問者の中には二度と戻ってこない人もいます。クライアントとサーバーの間を通過するデータ量を減らすことで、すべての関係者のコストを削減します。HTML/CSS/JavaScript とメディアファイルのサイズを減らすことで、ロード時間とサイトの消費電力の両方を削減できます (<a href="/ja/docs/Web/Performance/Performance_budgets">パフォーマンス予算</a>を参照)。</p>
+<p>良いパフォーマンスは資産です。パフォーマンスが悪ければ負債となります。サイトの速度は、バウンス率、コンバージョン、収益、ユーザー満足度、検索エンジンランキングに直接影響します。パフォーマンスの高いサイトは、訪問者の維持率とユーザーの満足度を高めることが示されています。遅いコンテンツはサイトの放棄につながることが示されており、訪問者の中には二度と戻ってこない人もいます。クライアントとサーバーの間を通過するデータ量を減らすことで、すべての関係者のコストを削減します。 HTML/CSS/JavaScript とメディアファイルのサイズを減らすことで、ロード時間とサイトの消費電力の両方を削減できます (<a href="/ja/docs/Web/Performance/Performance_budgets">パフォーマンス予算</a>を参照)。</p>
 
-<p>パフォーマンスのトラッキングは重要です。ネットワーク速度やデバイスの機能など、複数の要因がパフォーマンスに影響を与えます。また、ビジネスの目的が違えば、サイトやサポートしている組織の目標に応じて、異なるメトリクスの方がより関連性が高いことを意味する場合もあります。サイトのパフォーマンスがどのように認識されるかは、ユーザー体験です。</p>
+<p>パフォーマンスのトラッキングは重要です。ネットワーク速度や端末の機能など、複数の要因がパフォーマンスに影響を与えます。また、ビジネスの目的が違えば、サイトやサポートしている組織の目標に応じて、異なる指標の方がより関連性が高いことを意味する場合もあります。サイトのパフォーマンスがどのように認識されるかは、ユーザー体験です。</p>
 
-<h2 id="まとめ">まとめ</h2>
+<h2 id="Conclusion">まとめ</h2>
 
-<p>ウェブパフォーマンスは、アクセシビリティだけでなく、組織やビジネスの目標を達成するための他のWeb サイトの測定基準にとっても重要です。ウェブサイトのパフォーマンスの良し悪しは、ほとんどのサイトの全体的な有効性と同様に、ユーザーエクスペリエンスと強力に相関しています。これが、ウェブパフォーマンスに注意を払うべき理由です。</p>
+<p>ウェブパフォーマンスは、アクセシビリティだけでなく、組織やビジネスの目標を達成するための他のウェブサイトの測定基準にとっても重要です。ウェブサイトのパフォーマンスの良し悪しは、ほとんどのサイトの全体的な有効性と同様に、ユーザー体験と強力に相関しています。これが、ウェブパフォーマンスに注意を払うべき理由です。</p>
 
 <p>{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}</p>
 
-<h2 id="このモジュール">このモジュール</h2>
+<h2 id="In_this_module">このモジュール</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>
+	<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">マルチメディア: 画像</a></li>
+	<li><a href="/ja/docs/Learn/Performance/video">マルチメディア: 動画</a></li>
+	<li><a href="/ja/docs/Learn/Performance/JavaScript">JavaScript パフォーマンスのベストプラクティス</a></li>
+	<li><a href="/ja/docs/Learn/Performance/HTML">HTML のパフォーマンス特性</a></li>
+	<li><a href="/ja/docs/Learn/Performance/CSS">CSS パフォーマンス特性</a></li>
+	<li><a href="/ja/docs/Learn/Performance/Fonts">フォントとパフォーマンス</a></li>
+	<li><a href="/ja/docs/Learn/Performance/Mobile">モバイルパフォーマンス</a></li>
+	<li><a href="/ja/docs/Learn/Performance/business_case_for_performance">パフォーマンスの重視</a></li>
 </ul>