diff options
| -rw-r--r-- | files/ja/learn/performance/index.html | 156 | ||||
| -rw-r--r-- | files/ja/learn/performance/what_is_web_performance/index.html | 69 | ||||
| -rw-r--r-- | files/ja/learn/performance/why_web_performance/index.html | 101 |
3 files changed, 138 insertions, 188 deletions
diff --git a/files/ja/learn/performance/index.html b/files/ja/learn/performance/index.html index abf9eef434..c610246f70 100644 --- a/files/ja/learn/performance/index.html +++ b/files/ja/learn/performance/index.html @@ -1,120 +1,74 @@ --- -title: Web パフォーマンス +title: ウェブパフォーマンス slug: Learn/Performance +tags: + - CSS + - HTML + - HTTP + - JavaScript + - Learn + - Performance + - Web Performance translation_of: Learn/Performance --- -<p>{{LearnSidebar}}{{draft}}</p> +<p>{{LearnSidebar}}</p> -<p class="summary">Web サイトを構築するには、HTML、CSS、および JavaScript が必要です。人々が使用したい Web サイトやアプリケーションを構築し、ユーザを引き付けて維持するには、優れたユーザエクスペリエンスを作成する必要があります。良好なユーザエクスペリエンスの一部は、コンテンツの読み込みが迅速であり、ユーザの操作に反応することを保証することです。これは Web パフォーマンスと呼ばれ、このモジュールではパフォーマンスのよい Web サイトを構築するために必要なすべてを学習します。</p> +<p class="summary">ウェブサイトを構築するには、HTML、CSS、JavaScript が必要です。人々が使いたいと思うウェブサイトやアプリケーションを構築し、ユーザーを惹きつけ、維持するためには、優れた使い勝手を実現する必要があります。優れた使い勝手の一部は、コンテンツの読み込みが速く、ユーザーの操作に反応することです。これは<strong>ウェブパフォーマンス</strong>と呼ばれています。このモジュールでは、パフォーマンスの高いウェブサイトを作成するための基礎知識を学びます。</p> -<p>Webパフォーマンスとは、客観的な測定値であり、ロード時間と実行時間に関するユーザーエクスペリエンスの評価です。 Webパフォーマンスとは、サイトがロードされて対話型で応答するまでにかかる時間、およびユーザーとの対話中のコンテンツの滑らかさです。スクロールはスムーズですか？ボタンはクリック可能ですか？ポップアップはすばやく開くことができますか？また、ポップアップはスムーズにアニメーション化されますか？ Webパフォーマンスには、ロードにかかる時間、1秒あたりのフレーム数、インタラクティブにかかる時間などの客観的な測定値と、コンテンツのロードにかかったと感じる時間の主観的な経験値の両方が含まれます。<br> - <br> - レイテンシ、アプリケーションサイズ、DOMノードの数、行われたリソースリクエストの数、JavaScriptのパフォーマンス、CPU負荷など、多くの機能がパフォーマンスに影響を与えます。ロードと応答時間を最小限に抑え、エクスペリエンスを可能な限り早くインタラクティブにできるようにすることで、レイテンシーを隠すための追加機能を追加し、エクスペリエンスの長いテール部分で非同期的にロードすることが重要です。<br> - <br> - Webパフォーマンスの測定と改善に役立つツール、API、およびベストプラクティスがあります。これらもこのモジュールの過程で見ていきます。</p> +<p class="summary">初心者向けの教材では、パフォーマンスや<a href="/ja/docs/Learn/Accessibility">アクセシビリティ</a>などのウェブのベストプラクティスをできるだけ忠実に再現するようにしていましたが、このようなテーマにも特に焦点を当てて、よく理解しておくとよいでしょう。</p> -<h2 id="学習経路">学習経路</h2> +<h2 id="Learning_pathway">学習経路</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="/ja/docs/Learn/Getting_started_with_the_web">Web入門</a>」を完了することをお勧めします。ただし、そうすることは必ずしも必要ではありません。</p> +<p>多くのウェブパフォーマンスの改善提案を実施するためには、HTML、CSS、JavaScript の知識が必要ですが、ウェブパフォーマンスを理解し測定するためには、アプリケーションの構築方法を知っていることは必須条件ではありません。ただし、このモジュールに取り組む前に、少なくとも<a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>モジュールを使ってウェブ開発の基本的な知識を身につけておくことをお勧めします。</p> -<h2 id="Introductory_modules">Introductory modules</h2> +<p>また、以下のようなモジュールを使って、これらのトピックをもう少し深く掘り下げてみるのもよいでしょう。</p> -<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>画像を最適化することは、高性能なメディアリッチユーザーエクスペリエンスに不可欠ですが、画像をダウンロードするデバイスに合わせて適切なサイズにすることは特に重要です。この記事では、効率的な画像配信における<picture>要素や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> +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a></li> +</ul> +<p>このモジュールに取り組んだ後は、ウェブパフォーマンスについてもっと深く知りたくなるでしょう。パフォーマンス API の概要、テストと分析ツール、パフォーマンスのボトルネックの問題など、<a href="/ja/docs/Web/Performance">MDN のウェブパフォーマンスの章</a>で多くの詳しい説明を見つけることができます。</p> +<h2 id="Guides">ガイド</h2> -<h2 id="Advanced_Modules">Advanced Modules</h2> +<p>このトピックには、次のモジュールが含まれています。必ず最初のものから始めてください。</p> <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> + <dt><a href="/ja/docs/Learn/Performance/why_web_performance">ウェブパフォーマンスの「なぜ」</a></dt> + <dd>この記事では、ウェブパフォーマンスがなぜアクセシビリティ、ユーザーエクスペリエンス、ビジネスの目的に重要であるかを解説します。</dd> + <dt><a href="/ja/docs/Learn/Performance/What_is_web_performance">ウェブパフォーマンスとは</a></dt> + <dd>ウェブパフォーマンスが重要であることは分かりましたが、ウェブパフォーマンスとは何でしょうか？この記事では、ウェブページの読み込みとレンダリングから、コンテンツがどのようにユーザーのブラウザーに表示されるかを含め、パフォーマンスの構成要素を紹介します。</dd> + <dt><a href="/ja/docs/Learn/Performance/perceived_performance">ユーザーはパフォーマンスをどう知覚するのか</a></dt> + <dd>ユーザーがサイトの速さをどのように知覚するかということは、ウェブサイトの速さをミリ秒単位で示すことよりも重要です。 この認識は、実際のページの読み込みロード時間、アイドリング、ユーザー操作への応答性、スクロールやその他のアニメーションのスムーズさに影響されます。この記事では、様々な読み込みの指標、アニメーション、応答性の指標と、実際の時間よりもユーザーの認識を改善するためのベストプラクティスについて説明します。</dd> + <dt><a href="/ja/docs/Learn/Performance/Measuring_performance">パフォーマンスの計測</a></dt> + <dd>パフォーマンス指標のいくつかを理解したところで、パフォーマンスツール、指標、API について深く掘り下げ、パフォーマンスをウェブ開発のワークフローの一部にする方法を考えてみます。</dd> + <dt><a href="/ja/docs/Learn/Performance/Multimedia">マルチメディア: 画像</a></dt> + <dd>ウェブパフォーマンスの中で最も身近な位置にあるのは、メディアの最適化です。ユーザーエージェントの能力、大きさ、ピクセル密度に応じて、異なるメディアファイルを提供することが可能です。この記事では、画像がパフォーマンスに与える影響と、画像ごとに送信されるバイト数を削減する方法について説明します。</dd> + <dt><a href="/ja/docs/Learn/Performance/video">マルチメディア: 動画</a></dt> + <dd>ウェブパフォーマンスの中で最も身近な位置にあるのは、メディアの最適化です。この記事では、動画コンテンツがパフォーマンスに与える影響について説明し、バックグラウンドの動画からオーディオトラックの削除など、パフォーマンスを向上させるためのヒントを紹介します。</dd> + <dt><a href="/ja/docs/Learn/Performance/JavaScript">JavaScript パフォーマンスのベストプラクティス</a></dt> + <dd>JavaScript は、適切に使用すれば、インタラクティブで没入感のあるウェブ体験を実現できますが、ダウンロード時間、レンダリング時間、アプリ内のパフォーマンス、バッテリー寿命、ユーザー体験を大きく損なう可能性があります。この記事では、複雑なコンテンツであっても可能な限りパフォーマンスを向上させるために考慮すべき、 JavaScript のベストプラクティスを紹介します。</dd> + <dt><a href="/ja/docs/Learn/Performance/HTML">HTML のパフォーマンス特性</a></dt> + <dd>マークアップの属性やソースの順序によっては、ウェブサイトのパフォーマンスに影響を与えることがあります。 DOM ノードの数を最小限に抑え、スタイル、スクリプト、メディア、サードパーティのスクリプトなどのコンテンツを最適な順序と属性を使用して含めることで、ユーザーエクスペリエンスを劇的に向上させることができます。この記事では、最大限のパフォーマンスを確保するために HTML をどのように使用すればよいかを詳しく見ていきます。</dd> + <dt><a href="/ja/docs/Learn/Performance/CSS">CSS パフォーマンス特性</a></dt> + <dd>CSS は、パフォーマンス向上のための最適化の焦点としてはあまり重要ではないかもしれませんが、パフォーマンスに影響を与える CSS の特性がいくつかあります。この記事では、パフォーマンスに影響を与えるいくつかの CSS プロパティと、パフォーマンスに悪影響を与えないためのスタイルの処理方法を提案します。</dd> + <dt><a href="/ja/docs/Learn/Performance/Fonts">フォントとパフォーマンス</a></dt> + <dd>外部フォントを含める必要があるかどうか、含める場合には、サイトのパフォーマンスへの影響を最小限に抑えながら、デザインに必要なフォントを含める方法について説明します。</dd> + <dt><a href="/ja/docs/Learn/Performance/Mobile">モバイルパフォーマンス</a></dt> + <dd>モバイル端末でのウェブアクセスはとても人気があり、すべてのモバイルプラットフォームには本格的なウェブブラウザーが搭載されていますが、帯域幅、CPU、バッテリーの寿命が限られている可能性があるため、これらのプラットフォームでのウェブコンテンツのパフォーマンスを考慮することが重要です。この記事では、モバイルに特化したパフォーマンスの考慮点について説明します。</dd> + <dt><a href="/ja/docs/Learn/Performance/business_case_for_performance">パフォーマンスの重視</a></dt> + <dd>パフォーマンスを向上させるために開発者ができることは数多くありますが、どれくらいの速度があれば十分なのでしょうか。このような努力の重要性を権限を持った人に納得させるにはどうすればよいでしょうか。最適化した後、肥大化したパフォーマンスが戻らないようにするにはどうすればよいでしょうか。この記事では、経営陣の説得、パフォーマンス文化とパフォーマンス予算の策定、コードベースにリグレッションが潜り込まないようにする方法を紹介します。</dd> </dl> +<h2 id="See_also">関連情報</h2> + <dl> - <dt>リソースヒントを使用したリソース配信の制御</dt> - <dd>ブラウザは、リソースの優先順位付けと配信に関して、私たちよりもよく知っていますが、千里眼からはほど遠いです。ネイティブブラウザー機能により、ブラウザーが別のサーバーに接続するタイミングを示唆したり、ブラウザーが必要とする前にリソースをプリロードしたりできます。賢明に使用すると、これにより高速なエクスペリエンスがさらに速く見えるようになります。この記事では、rel = preconnect、rel = dns-prefetch、rel = prefetch、rel = preloadなどのネイティブブラウザー機能と、それらを活用する方法について説明します。</dd> + <dt><a href="/ja/docs/Learn/Performance/Web_Performance_Basics">ウェブパフォーマンスのリソース</a></dt> + <dd>HTML、CSS、JavaScript、メディアファイルなどのフロントエンドの構成物に加えて、アプリケーションを遅くする機能と、主観的・客観的にアプリケーションを速くする機能があります。ウェブパフォーマンスに関連する API、開発者ツール、ベストプラクティス、バッドプラクティスは数多くあります。ここでは、これらの機能の多くを基本的なレベルで紹介し、それぞれのトピックについて、パフォーマンスを向上させるためのより深い考察へのリンクを提供します。</dd> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></dt> + <dd>この記事では、画面サイズや解像度などが大きく異なる端末でも動作する画像、すなわちレスポンシブ画像の概念を学び、それを実現するために HTML が提供するツールを紹介します。これにより、異なる端末間でのパフォーマンスを向上させることができます。レスポンシブ画像は、<a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a>の一部であり、今後の CSS のテーマとなります。</dd> + <dt><a href="/ja/docs/Web/Performance">MDN のウェブパフォーマンスの章</a></dt> + <dd>ウェブパフォーマンスの章 — ここでは、パフォーマンス API の概要、テストと分析ツール、パフォーマンスのボトルネックの問題など、ウェブパフォーマンスに関するより詳細な情報をご覧いただけます。</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/what_is_web_performance/index.html b/files/ja/learn/performance/what_is_web_performance/index.html index f969943627..27dc13b688 100644 --- a/files/ja/learn/performance/what_is_web_performance/index.html +++ b/files/ja/learn/performance/what_is_web_performance/index.html @@ -1,5 +1,5 @@ --- -title: ウェブパフォーマンスとは何ですか？ +title: ウェブパフォーマンスとは slug: Learn/Performance/What_is_web_performance tags: - Beginner @@ -9,40 +9,37 @@ tags: - Reference - Tutorial - Web Performance + - Web パフォーマンス 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> +<p>ウェブパフォーマンスとは、遅い処理を速く<em>見せる</em>ことも含めて、ウェブサイトを速くすることです。サイトがすぐに読み込まれるか、ユーザーがすぐに操作を始めることができるか、何かの読み込みに時間がかかっている場合には安心感のあるフィードバック (ローディングスピナーなど) を提供しているか。スクロールやアニメーションはスムーズか。この記事では、客観的で測定可能なウェブパフォーマンス*について簡単に紹介し、ウェブの最適化にどのような技術、テクニック、ツールが必要なのかを見ていきます。</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> + <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><em>* 次の記事でカバーする主観的な<a href="/ja/docs/Learn/Performance/perceived_performance">知覚される</a></em><em><a href="/ja/docs/Learn/Performance/perceived_performance">パフォーマンス</a>の逆</em></p> +<p><em>* 次の記事で扱う主観的な<a href="/en-US/docs/Learn/Performance/Perceived_performance">知覚パフォーマンス</a>の対義語</em></p> -<h2 id="What_is_web_performance" name="What_is_web_performance">ウェブパフォーマンスとは何ですか？</h2> +<h2 id="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>: ウェブサイトの表示に必要なファイルが、ユーザーのコンピューターにダウンロードされるまでの時間です。これは、<a href="/ja/docs/Web/Performance/Understanding_latency">レイテンシー</a>、ファイルの大きさ、ファイルの数、その他の要因に影響される傾向があります。一般的な戦略としては、ファイルをできるだけ小さくしたり、 HTTP リクエストの数をできるだけ減らしたり、ファイルをより早く利用できるようにするための賢い読み込み技術 (<a href="/ja/docs/Web/HTML/Link_types/preload">先読み</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> @@ -60,10 +57,10 @@ translation_of: Learn/Performance/What_is_web_performance <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>：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> + <li><strong>ドキュメントオブジェクトモデル</strong>：ドキュメントオブジェクトモデル (DOM) は HTML のコンテンツと要素をツリーのノードとして表現するツリー構造を指します。そこには HTML のすべての属性とノード間の関係が含まれます。ページがロードされた後の追加の DOM 操作（たとえば、ノードの追加、削除、移動）はパフォーマンスに影響を与えます。そのため、DOM がどのように動作し、その問題をどのように和らげるかを理解するを理解することが重要です。詳しくは <a href="/ja/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> @@ -72,19 +69,19 @@ translation_of: Learn/Performance/What_is_web_performance <p>{{PreviousMenuNext("Learn/Performance/why_web_performance", "Learn/Performance/Perceived_performance", "Learn/Performance")}}</p> -<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> +<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">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> + <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> 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> |