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