ウェブ パフォーマンスはウェブ開発の重要な側面であり、ページの読み込み速度と、ユーザー入力に対する応答性が重視されます。ウェブサイトのパフォーマンスを最適化すると、ユーザー エクスペリエンスが向上します。ユーザー エクスペリエンスの向上は、ウェブサイトに関する目標の達成に大いに役立ちます。
ウェブ パフォーマンスはニッチなトピックのように思えるかもしれませんが、実際には広範で奥深くもあります。ウェブ パフォーマンスに関するコースは、その分野の深さを考えると、親しみやすいものであると同時に、参考になる内容であることが重要です。このコースの初回リリースでは、初心者にとって有用なウェブ パフォーマンスの基礎に焦点を当てています。
このシリーズの各モジュールは、実用的に可能であれば、各モジュールのコンテンツを補完し、主要なパフォーマンス コンセプトを示す一連のデモを用意することを目的としています。このコースは初回提供サービスであるため、今後数か月の間に追加のモジュールが公開される予定です。
学習のパフォーマンスで最初に提供するコースの内容は次のとおりです。
速度が重要な理由
学習パフォーマンスの利用を開始する前に、まずユーザー エクスペリエンスにおける役割を理解し、それがユーザーにより良い成果をもたらす仕組みを理解する必要があります。このコースではまず、これらのトピックについて簡単に紹介し、パフォーマンスについて学ぶことがなぜ重要なのかについて重要なコンテキストを提供します。
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 と呼ばれています。このモジュールでは、この API の基本について説明します。
具体的なウェブワーカーのユースケース
ここまでで、ウェブワーカーとその機能、制限について基本を学びました。次は、ウェブワーカーの具体的なユースケースを見てみましょう。このデモでは、ユーザーがブラウザで確認できるように、ウェブワーカーを使用して JPEG ファイルを取得し、メタデータを抽出してメインスレッドに送り返します。
ウェブ パフォーマンスの学習を始めましょう。まずは、速度が重要である理由をご覧ください。