Top Trends in Cybersecurity for 2024 | 
インスタントトランジション：予測プリフェッチを使用してEdgeキャッシュをブラウザーに拡張する方法
ナビゲーションの遅延はコンバージョンを減少させ、直帰率を増加させることはよく知られています。 トラフィックの多いサイトでコンバージョンを管理して追跡する場合は、このシナリオを見たことがあると思います。 うまくいけば、あなたは逆も見たことがあります。 ナビゲーションとページの読み込み時間が改善されると、コンバージョンが増加します。
パフォーマンスとコンバージョンは密接に関係しています。
CDN企業は、この図をサービスのROIを証明する例としてよく使用します。 解決策は簡単です。 ユーザーにできるだけ近い静的コンテンツを入手して配信をスピードアップし、投資収益率を向上させることができます。 訪問者はより長くぶらぶらし、より多くの購入をし、より頻繁に戻るでしょう。 それは理にかなっていますね。 これを読んでいるなら、おそらくすでにそれが真実であることを知っているでしょう。 しかし、次は何でしょうか? さらに一歩踏み込んで、ウェブ体験からネットワーク応答時間を完全に排除し、ネイティブアプリのようにすることはできますか? 遅延をゼロにすることができれば、コンバージョン率を最大化することはできませんか? ユーザーがクリックする前にブラウザーにエッジコンテンツをキャッシュできる場合、ネイティブアプリのように瞬時に遷移できます。
「Webアプリケーションのパフォーマンスを、サイト訪問者向けにネイティブアプリケーションと同様に実現できるのでしょうか？」
Edgioでは、できます。
まず、ネイティブモバイルアプリケーションが優れている理由を見てみましょう。 ほとんどのモバイルアプリユーザーは、舞台裏で何が起こっているのかを知りませんが、アプリケーションをダウンロードしてデバイスにインストールすることで得られるパフォーマンスの向上は確かに高く評価されています。 アプリをロードし、画面をナビゲートして、トランジションを瞬時に実行できます。 アイテムをカートに追加して、摩擦のない体験をお楽しみください。 ユーザーに「読み込み中」のインジケーターが表示されることはめったにありません。表示された場合は、チェックアウト時に支払い情報を送信するなど、理にかなっています。 すべては、巧妙な開発と有能なプラットフォームで可能です。
EdgioによるPredictive Prefetchingを入力します。 これで、Webユーザーは同じタイプの体験を楽しむことができます。
多くのCDN企業は、オリジンからエッジにコンテンツを取り込むのに役立つ「プリフェッチ」と呼ばれるキャッシュウォーミングオプションを提供しています。 素晴らしい第一歩ですが、それはあなたをそこに完全に得ることはできません。 ユーザーは、コンテンツがデバイスに移動するまで待機する必要があります。 ではどうやってこれを一歩先へ進めましょうか？ オリジンからエッジまで、そしてクリックする前のブラウザーまで、Edgioのプリフェッチは、エッジをデバイスに直接もたらすブラウザー統合です。 従来のCDNでは不可能なことです。
「それは魔法のように聞こえますが、どのように機能しますか?」
素晴らしい質問だ君の懐疑論は理解してる その仕組みを理解するには、基本から始める必要があります。 以下の簡単な説明を見てから、プリフェッチの中核を見てみましょう。
プリフェッチとは… 本当ですか?
ブラウザーが理解しているプリフェッチの定義について、MDNを見てみましょう。 リンクプリフェッチは、リソースが解放されたときに後で必要になる可能性のあるアセットをダウンロードする必要があるというユーザーエージェントへのヒントです。 まず、ページが読み込まれ、非同期リクエストの処理が開始されます。 ネットワークとCPUが解放されると、ブラウザーはドキュメントに追加したリソースを取得します。 基本的なプリフェッチでは、ブラウザが理解しているように、次のようになります。
<head>
…
<link rel="prefetch" href="/next-page.html" />
<link rel="prefetch" href="/next-image.jpg" />
…
</head>
最終的な結果は、ユーザーが元のページを操作している間に、next-page.htmlとnext-image.jpgがブラウザによってダウンロードされ、キャッシュされます。 クリックすると、次のページのスケルトンと、すぐに表示される追加の画像がすでにローカルにキャッシュされています。 確かに、追加のCSS、JS、およびその他のアセットをダウンロードする必要があるかもしれませんが、必要になる前に、ジャーニーの最も重要な部分をブラウザーに取り込みました。 これは素晴らしいスタートです。例からわかるように、小規模なユースケースでは非常にうまく機能します。 一連の旅のサイト、ランディングページ、または2つ、しかしおそらく考えていることはこれである…
「私のサイトには何千もの画像とページがありますが、これはできません。
すべてのページの先頭にあるすべての画像とページをリンクすることはできませんよね?」
いいえ、そしてあなたはする必要はありません。 EdgioのPredictive PrefetchingプラグインとDeep Fetchingプラグインを使用すると、エンジニアリングや推測を回避しながら、ユーザーのブラウザがEdgio のエッジネットワークと連携して重要なリソースを引き込むことができます。
ではどうすればいいのでしょうか？
EdgioのPredictive Prefetchingは、サービスワーカーと呼ばれるものを利用します。 ソフトウェアは、最新のすべてのブラウザが理解しているものであり、実際にはChrome 40 以降にサポートされてい ます。 SWは、プライマリリクエストがアイドル状態の間に機能する、サイトに関連付けられたバックグラウンドプロセスです。 フロントエンド開発や最新のプログレッシブWebアプリケーションで働いたことがある場合は、サービスワーカーにさらされたことがあるかもしれません。 現在サイトでサービスワーカーを使用していない場合は、現在のユーザーエクスペリエンスに影響を与えることなく、簡単にサービスワーカーを追加できます。 Edgioは、事前に構築されたサービスワーカーを使用して、簡単にセットアップすることができます。
サービスワーカーの登録とインストールは、フロントエンドフレームワークを使用しているかどうかによって異なります。 複数のメソッドの詳細な手順については、ドキュメントを確認して ください。
サービスワーカーを追加してサイトに登録したので、何かする必要があります。 Edgio Prefetchパッケージを追加したら、ユーザーのブラウザーを機能させるためのルートを追加します。 デフォルトでは、service-workerキャッシュは2分間保存されます。 パフォーマンスを最大化するには、routesファイルで次のように調整します。
import {Router} from '@edgio/core';
export default new Router()
.get('/api/products/:id.json', ({cache, proxy}) => {
cache({
edge: {
maxAgeSeconds: 60 * 60,
staleWhileRevalidateSeconds: 60 * 60 * 24,
},
browser: {
serviceWorkerSeconds: 60 * 60,
},
});
});
1つの簡単なルールで、Edgeを構成してAPIのレスポンスを24時間検証し、ブラウザーにプリフェッチだけでなく1時間待機するように指示しました。
Edgioに精通している場合は、これをローカルでテストできることを知っています。 ブラウザの開発者ツールを開き、サイトを閲覧している間、ネットワークタブを確認します。 service-workerは、ブラウズ中にルートファイル内のリンクの生のHTMLを取得します。 特徴的なギアアイコンと「サービスワーカー」がイニシエータとして示されていることに注目してください。
アプリケーションタブをチェックしてキャッシュを調べることで、サービスワーカーキャッシュを個別に表示することもできます。
Edgioプリフェッチスクリプトは、ユーザーがクリックできるようにリンクをユーザーのビューポートに取り込みます。 クリックすると、すぐに次のページに移動します。
素晴らしいスタートですが、コンテンツの多いサイトで、商品や記事の画像も取得する必要がある場合はどうでしょうか。 次に、EdgioのユニークなDeep Fetchプラグインの時間です。
Deep Fetchプラグインの有効化 は簡単です。 プラグインを既存のプロジェクトにインポートし、プラグインが探すHTMLセレクターをいくつか選択するだけです。 eコマースサイトを運営している場合、製品ページはテンプレート化されている可能性があります。 LCPは次のようになります。ページごとにイメージが異なりますが、「メインイメージ」CSSセレクターを使用してサイト全体でスタイルを維持します。
<img src=”/images/product-image.jpg” class=”main-image” />
Deep Fetch配列に「main-image」セレクターを追加して、service-workerを動作させてみてください。
import {Prefetcher} from '@edgio/prefetch/sw';
import DeepFetchPlugin from '@edgio/prefetch/sw/DeepFetchPlugin';
new Prefetcher({
plugins: [
new DeepFetchPlugin([
{
selector: 'img.main-image',
maxMatches: 1,
attribute: 'src',
as: 'image',
},
]),
],
});
要するに、Deep Fetchプラグインはmain-mageセレクタを探してsrcをイメージとしてプリフェッチするように指示します。 この例では、maxMatchesを1に設定しています。 つまり、最初に一致したものだけをプリフェッチします。 しかし、そこで止まる必要はありません。 プリフェッチするアセットの種類に応じて、適切にmaxMatchesを調整します。
これで、service-workerはビューポート内のリンクをプリフェッチし、そのセレクタのHTMLをスキャンして、問題の画像のプリフェッチリンクを追加します。 ユーザーが画像をクリックすると、ページが即座に表示されます。
「私たちの起源はどうですか? すべてのユーザーのトラフィックの増加をサポートすることはできません。」
エディオが援護してくれた 次世代のWebCDNは、アセットがキャッシュされていない場合、オリジンにプリフェッチ要求を渡しません。 Edgioは単に412で応答します。 ユーザーがキャッシュされていないリンクをクリックすると、他のリクエストと同じようにオリジンに渡し、設定されているプロキシルールに従います。 あなたの起源はEdgioで安全であることを安心してください。 サイト全体の自然なトラフィックはキャッシュをウォームアップし、412応答が減少します。 新しいものを探している間、古いアイテムを提供できるように、サイトをすっきりと保つために、必ず古いものを使用してください。
Chromeの開発者ツールを詳しく調べることなく、すべての機能を実際に確認したいですか? Edgioはそこにも助けることができる。 Predictive Prefetchingがお客様にとってどれほど価値があるかを見てきました。そのため、Edgioコンソール内に専用のダッシュボードがあります。 プリフェッチ要求とヒット率の両方について’プリフェッチのパフォーマンスを簡単に監視できます
