ウェブサイトのパフォーマンス向上に関しては、ミリ秒単位が重要です。重要なリソースの読み込み時間を短縮する最も効果的な方法の 1 つは、HTML リンクの rel="preload" 属性を使用することです。この投稿では、プリロードの仕組み、いつ使用するか、ウェブサイトのユーザー エクスペリエンスを大幅に向上させる方法について詳しく説明します。

rel="プリロード"とは何ですか?

rel="preload" 属性を使用すると、ページのレンダリング中に必要になる前に特定のリソースのダウンロードを開始するようにブラウザに指示できます。これにより、フォント、スタイルシート、スクリプトなどの主要なアセットがより早くフェッチされるようになり、ページが完全にレンダリングされるまでにかかる時間を短縮できます。

簡単に言うと、スムーズなエクスペリエンスにとってどのファイルが重要であるかについてブラウザに警告を与えることになります。

なぜプリロードを使用する必要があるのでしょうか?

ほとんどの Web パフォーマンスの最適化は、リソースの読み込みにかかる時間を短縮することに重点を置いています。プリロードは、ページの表示や機能の速度に直接影響を与えるフォント、CSS、JavaScript ファイルなどの重要なアセットがある場合に特に便利です。

プリロードがどのように役立つかは次のとおりです:

• レンダリング ブロックを減らす: 重要な CSS またはフォントをプリロードすると、ページがコンテンツを表示する前にこれらのリソースのロードを待機するレンダリング ブロックの問題を回避できます。
• First Contentful Paint (FCP) の改善: プリロードにより、重要なリソースがより速くダウンロードされ、最初のビジュアル コンテンツがユーザーに表示される速度が向上します。
• ユーザー エクスペリエンスの向上: ページの読み込みが高速になると、応答性が向上し、特にフォントやヒーロー画像などのリソースを多く使用するアセットの場合、全体的なユーザー エクスペリエンスが向上します。

構文と使用法

rel="preload" の使用方法の基本的な例から始めましょう。以下は、カスタム フォントのプリロードを示す簡単な HTML スニペットです:

この例では:

• hrefはリソースの URL を指定します。
• as は、リソースのタイプ (フォント、画像、スクリプトなど) を示します。
• type は、ブラウザがファイルの正確な形式を理解するのに役立ちます (フォントに役立ちます)。
• 別のドメインからリソースをロードする場合は、crossorigin が必要です。 ブラウザはこのタグを認識し、フォントを使用する CSS がまだ適用されていない場合でも、フォントを早期にダウンロードする必要があることを認識します。

さまざまな種類のリソースのプリロード
ページのレンダリングに重要なさまざまなタイプのリソースをプリロードできます。一般的な例をいくつか見てみましょう:

1.プリロードフォント
多くの場合、フォントは最初のページの読み込みが遅くなる主な原因です。これらをプリロードすると、コンテンツがレンダリングされるとすぐにテキストが正しくスタイル設定され、スタイルのないテキストのフラッシュ (FOUT) や非表示テキストのフラッシュ (FOIT) が防止されます。

2.スタイルシートのプリロード
ブラウザができるだけ早くページを表示できるように、ページのレイアウトを制御する重要なスタイルシートをプリロードする必要があります。

3.プリロードスクリプト
ユーザー操作にすぐに必要な JavaScript がある場合、それをプリロードすると、スクリプト実行の遅延を軽減できます。

4.画像のプリロード
大きい画像、特にスクロールせずに見える範囲で使用される画像は、画像の取得中にユーザーに空白スペースや画像のプレースホルダーが表示されないように、事前にロードする必要があります。

rel="preload" の使用に関するベスト プラクティス

プリロードは強力なツールですが、慎重に使用する必要があります。以下にいくつかのベスト プラクティスを示します:

1. 重要なリソースのみをプリロードする: すべてをプリロードすると、実際にはサイトの速度が低下する可能性があります。最初のページのレンダリングに不可欠なリソースだけを使用してください。

2. 外部リソースにcrossoriginを使用する: 別のドメインからリソースをプリロードする場合は、必ずcrossorigin属性を含めてください。これにより、CORS の問題なくリソースを正しくフェッチできるようになります。

3. 適切なキャッシュ処理を確保する: 冗長なネットワーク要求を防ぐために、プリロードされたリソースはキャッシュ可能である必要があります。これにより、サーバーとユーザーのブラウザの両方の負荷が軽減されます。

4. すべてをプリロードしない: 過剰なプリロードはブラウザに不必要な負担を与え、パフォーマンスの低下につながる可能性があります。クリティカルなレンダリング パスに不可欠なアセットのみをプリロードしてください。

ウェブサイトでの rel="preload" の使用例
一般的な Web ページに rel="preload" を統合する方法の完全な例を次に示します:

    
Preload Example
        

この例では、フォント、スタイルシート、画像など、ページのレンダリング速度に即座に影響を与える重要なアセットをプリロードしました。

rel="preload" を使用しない場合

プリロードは強力ですが、すべてのリソースに対応できる魔法のソリューションではありません。使用を避けたほうがよいケースがいくつかあります:

重要でないリソース: ページの最初のレンダリングに必須ではないアセットをプリロードしないでください。

予測不可能なリソース: 特定のアセットが条件付きである場合、またはユーザーの操作に依存する場合 (スクロールせずに見える画像や遅延 JavaScript など)、必要に応じてブラウザーにそれらをフェッチさせるのが最善です。

結論
rel="preload" を使用すると、重要なリソースをできるだけ早くフェッチするようにブラウザに指示し、Web サイトを高速化する簡単かつ効果的な方法です。フォント、スタイルシート、画像などの重要なアセットのプリロードに重点を置くことで、ロード時間を短縮し、ユーザー エクスペリエンスを向上させることができます。

重要なポイント: 重要なものだけをプリロードすると、Web サイトのパフォーマンスが大幅に向上します。次のプロジェクトで試してみて、その違いを確認してください!