即時轉換：如何使用預測性預取將Edge暫存擴展至瀏攬器
眾所周知，導航延遲會降低轉換率並提高跳出率。 對於那些在流量較大的站點上管理和跟蹤轉換的人來說，您可能已經看到了這種場景。 希望您也看到了相反的情況。 您已經看到，當導航和頁面載入時間縮短時，轉換率會增加。
性能和轉換是相輔相成的。
CDN公司通常將此圖示作為示例來證明其服務的ROI。 解決方案很簡單。 盡可能讓靜態內容靠近您的用戶，以加快交付速度，投資回報也很積極。 遊客將在這裡停留更長時間，購買更多商品，並更頻繁地返回。 這是有道理的，不是嗎？ 如果您正在閱讀這篇文章，那麼您可能已經知道這是真的。 但接下來是什麼呢？ 我們能否進一步，徹底消除Web體驗中的網路響應時間，使其與本機應用程式相似？ 如果我們可以將延遲降至零，我們是否不會最大化轉換？ 如果我們可以在用戶點擊之前在瀏攬器中暫存邊緣內容，轉換可能是即時的，類似於本機應用程式。
“對於我們的網站訪問者來說，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以來就得到了支援。 SW是一個與您的站點相關的後臺進程，在主請求空閒時工作。 如果您曾經從事前端開發或更現代化的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配置為通過驗證24小時來保持API響應的最新性，並指示瀏攬器不僅要預取它，還要掛起一個小時。
如果您熟悉Edgio，您知道您可以在本地測試。 打開瀏攬器的開發人員工具，並在瀏攬網站的同時觀察網路選項卡。 瀏覽時，您會看到服務工作者正在擷取路由檔案中連結的原始HTML。 請注意標記爲啓動器的獨特齒輪圖標和“服務人員”。
您也可以通過檢查應用程式選項卡並查看暫存來單獨查看服務工作者暫存。
Edgio預取腳本用於將鍊接拉入用戶的視口供其單擊。 如果他們單擊，它們將立即轉到下一頁。
一個很好的開始，但如果你有一個內容繁重的網站，產品或文章圖片也需要獲取? 現在是Edgio獨一無二的Deep Fetch插件的時候了。
啟用Deep Fetch插件非常簡單。 只需將插件導入到現有項目中，然後選擇插件應查找的幾個HTML選擇器即可。 如果您執行的是電子商務站點，您的商品頁面可能是模板化的。 您的LCP可能類似於此，其中每個頁面都有不同的圖像，但您可以使用“主圖像”CSS選擇器來保持整個站點的樣式。
<img src=”/images/product-image.jpg” class=”main-image” />
嘗試將“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插件查找main-mage選擇器並將src預取爲圖像。 在本例中，我們將maxMatches設置爲1。 這意味著我們只會預取第一個匹配項。 但也不必停在那裡。 根據您預取的資產類型，根據您認為合適的大小調整maxMatches。
現在，您的服務人員將在視口中預取鍊接，掃描該選擇器的HTML並為有問題的圖像添加預取鍊接。 當您的用戶單擊圖像時，將立即顯示該頁面。
“我們的源站怎麼樣？我們不能支持每個用戶流量的增加。”
Edgio為您提供全面的服務。 如果資產未暫存，我們的下一代WebCDN將不會將預取請求傳遞到您的源站。 Edgio只會用412來回應。 如果使用者按一下未快取的連結，我們會將該連結傳送到原始伺服器，就像處理其他任何要求一樣，並遵守您現有的Proxy規則。 使用Edgio確保您的原始伺服器安全無虞。 站點上的自然流量將使高速暫存變暖，412響應將減少。 為了保持您的網站快速，請確保使用過時同時重新驗證，以便我們可以在尋找新商品的同時交付過期商品。
想要在不深入了解Chrome開發工具的情況下了解所有這些功能？ Edgio也可以幫助您。 我們已經了解到預測預取對我們的客戶是多麼有價值，因此我們在Edgio控制臺中有一個專門構建的儀表板。 輕鬆監控您的預取性能，以滿足您的預取請求和命中率。
希望您現在了解到Edgio的預測預取如何通過將邊緣暫存始終提供給您的用戶，從而為您的用戶帶來真正令人難以置信的數字體驗，提高轉換率並降低跳出率。
