Instant Transitions: Predictive Prefetchingを使用してEdgeキャッシュをブラウザに拡張する方法
ナビゲーションの遅延がコンバージョンを減少させ、直帰率を増加させることは周知の事実である。 トラフィックの多いサイトでコンバージョンを管理して追跡している人にとっては、このシナリオが展開されるのを見たことがあるだろう。 うまくいけば、あなたも逆を見たことがあるだろう。 ナビゲーション時間とページ読み込み時間が改善されると、コンバージョンが増加する。
パフォーマンスとコンバージョンは密接に関連している。
CDN企業は、サービスのROIを証明するためにこの図を例として使用することが多い。 解決策は簡単である。 静的コンテンツをできるだけユーザーに近づけることで配信を高速化し、投資がROIプラスになる。 訪問者はより長くぶらぶらし、より多くの購入をし、より頻繁に戻る。 それは理にかなっている、そうではないか。 これを読んでいればおそらく既にそれが本当であることを知っている。 しかし、次は何だろうか? さらに一歩踏み込んで、ウェブ体験からネットワークの応答時間を完全に排除し、ネイティブアプリのようにすることはできるだろうか。 遅延をゼロにすることができれば、コンバージョンを最大化するのではないか。 ユーザーがクリックする前にエッジコンテンツをブラウザにキャッシュできれば、ネイティブアプリのように瞬時に遷移することができる。
「Webアプリケーションのパフォーマンスを、サイト訪問者向けのネイティブアプリケーションと同じように実現できるのか?」
エドジオならできる
ネイティブモバイルアプリケーションが優れている理由を見てみよう。 ほとんどのモバイルアプリユーザーは、舞台裏で何が起こっているのかはわからないが、アプリケーションをダウンロードしてデバイスにインストールすることで得られるパフォーマンスの向上は確かに高く評価されている。 シンプルで、アプリをロードし、画面をナビゲートして、トランジションが瞬時に。 Tab 1つのことから次のことに、カートにアイテムを追加して摩擦のない体験を楽しむ。 ユーザーに「読み込み中」インジケータが表示されることはめったになく、表示された場合は理にかなっている。例えば、チェックアウト時に支払い情報を送信する場合などである。 巧妙な開発と有能なプラットフォームですべてが可能である。
Edgioによる予測プリフェッチを入力する。 今あなたの網ユーザーは同じタイプの経験を楽しむことができる。
多くのCDN企業は、オリジンからエッジにコンテンツをもたらすのに役立つ「プリフェッチ」と呼ばれるキャッシュウォーミングオプションを提供している。 素晴らしい第一歩だが、それはそこにすべての方法を得るわけではない。 ユーザーはコンテンツがデバイスに移動するまで待たなければならない。 ではどうすれば一歩先に進めることができるのか? オリジンからエッジまで、そしてクリックする前にブラウザに至るまで、Edgioのプリフェッチは、エッジをデバイスに直接取り込むブラウザ統合である。 従来のCDNではできないこと。
「それは魔法のように聞こえる、それはどのように機能するのか?」
素晴らしい質問と私たちは完全にあなたの懐疑論を理解する。 仕組みを理解するためには、基本から始める必要がある。 以下の簡単な説明を見てから、プリフェッチがその中核にあるものを見てみよう。
プリフェッチとは…実際には?
MDNを見て、ブラウザが理解しているプリフェッチの定義を探そう。 リンクプリフェッチは、リソースが解放されたときに後で必要になる可能性のあるアセットをダウンロードする必要があるというユーザーエージェントへのヒントである。 まず、ページがロードされ、非同期要求の処理が開始される。 ネットワークとCPUが解放されると、ブラウザはドキュメントに追加したリソースを取得する。 基本的なプリフェッチでは、ブラウザがそれを理解すると、次のように見える。
…
…
最終的にnext-page.htmlとnext-image.jpgはブラウザによってダウンロードされキャッシュされ、ユーザーが元のページと対話している間にキャッシュされる。 クリックすると、次のページのスケルトンと追加の画像がローカルにキャッシュされ、即座に表示される。 確かに、追加のCSS、JS、およびその他のアセットをダウンロードする必要があるかもしれないが、私たちはそれが必要になる前に、旅の最も重要な部分をブラウザに持ち込んだ。 それは素晴らしいスタートであり、例からわかるように、それは小さなユースケースのために本当にうまく機能する。 順次旅行の場所、多分ランディング・ページか2がおそらく考えているものはこれである…
「私の場所に何千ものイメージおよびページがある、私がこれをすることができる方法がない。
私たちのページの先頭にあるすべての画像とページをリンクすることはできないだろうか?」
いや、そうする必要はない。 EdgioのPredictive PrefetchingプラグインとDeep Fetchingプラグインを使用すると、エンジニアリングや推測を回避しながら、ユーザーのブラウザがエッジネットワークと連携して重要なリソースを取り込むことができる。
ではどうすればいいのか?
EdgioのPredictive Prefetchingはサービスワーカーと呼ばれるものを利用する。 SWは、現代のブラウザではすべて理解できるものであり、実際にはChrome 40からサポートされている。 SWは、プライマリリクエストがアイドル状態のときに機能する、サイトに関連付けられたバックグラウンドプロセスである。 フロントエンド開発やより現代的なプログレッシブウェブアプリケーションで働いたことがあるなら、サービスワーカーにさらされたことがあるかもしれない。 今サイトでサービスワーカーを使用していない場合は、現在のユーザーエクスペリエンスに影響を与えることなく、簡単にサービスワーカーを追加できる。 Edgioは私達の事前に造られたサービスワーカーの1つとの1つを容易にセットアップするのを助けることができる。
Service-workerの登録とインストールは、フロントエンドフレームワークを使用しているかどうかによって異なる。 複数の方法の詳細な手順を見つけるには、必ずドキュメントをチェックして。
サービスワーカーを追加し、あなたのサイトに登録しているので、やるべきことが必要だ。 Edgio Prefetchパッケージを追加したら、ユーザーのブラウザを動作させるためのルートを追加する時が来た。 デフォルトでは、サービスワーカーキャッシュは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を24時間検証してAPIのレスポンスの鮮度を維持するように構成し、ブラウザーにプリフェッチするだけでなく、1時間ハングアップするように指示した。
Edgioに精通しているなら、これをローカルでテストできることを知っている。 ブラウザの開発者ツールを開き、サイトを熟読しながらネットワークタブを見る。 ブラウズすると、サービスワーカーがroutesファイル内のリンクのための生のHTMLを取得するのを見ることができる。 特徴的な歯車アイコンとイニシエータとして記録された「service-worker」に注目する。
また、アプリケーションタブを確認してキャッシュを確認することで、サービスワーカーキャッシュを個別に表示することもできる。
Edgioプリフェッチスクリプトは、ユーザーがクリックできるように、ユーザーのビューポートにリンクをプルする。 クリックすると、すぐに次のページに移動する。
大きい開始、しかしまた取得する必要があるプロダクトか記事のイメージが付いている内容重い場所を有すれば何か。 次に、EdgioのユニークなDeep Fetchプラグインの時間だ。
Deep Fetchプラグインの有効化は簡単である。 既存のプロジェクトにプラグインをインポートし、プラグインが探すべきHTMLセレクターをいくつか選択するだけ。 eコマースサイトを運営すれば、あなたのプロダクトページは多分テンプレート化される。 あなたのLCPはこのように見えるかもしれません–すべてのページに異なる画像があるが、あなたのサイト全体のスタイリングを維持するために「メインイメージ」CSSセレクターを使用する。
Deep Fetch配列に「main-image」セレクタを追加して、サービスワーカーを動作させる。
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を調整する。
これで、サービスワーカーはビューポートのリンクをプリフェッチし、HTMLをスキャンしてセレクタを探し、問題の画像のプリフェッチリンクを追加する。 ユーザーが画像をクリックすると、ページは即座に表示される。
「オリジンについてはどうだろうか?すべてのユーザーのトラフィックの増加をサポートすることはできない」
エドジオが君を援護した アセットがキャッシュされていない場合、次世代のWebCDNはオリジンにプリフェッチリクエストを渡さない。 エドジオは単に412で応答する。 ユーザーがキャッシュされていないリンクをクリックした場合、他のリクエストと同様にオリジンに渡し、あなたが設定したプロキシルールに従う。 あなたの出所はエドジオと一緒に安全で安心して。 サイト全体の自然なトラフィックはキャッシュを温め、412応答が減少する。 私達が新しいものを捜している間古い項目を渡すことができるようにあなたの場所をsnappy保つために、確かめ、使用古くなった間revalidate。
Chromeの開発者ツールを掘り下げることなく、これらすべてを実行したい場合は、 エドジオも助けてくれる Predictive Prefetchingがお客様にとってどれほど価値があるかを見てきたので、Edgioコンソール内に専用のダッシュボードを用意した。 プリフェッチ要求とヒット率の両方について’プリフェッチパフォーマンスを容易に監視
うまくいけば、EdgioのPredictive Prefetchingがどのようにユーザーに信じられないほどのデジタル体験を提供し、エッジキャッシュをユーザーに提供することで、コンバージョンを増やし、直帰率を低下させることができるかを理解したことだろう。