From 312082ffc9446ff7c2a8b21d5926e3ba23cb250c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 4 Aug 2021 10:23:01 +0900 Subject: Learn/Performance を更新 (#1687) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 以下の文書を 2021/07/25 時点の英語版に同期 - Learn/Performance - Learn/Performance/What_is_web_performance - Learn/Performance/why_web_performance --- .../performance/why_web_performance/index.html | 101 ++++++++++----------- 1 file changed, 50 insertions(+), 51 deletions(-) (limited to 'files/ja/learn/performance/why_web_performance') 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
{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}
-

ウェブパフォーマンスは、遅いプロセスを速く見せることも含めて、ウェブサイトを速くすることがすべてです。この記事では、なぜウェブパフォーマンスがサイト訪問者にとって、またビジネスの目標にとって重要なのかを紹介しています。

+

ウェブパフォーマンスは、遅い処理を速く見せることも含めて、ウェブサイトを速くすることがすべてです。この記事では、なぜウェブパフォーマンスがサイト訪問者にとって、またビジネスの目標にとって重要なのかを紹介しています。

- - - - - - - - - - + + + + + + + + + +
前提条件: -

基本的なコンピュータリテラシー、基本的なソフトウェアのインストール、クライアントサイドのウェブ技術の基本的な知識。

-
目標:良いユーザー体験のために、なぜウェブパフォーマンスが重要なのか、その基礎知識を身につけること。
前提条件:基本的なコンピューターリテラシー、基本的なソフトウェアのインストール、クライアント側のウェブ技術の基本的な知識。
目標:ユーザー体験を良くするために、なぜウェブパフォーマンスが重要なのか、その基礎知識を身につけること。
-

ウェブパフォーマンスとは、サイトのコンテンツの読み込みやレンダリングの速さ、ユーザーとのやりとりへの反応の速さを指します。パフォーマンスの悪いサイトは、表示に時間がかかり、入力への反応が遅くなります。パフォーマンスの悪いサイトは、サイトの離脱率を高めます。パフォーマンスが悪いと、最悪の場合、コンテンツに完全にアクセスできなくなります。Web パフォーマンスの良い目標は、ユーザーがパフォーマンスに気づかないことです。サイトパフォーマンスのパフォーマンスに対する個人の認識は主観的なものですが、読み込みとレンダリングは測定できます。パフォーマンスが良いことは、ほとんどのサイト訪問者には明らかではないかもしれませんが、ほとんどの人は停滞しているサイトをすぐに認識するでしょう。それが私たちが気にする理由です。

+

ウェブパフォーマンスとは、サイトのコンテンツの読み込みやレンダリングの速さ、ユーザーの操作への反応の速さを指します。パフォーマンスの悪いサイトは、表示に時間がかかり、入力への反応が遅くなります。パフォーマンスの悪いサイトは、サイトの離脱率を高めます。パフォーマンスが悪いと、最悪の場合、コンテンツに完全にアクセスできなくなります。ウェブパフォーマンスの良い目標は、ユーザーがパフォーマンスに気づかないことです。サイトパフォーマンスのパフォーマンスに対する個人の認識は主観的なものですが、読み込みとレンダリングは測定できます。パフォーマンスが良いことは、ほとんどのサイト訪問者には明らかではないかもしれませんが、ほとんどの人は停滞しているサイトをすぐに認識するでしょう。それが私たちが気にする理由です。

-

なぜパフォーマンスを気にするのか？

+

なぜパフォーマンスを気にするのか

-

ウェブパフォーマンスとそれに付随するベストプラクティスは、ウェブサイトの訪問者が良い体験をするために不可欠です。ある意味では、ウェブパフォーマンスはウェブアクセシビリティのサブセットと考えることができます。アクセシビリティと同様にパフォーマンスでは、サイト訪問者がサイトにアクセスするために使用しているデバイスとデバイスの接続速度を考慮します。

+

ウェブパフォーマンスとそれに関連するベストプラクティスは、ウェブサイトの訪問者が良い体験をするために不可欠です。ある意味では、ウェブパフォーマンスはウェブアクセシビリティの一部と考えることができます。アクセシビリティと同様にパフォーマンスでは、サイト訪問者がサイトにアクセスするために使用している端末と端末の接続速度を考慮します。

-

例として、この記事を書いている時点で、ファイルサイズが 22.6 MB を超える 400 以上の HTTP リクエストがあった CNN.com の読み込み体験を考えてみましょう。

+

例として、この記事を書いている時点で 400 以上の HTTP リクエストがあった、ファイルサイズが 22.6MB を超える CNN.com の読み込み時の体験を考えてみましょう。

-

22.6 MB のサイトは、3G ネットワーク上での読み込みに最大 83 秒かかり、DOMContentLoaded (サイトのベースとなる HTML 構造の意味) は 31.86 秒でした。

+

22.6 MB のサイトはを 3G ネットワーク上で読み込みむには最大 83 秒かかり、DOMContentLoaded (サイトのベースとなる HTML 構造の意味) は 31.86 秒でした。

-

ダウンロードにかかる時間だけが大きな問題ではありません。多くの国では、いまだにメガバイト単位で請求されるインターネット接続があります。私たちの例では、22.6 MB の CNN.com をダウンロードするのに平均的なインド人の日給の約 11 % の費用がかかることになります。アフリカ北西部のモバイル・デバイスからだと、平均的な給料の2日分の費用がかかるかもしれません。 もしこのサイトが米国のキャリアの国際ローミングプランで読み込まれたとしたら？その費用に誰もが泣くことでしょう。("how much your site costs to download" を参照)

+

また、大きな問題はダウンロードにかかる時間だけではありません。多くの国ではいまだに、メガバイト単位で課金されるインターネット接続が使われています。例として挙げた 22.6MB の CNN.com をダウンロードするには、平均的なインド人の日給の約 11 % の費用がかかることになります。北西アフリカのモバイル端末からだと、平均的な給料の 2 日分になるかもしれません。このサイトをアメリカのキャリアの国際ローミングプランで読み込んだとしたら？誰もが泣きたくなるようなコストになります。 ("how much your site costs to download" を参照)

-

コンバージョン率を改善する

+

コンバージョン率を改善する

サイトのダウンロードとレンダリング時間を短縮することで、コンバージョン率とユーザー維持率が向上します。

コンバージョン率とは、サイト訪問者が測定された、または希望するアクションを実行する率のことです。例えば、購入する、記事を読む、ニュースレターを購読するなどです。コンバージョン率として測定されるアクションは、ウェブサイトのビジネス目標によって異なります。

-

パフォーマンスはコンバージョンに影響を与えます。サイト訪問者は、サイトが2秒以内に読み込まれることを期待していますが、モバイル (一般的にはもっと時間がかかる) ではそれ以下になることもあります。同じサイト訪問者でも、遅いサイトを3秒で放棄し始めます。

+

パフォーマンスはコンバージョンに影響を与えます。サイト訪問者は、サイトが 2 秒以内に読み込まれることを期待していますが、モバイルではそれ以下になることもあります (一般的にはもっと時間がかかる)。同じサイト訪問者でも、遅いサイトを 3 秒で放棄し始めます。

-

サイトの読み込み速度は1つの要因です。サイトがユーザーとのやり取りに反応するのが遅かったり、不愉快に見えたりすると、サイト訪問者は興味を失い、信頼を失います。

+

サイトの読み込み速度は 1 つの要因です。サイトがユーザーの操作に反応するのが遅かったり、不愉快に見えたりすると、サイト訪問者は興味を失い、信頼を失います。

-

ここでは、パフォーマンス向上の実例をいくつか紹介します。

+

ここでは、パフォーマンス向上の実例をいくつか紹介します。

-

サイト訪問者を惹きつけ、維持するためには、アクセスしやすいサイトを作成し、優れたユーザー体験を提供する必要があります。ウェブサイトを構築するには、HTML、CSS、JavaScript が必要であり、通常は画像や動画などのバイナリファイルタイプも含まれます。サイトを構築する際の決定やツールの選択は、完成した作品のパフォーマンスに大きく影響します。

+

サイト訪問者を惹きつけ、維持するためには、アクセスしやすいサイトを作成し、優れたユーザー体験を提供する必要があります。ウェブサイトを構築するには、HTML、CSS、JavaScript が必要であり、通常は画像や動画などのバイナリファイルタイプも含まれます。サイトを構築する際の決定やツールの選択は、完成した作品のパフォーマンスに大きく影響します。

-

良いパフォーマンスは資産です。パフォーマンスが悪ければ負債となります。サイトの速度は、バウンス率、コンバージョン、収益、ユーザー満足度、検索エンジンランキングに直接影響します。パフォーマンスの高いサイトは、訪問者の維持率とユーザーの満足度を高めることが示されています。遅いコンテンツはサイトの放棄につながることが示されており、訪問者の中には二度と戻ってこない人もいます。クライアントとサーバーの間を通過するデータ量を減らすことで、すべての関係者のコストを削減します。HTML/CSS/JavaScript とメディアファイルのサイズを減らすことで、ロード時間とサイトの消費電力の両方を削減できます (パフォーマンス予算を参照)。

+

良いパフォーマンスは資産です。パフォーマンスが悪ければ負債となります。サイトの速度は、バウンス率、コンバージョン、収益、ユーザー満足度、検索エンジンランキングに直接影響します。パフォーマンスの高いサイトは、訪問者の維持率とユーザーの満足度を高めることが示されています。遅いコンテンツはサイトの放棄につながることが示されており、訪問者の中には二度と戻ってこない人もいます。クライアントとサーバーの間を通過するデータ量を減らすことで、すべての関係者のコストを削減します。 HTML/CSS/JavaScript とメディアファイルのサイズを減らすことで、ロード時間とサイトの消費電力の両方を削減できます (パフォーマンス予算を参照)。

-

パフォーマンスのトラッキングは重要です。ネットワーク速度やデバイスの機能など、複数の要因がパフォーマンスに影響を与えます。また、ビジネスの目的が違えば、サイトやサポートしている組織の目標に応じて、異なるメトリクスの方がより関連性が高いことを意味する場合もあります。サイトのパフォーマンスがどのように認識されるかは、ユーザー体験です。

+

パフォーマンスのトラッキングは重要です。ネットワーク速度や端末の機能など、複数の要因がパフォーマンスに影響を与えます。また、ビジネスの目的が違えば、サイトやサポートしている組織の目標に応じて、異なる指標の方がより関連性が高いことを意味する場合もあります。サイトのパフォーマンスがどのように認識されるかは、ユーザー体験です。

-

まとめ

+

まとめ

-

ウェブパフォーマンスは、アクセシビリティだけでなく、組織やビジネスの目標を達成するための他のWeb サイトの測定基準にとっても重要です。ウェブサイトのパフォーマンスの良し悪しは、ほとんどのサイトの全体的な有効性と同様に、ユーザーエクスペリエンスと強力に相関しています。これが、ウェブパフォーマンスに注意を払うべき理由です。

+

ウェブパフォーマンスは、アクセシビリティだけでなく、組織やビジネスの目標を達成するための他のウェブサイトの測定基準にとっても重要です。ウェブサイトのパフォーマンスの良し悪しは、ほとんどのサイトの全体的な有効性と同様に、ユーザー体験と強力に相関しています。これが、ウェブパフォーマンスに注意を払うべき理由です。

{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}

-

このモジュール

+

このモジュール

-- cgit v1.2.3-54-g00ecf