Web ページのプリロードの用途は何ですか? Web ページのプリフェッチ プリロード instant.page テクノロジー

ウェブページの読み込み速度はあなたに影響を与えますEコマース検索エンジンでのウェブサイトSEOランキング。

Web ページのプリロードとは何ですか?

実際にはプリロード手法であるプリフェッチと呼ばれる手法があります。

• ユーザーが意図的にページにアクセスすると、ブラウザーはそのページをプリロードします。
• ユーザーが実際にリンクをクリックすると、ユーザーは事前に読み込まれたキャッシュからページ コンテンツを直接読み取り、ページの読み込み時間を短縮します。
• Amazon などは、100 ミリ秒のレイテンシーが売り上げの 1% を占めることを発見しましたが、Web 上のレイテンシーを克服するのは困難です。

ウェブページのプリフェッチプリロードの用途は何ですか?

instant.page はインスタント プリロードを使用します - ユーザーがクリックする前にページをプリロードします ▼

• ユーザーはリンクをクリックする前に、リンクの上にカーソルを置きます。
• ユーザーが 65 ミリ秒ホバーすると、リンクをクリックする機会があるため、この時点で instant.page のプリロードが開始され、ページのプリロードに平均 300 ミリ秒以上かかります。
• モバイル デバイスでは、ユーザーは離す前にディスプレイに触れ始め、ページのプリロードに平均 90 ミリ秒かかります。

プリフェッチにより Web ページの読み込みが速くなります

• 人間の脳が行動を即座に認識するのにかかる時間は 100 ミリ秒未満です。
• そのため、instant.page プリロード テクノロジを使用すると、3G でも Web サイトが瞬時に表示されるようになります (ページのレンダリング速度が速い場合)。

ウェブページの読み込みが遅い問題を解決するには?

ページは、ユーザーがアクセスする可能性が高い場合にのみプリロードされ、ユーザーとサーバーの帯域幅と CPU を考慮して、そのページの HTML のみがプリロードされます。

• パッシブ イベント リスナーを使用して、ページをスムーズに保ちます。
• ユーザーがデータ保護を有効にすると、プリロードされません (バージョン 1.2.2 以降)。
• それは 1 kB で、他のすべての後にロードされます。無料でオープンソース (MIT ライセンス) です。

Instant.page をプリロードするプリフェッチ Web ページの効果は何ですか?

instant.page コードを追加してテストした後でも、Web サイトのアクセス速度の改善は比較的大きくなっています。

• デフォルトでは、このサイト リンクのみをプリロードするようにフィルタリングされ、他のサイトからのリンクはロードされません。
• マウスが左側の記事リンクを 65 ミリ秒以上クリックすると、ネットワークは記事ページをプリロードします。
• 65ms未満のホバリング時はプリロードを行わない（赤部分）▼

instant.page を使用すると、サイトの PV とリクエスト量が大幅に増加します。

• ある友人によると、13.84 回の訪問あたりの平均訪問回数は XNUMX 回でした。
• 使用後、17.43人あたりの訪問回数は4回に増加しました。これは、XNUMX人あたりさらにXNUMXページを開くことに相当します。

注意事項

• 有料 CDN とオープン フルサイト CDN を使用するブロガーは、注意して使用する必要があることに注意してください。
• しかし心配はいりません。プリロードは html ページのみをロードし、画像やその他のファイルはロードしないため、トラフィックが大幅に失われることはありません。

Web ページのプリロード技術を使用するには?

実はhtml5のlinkタグにrel属性があり、そのうちのXNUMXつがプリフェッチですが、コンシューマ数は少ないです。

この記事で紹介する instant.page は、この手法を使用したスクリプトです。

• このスクリプトは、ユーザーがリンク上にマウスを置いている時間に基づいて判断します。
• 65 ミリ秒に達すると、ユーザーがリンクを開く可能性は半分になり、Instant.page はこのページをプリロードします。

Web ページのプリロード JS スクリプト コード

1) JSスクリプトにCloudflareアクセラレーションを正式に提供▼

instant.page の使用は非常に簡単です。次のコードを Web サイトに追加するだけです。ラベルの直前。

<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>

2) 自己主催の自由チェン・ウェイリアンオファー▼

• スクリプトはサーバー Instantclick-1.2.2.js に存在するため、処理速度の低下を心配する必要はありません。 

次のコードをあなたのウェブサイトに追加してくださいラベルの直前:

<script src="https://img.chenweiliang.com/javascript/instantpage.js" type="module"></script>