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

---
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>