rel=\'preload\' で Web サイトを高速化する

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

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

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

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

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

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

プリロードがどのように役立つかを次に示します:

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

構文と使用法

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

<link rel="preload" href="/fonts/MyFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

この例では:

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

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

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

<link rel="preload" href="/fonts/OpenSans.woff2" as="font" type="font/woff2" crossorigin="anonymous">

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

<link rel="preload" href="/css/main.css" as="style">

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

<link rel="preload" href="/scripts/main.js" as="script">

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

<link rel="preload" href="/images/hero.jpg" as="image">

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

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

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

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

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

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

Example of Using rel="preload" on Your Website
Here’s a full example of how you can integrate rel="preload" in a typical web page:

    
    
    

    
    <link rel="preload" href="/fonts/OpenSans.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="/css/main.css" as="style">
    <link rel="preload" href="/scripts/main.js" as="script">
    <link rel="preload" href="/images/hero.jpg" as="image">

    
    


    

        
Preload Example
        
    

    

In this example, we’ve preloaded the essential assets that will immediately impact how fast the page renders, like fonts, stylesheets, and images.

When Not to Use rel="preload"

While preload is powerful, it’s not a magic solution for all resources. Here are a few cases where you might want to avoid using it:

Non-Critical Resources: Don’t preload assets that aren’t essential for the initial rendering of your page.

Unpredictable Resources: If certain assets are conditional or depend on user interaction (like below-the-fold images or deferred JavaScript), it’s best to let the browser fetch them when needed.

Conclusion
Using rel="preload" is a simple yet effective way to speed up your website by telling the browser to fetch critical resources as soon as possible. By focusing on preloading essential assets like fonts, stylesheets, and images, you can reduce load times and enhance user experience.

The key takeaway: preload only what’s critical, and your website’s performance will significantly improve. Give it a try on your next project and see the difference it makes!

以上がrel=\'preload\' で Web サイトを高速化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。