ウェブ パフォーマンスはウェブ開発において非常に重要な要素であり、ページの読み込み速度や、ユーザー入力に対する応答性に重点を置いています。ウェブサイトのパフォーマンスを最適化すると、ユーザー エクスペリエンスが向上します。ユーザー エクスペリエンスの向上は、ウェブサイトの目標を達成するうえで大いに役立ちます。
ウェブ パフォーマンスはニッチなトピックのように思えるかもしれませんが、実際には広範で深いトピックです。ウェブ パフォーマンスに関するコースは、分野としての深さを考えると、親しみやすいものであると同時に、有益でもあることが不可欠です。このコースの初回リリースでは、初心者の方が役立つウェブ パフォーマンスの基礎に焦点を当てています。
このシリーズの各モジュールは、可能な限り、各モジュールの内容を補足し、主要なパフォーマンス コンセプトを示す一連のデモを用意することを目的としています。このコースは初回であるため、今後数か月以内に追加のモジュールが公開される予定です。
学習パフォーマンスに関する初回コースの内容は次のとおりです。
速度が重要な理由
パフォーマンスの学習を開始する前に、まず、ユーザー エクスペリエンスにおけるその役割と、それがユーザーにとってより良い結果にどのようにつながるかを理解する必要があります。このコースでは、まずこれらのトピックについて簡単に紹介し、パフォーマンスの学習が重要な理由について重要なコンテキストを提供します。
HTML のパフォーマンスに関する一般的な考慮事項
どのウェブサイトも、まず HTML ドキュメントのリクエストから始まります。このリクエストは、ウェブサイトの読み込み速度において大きな役割を果たします。このモジュールでは、HTML キャッシュ、パーサー ブロック、レンダリング ブロックなどの重要な概念について説明します。これにより、ウェブサイトの HTML に対する最初のリクエストを適切に実行できるようになります。
クリティカル パスの理解
クリティカル レンダリング パスはウェブ パフォーマンスのコンセプトで、ページの最初のレンダリングがブラウザに表示されるまでの時間を表します。このモジュールでは、クリティカル レンダリング パスの背後にある理論について説明し、レンダリング ブロック リソースやパーサー ブロック リソースなどのコンセプトと、それらがブラウザでのページの表示速度に重要な役割を果たす仕組みについて説明します。
リソースの読み込みを最適化する
ページが読み込まれると、HTML 内で多くのリソースが参照されます。これらのリソースは、CSS を介してページの外観とレイアウトを提供し、JavaScript を介してインタラクティビティを提供します。このモジュールでは、これらのリソースに関する重要なコンセプトと、ページの読み込み時間に与える影響について説明します。
リソースヒントでブラウザをサポートする
リソースヒントは、HTML で使用できる機能の集まりです。ブラウザがリソースを早期にロードし、場合によってはリソースの優先度が高くなるよう支援できます。このモジュールでは、ページの読み込みをさらに高速化するためのリソースヒントをいくつか紹介します。
画像のパフォーマンス
現在多くのウェブページで転送されているデータの大部分は、画像を表しています。このモジュールでは、画像を最適化する方法と画像を効率的に提供し、ユーザーのデバイスに関係なくバイトの無駄を最小限に抑える方法について説明します。
動画のパフォーマンス
動画はウェブページで頻繁に使用されるメディアタイプですが、動画を効率的に配信する方法を知っておくことは、パフォーマンスの重要な要素の 1 つです。このモジュールでは、ウェブサイトの速度を維持したまま動画を埋め込むための主要なテクニックと、動画を使用することで生じるパフォーマンスに関する考慮事項について説明します。
ウェブフォントを最適化する
ウェブフォントはウェブ上でよく使用されるリソースですが、当然のことながら、他のリソースではできない方法でウェブサイトのデザインに加わります。それでも、ウェブフォントにはパフォーマンス コストがかかります。このモジュールでは、ウェブフォントのパフォーマンスに関するさまざまな考慮事項と手法について説明します。
コード分割 JavaScript
一部のリソースは、ウェブページの初期読み込みには重要ではありません。JavaScript はそのようなリソースの 1 つで、コード分割と呼ばれる手法により、必要になるまで遅延させることができます。これにより、帯域幅と CPU の競合を減らしてパフォーマンスを改善できます。これは、初期ページ読み込み速度と起動時の入力応答性の両方を向上させるうえで重要な考慮事項です。
画像と <iframe> 要素の遅延読み込み
画像と <iframe> 要素は、大量の帯域幅と CPU 処理時間を消費する可能性があります。ただし、最初のページの読み込み時にすべての画像や <iframe> 要素を読み込む必要はありません。ユーザーが画像を表示する可能性が最も高い次のタイミングまで延期できます。この手法を遅延読み込みといいます。このモジュールでは、画像と <iframe> 要素の遅延読み込みについて説明します。これにより、ページの読み込み時間を短縮し、必要な場合にのみ帯域幅と処理時間を消費できます。
プリフェッチ、事前レンダリング、Service Worker の事前キャッシュ
パフォーマンスの多くは、不要なリソースを最適化して排除する方法を扱っていますが、リソースが必要になる前に読み込む必要があると示唆するのは少し逆説的です。ただし、特定のリソースを事前に読み込むことが適切な場合もあります。このモジュールでは、プリフェッチ、事前レンダリング、Service Worker の事前キャッシュについて説明しながら、こうしたパフォーマンスの側面について学習します。
ウェブワーカーの概要
ブラウザでユーザーに表示される内容の多くは、メインスレッドと呼ばれる 1 つのスレッドで発生します。ただし、メインスレッドがユーザー向けの重要なタスクに対応できるように、新しいスレッドを起動して計算コストの高い処理を行うことができます。この処理を行う API は Web Worker API と呼ばれています。このモジュールでは、その基本について説明します。
具体的なウェブワーカーのユースケース
ウェブワーカーとその機能、制限事項の基本を理解したところで、次はウェブワーカーの具体的なユースケースを見てみましょう。このデモでは、ウェブワーカーを使用して JPEG ファイルを取得し、そのメタデータを抽出してメインスレッドに送り返しています。これにより、ユーザーはブラウザでファイルを確認できます。
ウェブ パフォーマンスの学習を始める準備はできましたか？まずは、速度が重要な理由をご覧ください。