{{LearnSidebar}}{{draft}}
Web サイトを構築するには、HTML、CSS、および JavaScript が必要です。人々が使用したい Web サイトやアプリケーションを構築し、ユーザを引き付けて維持するには、優れたユーザエクスペリエンスを作成する必要があります。良好なユーザエクスペリエンスの一部は、コンテンツの読み込みが迅速であり、ユーザの操作に反応することを保証することです。これは Web パフォーマンスと呼ばれ、このモジュールではパフォーマンスのよい Web サイトを構築するために必要なすべてを学習します。
Webパフォーマンスとは、客観的な測定値であり、ロード時間と実行時間に関するユーザーエクスペリエンスの評価です。 Webパフォーマンスとは、サイトがロードされて対話型で応答するまでにかかる時間、およびユーザーとの対話中のコンテンツの滑らかさです。スクロールはスムーズですか？ボタンはクリック可能ですか？ポップアップはすばやく開くことができますか？また、ポップアップはスムーズにアニメーション化されますか？ Webパフォーマンスには、ロードにかかる時間、1秒あたりのフレーム数、インタラクティブにかかる時間などの客観的な測定値と、コンテンツのロードにかかったと感じる時間の主観的な経験値の両方が含まれます。
レイテンシ、アプリケーションサイズ、DOMノードの数、行われたリソースリクエストの数、JavaScriptのパフォーマンス、CPU負荷など、多くの機能がパフォーマンスに影響を与えます。ロードと応答時間を最小限に抑え、エクスペリエンスを可能な限り早くインタラクティブにできるようにすることで、レイテンシーを隠すための追加機能を追加し、エクスペリエンスの長いテール部分で非同期的にロードすることが重要です。
Webパフォーマンスの測定と改善に役立つツール、API、およびベストプラクティスがあります。これらもこのモジュールの過程で見ていきます。
Webパフォーマンスの改善に関する多くの推奨事項を実装するにはHTML、CSS、およびJavaScriptを知っている必要がありますが、アプリケーションの構築方法を知っていることはWebパフォーマンスを理解および測定するための必須条件ではありません。
以下の導入モジュールのいくつかはプログラミングの知識を必要としませんが、HTMLおよびパフォーマンスモジュールにはHTMLの理解が必要であり、CSSおよびパフォーマンスモジュールにはCSSの理解が必要です。導入モジュールを使用することをお勧めします。まず、最初に「Webパフォーマンスとは何か」から始めます。入門モジュールは、Webパフォーマンスの概要を提供します。最初の3つは、開発者であろうとプロジェクトマネージャーであろうと読む必要があると考えるべきです。技術トピックに焦点を当てたモジュールは、これらの技術を使用する開発者により適しています。
高度なモジュールでは、入門モジュールで概要を説明したトピックをさらに深く掘り下げ、パフォーマンスAPI、テストおよび分析ツール、パフォーマンスのボトルネックの概要を提供します。
このトピックに進む前に、「Web入門」を完了することをお勧めします。ただし、そうすることは必ずしも必要ではありません。
このトピックには、次のモジュールが含まれています。必ず最初のものから始めてください。
HTML、CSS、JavaScript、およびメディアファイルのフロントエンドコンポーネントに加えて、アプリケーションを遅くできる機能と、アプリケーションを主観的および客観的に高速化できる機能があります。 Webパフォーマンスに関連する多くのAPI、開発者ツール、ベストプラクティス、および悪いプラクティスがあります。ここでは、これらの機能の多くを基本レベルで紹介し、各トピックのパフォーマンスを改善するためのより深いダイブへのリンクを提供します。
一部の属性とマークアップのソースの順序は、パフォーマンスまたはWebサイトに影響を与える可能性があります。 DOMノードの数を最小限に抑え、スタイル、スクリプト、メディア、サードパーティスクリプトなどのコンテンツを含めるために最適な順序と属性が使用されるようにすることで、ユーザーエクスペリエンスを大幅に改善できます。この記事では、パフォーマンスを最大限に高めるためにHTMLを使用する方法について詳しく説明します。
多くの場合、Webパフォーマンスの最も低い成果はメディアの最適化です。各ユーザーエージェントの機能、サイズ、ピクセル密度に基づいて異なるメディアファイルを提供することが可能です。バックグラウンドビデオからオーディオトラックを削除するなどの追加のヒントは、パフォーマンスをさらに向上させることができます。この記事では、ビデオ、オーディオ、画像のコンテンツがパフォーマンスに与える影響と、その影響を最小限に抑える方法について説明します。
画像を最適化することは、高性能なメディアリッチユーザーエクスペリエンスに不可欠ですが、画像をダウンロードするデバイスに合わせて適切なサイズにすることは特に重要です。この記事では、効率的な画像配信における<picture>要素やsrcset属性などのネイティブブラウザー機能の役割と、それらを自信を持って使用する方法について説明します。
JavaScriptを適切に使用すると、インタラクティブで没入型のWebエクスペリエンスを実現できます。または、ダウンロード時間、レンダリング時間、アプリ内パフォーマンス、バッテリー寿命、ユーザーエクスペリエンスに大きな悪影響を与える可能性があります。この記事では、複雑なコンテンツであっても可能な限りパフォーマンスを高めるために考慮すべきJavaScriptのベストプラクティスの概要を説明します。
パフォーマンスのランドスケープで見落とされることが多いのは、Webフォントです。 WebフォントはWebデザインにおいてこれまで以上に目立っていますが、多くの開発者は単にサードパーティのサービスからフォントを埋め込み、それについて何も考えていません。この記事では、効率的なファイル形式とサブ設定を使用して、フォントファイルをできるだけ小さくする方法について説明します。そこから、ブラウザのテキストのしくみ、CSSとJavaScriptの機能を使用してフォントをすばやくレンダリングし、ユーザーエクスペリエンスの中断を最小限に抑える方法について説明します。
モバイルデバイスでのWebアクセスは非常に人気があり、すべてのモバイルプラットフォームは本格的なWebブラウザーを備えていますが、帯域幅、CPU、およびバッテリーの寿命が制限されている可能性があるため、これらのプラットフォームでのWebコンテンツのパフォーマンスを考慮することが重要です。この記事では、モバイル固有のパフォーマンスに関する考慮事項について説明します。
レイテンシとは、ブラウザーがリソースを要求してから、ブラウザーが要求されたリソースの最初のバイトを受信するまでにかかる時間です。この記事では、レイテンシとは何か、それがパフォーマンスに与える影響、レイテンシを測定および改善する方法について説明します。
帯域幅は、1秒間に送信できるデータの量（MbpsまたはKbpsで測定）です。この記事では、メディアリッチインターネットアプリケーションにおける帯域幅の役割、測定方法、利用可能な帯域幅を最大限に活用するためにアプリケーションを最適化する方法について説明します。
トランスポート層（つまりHTTP）はWebの機能に不可欠であり、HTTP / 2の形で大きな更新が行われたのは比較的最近になってからです。すぐに使用できるHTTP / 2は、以前のバージョンよりも多くのパフォーマンスの改善と利点を提供しますが、状況を変えます。この記事では、HTTP / 2が何をするのか、そしてアプリケーションをさらに微調整してさらに前進させる方法を学びます。
TLS（またはHTTPSと呼ばれる傾向がある）は、安全で安全なユーザーエクスペリエンスを作成するために重要です。ハードウェアはTLSがサーバーのパフォーマンスに与える悪影響を軽減しましたが、ブラウザーがサーバーに接続するのを待つ時間のかなりの部分を占めています。この記事では、TLSハンドシェイクプロセスについて説明し、OCSPステープリング、HSTSプリロードヘッダー、サードパーティのTLSレイテンシをマスクするリソースヒントの潜在的な役割など、この時間を短縮するためのヒントを提供します。
{{LandingPageListSubpages}}