Home Blogs 通過Edgio的預測性預取功能降低退回率並改善站點體驗
Applications

通過Edgio的預測性預取功能降低退回率並改善站點體驗

About The Author

Outline

即時轉換:如何使用預測性預取將邊緣暫存擴展到瀏覽器

通曉導航延遲可降低轉換率並提高反彈率。 對於那些在流量很大的網站上管理和跟蹤轉換的人,您可能已經看到了這種情況。 希望您也看到了相反的情況。 當導航和頁面載入時間縮短時,轉換率會增加。

性能和轉換緊密結合。

CDN公司通常使用此插圖作爲示例來證明其服務的投資報酬率。 解決方案很簡單。 儘可能靠近用戶獲取靜態內容以加快交付速度,投資回報爲正值。 遊客會在周圍閒逛更長時間,購買更多商品並更頻繁地返回。 這是有道理的,不是嗎? 如果您正在閱讀,那麼您可能已經知道它是真的。 但接下來是什麼? 我們是否可以將其進一步,完全消除網路體驗中的網路響應時間,並使其與本地應用程式類似? 如果我們可以將延遲降至零,我們是否能最大程度地實現轉換? 如果我們可以在用戶點擊之前暫存瀏覽器中的邊緣內容,則轉換可能是瞬時的,類似於本地應用程式。

“我們是否真的可以爲網站訪問者提供類似於本機應用程式的Web應用程式性能?”

有了Edgio,您就可以了。

讓我們先看看是什麼讓本機移動應用程式變得出色。 大多數移動應用程式用戶不知道後臺發生了什麼,但他們肯定會欣賞下載應用程式並將其安裝到設備上所獲得的性能改進。 這很簡單,載入應用程式,瀏覽顯示器和切換都是即時的。 從一件事到下一件事,將一件事添加到購物車,享受無摩擦的體驗。 用戶很少會看到”正在載入”指示器,而且當他們看到時,它是有意義的,例如在結帳時提交付款資訊。 一切都有可能通過聰明的開發和一個有能力的平臺。

輸入Edgio預測預取。 現在,您的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和其他資產,但我們已經在需要之前將旅程中最關鍵的部分引入瀏覽器。 這是一個很好的開端,正如您可以從示例中看出的,它對於小型使用案例來說非常有效。 連續的旅程網站,可能是一個或兩個登入頁面,但您可能會想到的是這…

“我的網站上有成千上萬的圖像和頁面,我無法做到這一點。

我們無法將所有頁面標題中的每個圖像和頁面鏈接起來嗎?”

不,您不必這樣做。 使用Edgio的 預測預取 和深取插件,您可以在用戶的瀏覽器與我們的邊緣網路配合使用時,繞過工程和猜測工作。

好了,那麼我們如何做到這一點?

Edgio的預測性預取利用了一種稱爲服務工作者的方法。 軟體是所有現代瀏覽器都理解的東西,它實際上已經被支援從 Chrome 40. 軟體是與您的站點綁定的後臺進程,在主請求空閒時工作。 如果您曾經在前端開發或更現代的漸進式Web應用程式中工作,您可能會接觸到服務工作人員。 如果您現在不在網站上使用服務工作者,您可以輕鬆地新增服務工作者,而不會對目前的使用者體驗造成任何影響。 Edgio可以幫助您輕鬆地與我們的一位預構建的服務工作人員進行設定。

註冊和安裝服務工作人員可能會因您是否使用前端框架而異。 請務必查看我們的 文檔 ,瞭解有關多種方法的更多詳細說明。

現在,您已添加了一名服務工作人員,並且正在向您的站點註冊,它需要執行一些 操作。 添加Edgio Prefetch軟體包後,您應該添加路由,以使用戶的瀏覽器正常工作。 預設情況下,服務工作人員暫存存儲兩分鐘。 爲了最大限度地提高性能,我們可以在路由文件中進行調整:

				
					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,
      },
    });
  });
				
			

通過一個簡單的規則,我們配置了Edge以保持API響應的新鮮度,方法是驗證它24小時,並指示瀏覽器不僅預取它,而且還將其掛起1小時。

如果您熟悉Edgio,您就知道可以在本地測試。 打開瀏覽器的開發人員工具,並在瀏覽網站時觀看網路選項卡。 當您瀏覽時,您將看到服務工作人員在路由文件中獲取鏈接的原始HTML。 請注意,特殊齒輪圖標和“維修人員”(作爲啓動器)被標記爲啓動器。

您也可以通過檢查應用程式選項卡並查看暫存來單獨查看服務工作人員暫存。

Edgio預取腳本將鏈接拉入用戶的視口中,以便他們單擊。 如果他們單擊,他們將立即進入後續頁面。

一個很好的開始,但如果你有一個內容密集的網站,產品或文章圖像也需要提取? 現在是Edgio獨一無二的Deep Fetch插件的時候了。

啓用 Deep Fetch 插件非常簡單。 只需將插件導入現有項目並選擇插件應查找的幾個HTML選擇器即可。 如果您執行的是電子商務網站,您的產品頁面可能會被模板化。 您的LCP可能看起來像這樣-每個頁面都有不同的圖像,但您使用“主圖像”CSS選擇器在整個網站上保持樣式。

				
					<img src=”/images/product-image.jpg” class=”main-image” />
				
			

嘗試將“主映像”選擇器添加到Deep Fetch陣列,讓服務工作人員開始工作。

				
					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插件查找主記憶體選擇器,並將src預取爲圖像。 在本例中,我們已將maxMatches設定爲1。 這意味着我們只會預取第一個匹配項。 不需要停在那裏。 根據您要預取的資產類型,根據您認爲合適的大小調整最大匹配值。

現在,您的服務工作人員將預取視口中的鏈接,掃描該選擇器的HTML,併爲相關圖像添加預取鏈接。 當您的用戶單擊圖像時,將立即顯示頁面。

“我們的起源如何? 我們不能支援每個用戶的流量增加。”

Edgio讓你瞭解。 如果資產未暫存,我們的下一代WebCDN將不會將預取請求傳遞到您的原始伺服器。 Edgio只會用412來回應。 如果使用者按一下未快取的連結,我們會將該連結傳送至原始伺服器,就像處理其他要求一樣,並遵守您現有的Proxy規則。 請放心,你的起源是安全的與Edgio。 站點上的自然流量將使高速暫存預熱,412個響應將減少。 爲了讓您的網站保持混亂,請務必使用過時的同時重新驗證,以便我們可以在尋找新的項目時交付過時的項目。

想要在不需要深入瞭解Chrome開發人員工具的情況下看到所有這些功能? Edgio也能幫上忙。 我們已經瞭解了預測預取對我們的客戶有多麼重要,因此我們在Edgio控制檯內就有一個專門構建的儀表板。 輕鬆監控預取請求和命中率的預取性能。

希望您現在可以看到Edgio的預測性預取功能如何 通過將邊緣暫存帶給用戶,爲用戶帶來真正令人難以置信的數字體驗,提高轉換率和降低反彈率。