プリロードとプリフェッチ

ウェブサイトにアクセスした時、ほとんど瞬時に読み込まれたように感じたことはありませんか？その体験の秘訣は、ブラウザにページをより効率的に読み込む方法を指示する、いくつかのシンプルな技術的なトリックにある場合が多いです。これらのトリックの中で最も重要な2つをご紹介します。 プリロード の三脚と プリフェッチ.

これらはどちらも、ウェブサイトのファイルの優先順位とダウンロード方法をブラウザに伝える技術です。その目的は、ユーザーエクスペリエンスを可能な限り高速化し、読み込みが遅いページの読み込みを待たせることなく、ユーザーエクスペリエンスを向上させることです。

違いはなんですか？

プリロードとプリフェッチは似ていますが、非常に重要な違いが1つあります。次のように考えてみましょう。

• プリロード 必要なファイル用です たった今現在のページを正しく表示するにはファイルが必要なので、ブラウザにできるだけ早くファイルをダウンロードするように指示しています。
• プリフェッチ 必要なファイル用です 後でユーザーが次にアクセスしたページでファイルが必要になる可能性があるため、ブラウザにファイルを低い優先度でバックグラウンドでダウンロードするように指示します。

プリロードは、フォントファイルやスタイルシートの背景画像など、読み込みプロセスの後半で発見されてしまう重要なリソースに使用されます。プリフェッチは、リスト内の商品ページなど、ユーザーが次にクリックする可能性のあるリソースに使用されます。

SEOにどう役立つか

プリロードとプリフェッチはテクニカルSEOの重要な要素です。ウェブサイトのパフォーマンスに直接影響を及ぼします。 ページスピードはランキング要因の一つです。高速なウェブサイトは低速なウェブサイトよりも上位にランクインし、ユーザーエクスペリエンスも向上します。

ウェブサイトの読み込み速度が速ければ、訪問者がページに留まる可能性が高くなり、ページ滞在時間が長くなり、直帰率が低下する可能性があります。これらはどちらも、ウェブサイトの品質が高いことを示すシグナルとして検索エンジンに伝わります。

これらを適切に活用するための鍵は、正しく使用することです。プリロードを過度に使用したり、ユーザーがクリックしないファイルをプリフェッチしたりすると、ユーザーの帯域幅が無駄になり、ウェブサイトの速度低下につながる可能性があります。ページスピードの指標を理解し、改善のためのタスクの優先順位付けリストを提供できるプラットフォームが必要です。 クリックランク は、ページスピードを適切にするために必要な洞察を提供することで、この問題を解決します。

プリロードとプリフェッチの実装方法

プリロードとプリフェッチの実装は、Web サイトのヘッダーに数行のコードを追加することによって実行される技術的なタスクです。

プリロード

コードを1行追加することでファイルをプリロードすることができます。 セクションです。次のようになります。

その rel=”プリロード” 属性はブラウザにファイルをダウンロードするよう指示します。 as=”フォント” 属性はブラウザにファイルの種類を伝えるため、リクエストの優先順位を適切に決定できます。現在のページにとって重要なファイルのみをプリロードする必要があります。

プリフェッチ

ファイルにコード行を追加することで、ファイルをプリフェッチすることができます。 セクションです。次のようになります。

その rel=”プリフェッチ” 属性はブラウザにファイルをバックグラウンドでダウンロードするよう指示します。ユーザーが次にアクセスしたページで必要になる可能性が高いファイルのみをプリフェッチする必要があります。

その他のヒント

他にも役立つヒントがいくつかあります。

• DNSプリフェッチ: これは、ブラウザにファイルが必要になる前にドメイン名を解決するように指示します。これは、Google Fontsなどのサードパーティリソースに役立ちます。
• 事前接続: これは、ブラウザにサードパーティのサーバーへの接続を事前に確立するよう指示します。これは、ページの表示に不可欠な外部リソースの場合に役立ちます。