最速で最も最適化されたリソースは、送信されないリソースです。アプリケーションから不要なリソースを削除する必要があります。暗黙の想定と明示的な前提条件をチームで検討し、定期的に見直すことをおすすめします。いくつか例を示します。
- リソース X をページに必ず含めていましたが、ダウンロードと表示にかかるコストは、そのリソースがもたらす価値と相殺できていますか?その価値を測定して証明できるか?
- リソースは(特にサードパーティのリソースの場合)一貫したパフォーマンスを実現しているか?このリソースはクリティカル パスにあるか、またはクリティカル パスにある必要があるか。リソースがクリティカル パスにある場合、サイトの単一障害点になり得るか。つまり、リソースが利用できない場合、ページのパフォーマンスやユーザー エクスペリエンスに影響を及ぼしますか?
- このリソースには SLA が必要ですか、または SLA が必要ですか。このリソースは、圧縮、キャッシュ保存などのパフォーマンスに関するベスト プラクティスに沿ったものになっていますか?
ページに不要なリソース、またはさらに悪いことに、訪問者やホストしているサイトにあまり価値をもたらさず、ページのパフォーマンスを妨げているリソースがページに含まれていることは珍しくありません。これは、ファーストパーティとサードパーティのリソースとウィジェットにも同様に当てはまります。
- サイト A はホームページに写真カルーセルを表示し、訪問者がクリックするだけで複数の写真をプレビューできるようにすることにしました。ページが読み込まれるとすべての写真が読み込まれ、ユーザーが次に写真を読み進めます。
- 質問: カルーセルで複数の写真を表示したユーザーの数を測定しましたか?ほとんどのユーザーが閲覧しないリソースをダウンロードすると、オーバーヘッドが高くなる可能性があります。
- サイト B では、関連コンテンツの表示、ソーシャル エンゲージメントの向上、その他のサービスの提供を目的として、サードパーティのウィジェットをインストールすることにしました。
- 質問: ウィジェットを使用している訪問者、またはウィジェットが提供するコンテンツをクリックスルーした訪問者の数を追跡しましたか?このウィジェットが生成するエンゲージメントは、そのオーバーヘッドを正当化するのに十分なものか?さらに、読み込み方法を使用して、スクリプトが必要になるまで読み込まれないようにすることは可能ですか?
不要なダウンロードを排除するかどうかの判断は、慎重に検討して測定する必要があります。最良の結果を得るには、ページ上のすべてのアセットについて、これらの質問を定期的にリストアップして再検討します。
Core Web Vitals への影響
Core Web Vitals の初期版は、ウェブ利用時のユーザー エクスペリエンスを反映した一連の指標を提供するために Google によって導入されました。Core Web Vitals の最適化戦略は数多くありますが、ページで特定のリソースを読み込むかどうかが問いかけると、ウェブサイトの指標を改善するための手がかりになることがあります。ウェブに関する主な指標ごとに分類されたいくつかの例を以下に示します。これはすべての例を網羅しているわけではなく(他にも多くの例があります)、それらを読むことで参考になるかもしれません。
Largest Contentful Paint(LCP)
Largest Contentful Paint(LCP)は、最も大きなコンテンツ(ヒーロー画像、見出しなど)が読み込まれたタイミングを測定します。サイトの読み込みが速いという印象をユーザーに与える、知覚関連の重要な指標と考えられます。
一般に、ダウンロードするリソースが少なくなると、ユーザーが使用できる帯域幅がより少ないリソースに割り当てられるため、LCP の改善につながる可能性があります。典型的な例が遅延読み込みです。遅延読み込みでは、ページ読み込み時にビューポートの外側にある画像が、ユーザーが目にする可能性が高いとブラウザが判断するまでダウンロードされません。たとえば 50 枚の画像の大きなサムネイル ギャラリーがある場合、すべての画像を遅延読み込みし、そのうち上位 10 枚までしか遅延読み込みを行わない場合、ブラウザは利用可能な帯域幅をより効率的に使用でき、ユーザーが最初に目にする画像の読み込みが速くなります。
ただし、必ずしも画像の読み込みを減らすだけではありません。ブラウザには、各リソースが受信する帯域幅を決定する内部優先度スキームがあります。ただし、このようにすべてのリソース、特に高い優先度でダウンロードされたリソースであっても、潜在的な LCP 要素の依存リソースが奪われる可能性があります。これはネットワーク接続が遅い場合に特に当てはまります。依存するリソースは、ページの LCP 要素を表す画像ファイルである可能性がありますが、ページの LCP 要素として判断される可能性があるテキストノードをブラウザがレンダリングするために必要とするウェブフォント リソースである場合もあります。
ウェブサイトのテキストが多すぎる場合、ページの LCP 要素がテキストノードになっている可能性があります。フォントの最適化と読み込みに関する優れた戦略は数多くありますが、システム フォントがウェブサイトのニーズに十分かどうかを検討することをおすすめします。それにより、テキストノードである LCP 要素は、ウェブフォント リソースに依存せずに読み込み、CSS と HTML がサーバーから到着した時点ですぐに描画できるようになります。
Cumulative Layout Shift(CLS)
読み込むすべてのリソースが、ページの Cumulative Layout Shift(CLS)に影響する可能性があります。特に、初回ペイントの時点でダウンロードが完了していない場合、その影響は大きくなります。画像の場合、CLS には明示的なサイズの設定などの手法が伴います。フォントについては、フォントの読み込みと代替フォントのマッチングを管理することで、ウェブフォントのスワップ期間中のシフトを最小限に抑えることができます。JavaScript の場合、レイアウト シフトを許容量に減らすために、スクリプトによる DOM の操作方法を管理できます。
ページの CLS に寄与するすべてのリソースで、ページ レイアウトが十分に安定していることを確認する必要があります。特定のリソースが必要かどうかを問うことで、単にページの読み込みを高速化するだけでなく、レイアウトの安定性を維持するために必要な認知作業も減らすことができます。これにより、ユーザー エクスペリエンスのフラストレーションが大幅に軽減されるだけでなく、プロジェクトの他の目標に取り組む時間が増えるため、デベロッパー エクスペリエンスのフラストレーションも軽減されます。
Interaction to Next Paint(INP)
Interaction to Next Paint(INP)は、ページ全体を通じたユーザー入力に対する応答性を測定します。ページの INP は、読み込まれる JavaScript に大きく影響されます。JavaScript は、ウェブ全体でのインタラクティビティのほとんどを後押ししているからです。特に、ページの読み込み時にダウンロードされるスクリプト リソースの量によって、スクリプトの評価とコンパイルに伴うコストがかかる作業が発生する可能性があります。起動時に読み込む JavaScript が少ないほど、ページ エクスペリエンスの重要なポイント(ユーザーが操作しようとする可能性がある)でブラウザが行う作業が少なくなります。
コードの分割やツリー シェイキングなど、起動時にダウンロードされる JavaScript リソースのサイズを小さくする方法がありますが、プロジェクトで使用しているパッケージを監査して、そもそも必要かどうかを確認することをおすすめします。たとえば、lodash には今でも役立つ多くのメソッドがありますが、マッピング、削減、フィルタリング、その他など、Array
固有の関数など、ブラウザに最初から搭載されているメソッドが備わっています。
プログレッシブ エンハンスメントは、JavaScript の便利なアプローチでもあります。より高性能なデバイスや高速なネットワーク接続を使用するユーザー向けに、基本の(機能し続けながら)エクスペリエンスをユーザーに提供できるためです。プログレッシブ エンハンスメントの原則を実践するかどうかにかかわらず、重要なのは、ダウンロードを回避できる JavaScript リソースはすべて、ユーザーの操作への応答が速くなるということです。これは、ウェブ パフォーマンスの重要な側面です。
おわりに
ウェブサイトの不要なダウンロードを監査することは、高速なユーザー エクスペリエンスを提供するための 1 つの側面に過ぎませんが、大きな影響を及ぼす可能性があります。まとめると次のようになります。
- ページ上の独自のアセットとサードパーティのアセットの一覧を作成する。
- 各アセットのパフォーマンス(価値と技術的パフォーマンス)を測定します。
- リソースが十分な価値を提供しているかどうかを判断する。
- 不要なダウンロードが Core Web Vitals と補助的な指標に及ぼす影響を把握します。
このようにコンテンツの効率を最適化することで、全体的なパフォーマンスが向上するだけでなく、ユーザーの帯域幅を浪費しないようにするだけでなく、ユーザー中心の指標を改善し、ユーザー エクスペリエンスを向上させることができます。