HTML5 リソースのプリロード (リンク プリフェッチ) (Web ページの高速化) の詳細な紹介_html5 チュートリアル スキル

このサイトで使用されている速度最適化テクニックをいくつか紹介しました。 HTML5 では、Web サイトの速度を最適化するための新しい機能、ページ リソースのプリロード/プリフェッチ (リンク プリフェッチ) が登場しました。

ページリソースのプリロード/プリフェッチ(リンクプリフェッチ)とは何ですか? MDN からの説明:

ページ リソースのプリロード (リンク プリフェッチ) は、ブラウザーが自由な時間に一部のドキュメント リソースをダウンロードまたは事前に読み取ることを可能にするブラウザーによって提供される技術であり、ユーザーは将来これらのリソースにアクセスします。 Web ページでは、ブラウザーに対して一連のプリロード命令を設定できます。ブラウザーは、現在のページのロードを完了すると、指定されたドキュメントをバックグラウンドでサイレントにロードし、キャッシュに保存します。ユーザーがこれらのプリロードされたドキュメントにアクセスすると、ブラウザーはそれらをキャッシュから迅速に取得してユーザーに提供できます。

簡単に言うと、ユーザーが現在のページにアクセスした後にアクセスする可能性が高い他のリソース (ページ、写真、ビデオなど) をブラウザーにプリロードさせます。そしてその方法は超簡単！

HTML5ページリソースのプリロード(リンクプリフェッチ)の書き方

コードをコピー

コードは次のとおりです:

wp-content/uploads/2014/04/b-334x193.jpg " />

HTML5 ページのリソースプリロード/プリフェッチ(リンクプリフェッチ)機能は、rel属性に「プリフェッチ」を指定し、href属性にロードするリソースのアドレスを指定します。 Firefox は追加の属性サポートも提供しています:

コードをコピーします

コードは次のとおりです:

title="Mozilla 向けに設計" href="mozspecific.css" _fcksavedurl=""mozspecific.css" " />

プリフェッチは、HTTPS プロトコル リソースでも使用できます。

どのような状況でページ リソースをプリロードする必要があるか

どのような種類のリソースがいつページに読み込まれるかは、完全にあなた次第です。ここにいくつかの提案があります:

1. ページにスライドショーのようなサービスがある場合、次の 1 ～ 3 ページと前の 1 ～ 3 ページをプリロード/先読みします。
2. Web サイト全体に共通の画像をプリロードします。
3. Web サイト上の検索結果の次のページをプリロードします。

ページリソースのプリロード (リンクプリフェッチ) を無効にする

Firefox には、ページ リソースのプリロード (リンク プリフェッチ) 機能を無効にするオプションがあります。

のように設定できます。

1.user_pref("network.prefetch-next", false);
2. ページリソースのプリロード(リンクプリフェッチ)に関する注意事項

ページ リソースのプリロード (リンク プリフェッチ) に関するいくつかの注意事項を次に示します:

1. リンク プリフェッチは、ドメイン間での Cookie の取得など、ドメイン間で機能することはできません。
2. プリロード (リンクのプリフェッチ) は、ブラウザーにプリロードされた一部のページは実際にはユーザーにアクセスされない可能性があるため、Web サイトのトラフィック統計を汚染します。
3. Firefox は 2003 年からこのプリロード (リンク プリフェッチ) テクノロジーをサポートしています。

ブラウザのアイドル時間を利用して追加のリソース ファイルを読み込むのは刺激的で危険なように思えますが、これらの手法を試してみませんか?