對電商網(wǎng)站來說，糟糕的頁面性能可能會增加交易放棄率。一直以來，人們會使用CDN進行緩存從而縮短頁面加載時間，但即便實施了強大的緩存，消費者在通過移動網(wǎng)絡訪問這些網(wǎng)站時可能仍然會需要頻繁等待。

延伸閱讀，點擊鏈接了解 Akamai Cloud Computing

最近誕生了一種名為“早期提示”（Early Hints）的全新行業(yè)標準，目前該標準已被最流行的網(wǎng)絡瀏覽器所采用。這項技術可以幫助網(wǎng)絡瀏覽器在渲染網(wǎng)站時預載網(wǎng)站資產（例如圖片縮略圖和CSS數(shù)據(jù)）。為此，必須對網(wǎng)站的托管基礎設施進行配置，以便向瀏覽器告知應檢索哪些資產。為了支撐這種流量，Akamai邊緣服務器也開始支持早期提示功能。

本文將概括介紹一種可提高大型電商零售商網(wǎng)頁性能的架構。該架構的特點是在Akamai邊緣服務器和一系列核心計算區(qū)域間，以協(xié)同工作的方式提供服務。具體來說，該架構會依靠Akamai EdgeWorkers來智能地處理請求，并依靠HarperDB來存儲資產URL。這些服務被配置為可返回整個網(wǎng)站頁面上出現(xiàn)的所有圖片縮略圖URL的早期提示。在移動網(wǎng)絡上測試實施情況時，我們發(fā)現(xiàn)頁面渲染時間可從3秒以上縮短到2秒，提高了1/3。

早起提示和HarperDB工作流

1. 用戶對電商網(wǎng)站上的頁面提出請求，請求由Akamai邊緣服務器處理。
2. 邊緣服務器上的EdgeWorker將請求中的頁面URL發(fā)送到HarperDB集群。該數(shù)據(jù)庫維護著每個頁面的縮略圖URL記錄（不是縮略圖本身，而是這些縮略圖的URL）。
3. EdgeWorker從HarperDB接收頁面的縮略圖URL。
4. 邊緣服務器向用戶瀏覽器發(fā)送HTTP 103響應。
5. 用戶瀏覽器收到103響應后，用收到的URL請求縮略圖。

克服挑戰(zhàn)

· 延遲敏感性

找出造成高延遲的來源，并盡量減少這些組件對延遲的影響。

當瀏覽器渲染網(wǎng)頁時，會對頁面內容提出初始請求，然后對頁面上出現(xiàn)的資產（如圖片、樣式表和JavaScript）提出一系列后續(xù)請求。如果初始請求需要時間讓源進行處理（也稱為“服務器思考時間”），那么瀏覽器就需要等待，因為在收到響應前，瀏覽器無法針對后續(xù)需要的資產提出請求。

有了早期提示，邊緣基礎設施就會以異步的方式通知瀏覽器，讓瀏覽器知道自己應該在源處理初始請求的同時提前去獲取這些資產。為此，邊緣基礎設施會為這些資產發(fā)送HTTP 103響應。該響應包含資產的URL，瀏覽器可以提前開始處理后續(xù)請求，同時繼續(xù)等待源處理初始請求完成后返回HTTP 200響應。或者，瀏覽器也可以從自己的緩存中加載這些資產（如果存在的話）。

這種工作流程與另一種類似的技術“服務器推送”（Server Push）其實并不相同。服務器推送是由邊緣直接向瀏覽器推送重要資產，同時等待源服務器的“思考時間”。無論瀏覽器本地緩存中是否已經(jīng)存儲了這些資產，服務器推送都會發(fā)送相關響應，這樣就會產生不必要的流量。

在實施EdgeWorkers和HarperDB集群時，對這兩個服務之間的連接進行調整可以進一步降低延遲。例如，在測試中，對Global Traffic Management的路由行為而言，優(yōu)先考慮地理位置的近似性而非負載因素，是一種更有益的做法。這可以通過調整Load Imbalance Factor實現(xiàn)。

· 擴展電商產品目錄

在維持低延遲的同時擴大電商產品目錄的規(guī)模。

這個解決方案需要支撐的電商產品目錄規(guī)模可達數(shù)百萬項，這也給早期提示功能的配置帶來了挑戰(zhàn)。因為在為特定頁面請求分配早期提示URL的EdgeWorker中，不可能容納如此多的項目。因此，我們決定將此記錄保存在另一個支持現(xiàn)有源基礎設施的數(shù)據(jù)庫集群中。之所以選擇HarperDB，是因為它可以支持網(wǎng)站的擴展和速度要求。

早期提示和HarperDB設計示意圖

該解決方案使用Akamai EdgeWorkers配置早期提示，并創(chuàng)建了一個分布在10個Akamai核心計算區(qū)域的HarperDB集群。該HarperDB集群維護著電商網(wǎng)站每個頁面的產品縮略圖URL記錄。Akamai邊緣服務器負責將這些縮略圖URL返回給用戶的瀏覽器。

1.用戶請求訪問電商網(wǎng)站上的產品頁面。該請求的URL可能如下：

https://www.example.com/products/example-product/

2.請求由Akamai邊緣服務器處理。在請求生命周期的不同階段，Akamai EdgeWorker可對請求執(zhí)行邏輯處理。在本解決方案中，EdgeWorker由onClientRequest事件觸發(fā)。

3.邊緣服務器還為電商網(wǎng)站保留了頁面內容和資產的緩存，緩存中的內容不會從電商網(wǎng)站源站點檢索。

4.處理請求：

• EdgeWorker向HarperDB集群發(fā)出HTTPS子請求。該請求將通過Akamai Global Traffic Management路由到與Akamai邊緣服務器延遲最低的HarperDB實例。請求會將原始URL（如https://www.example.com/products/example-product/）作為參數(shù)傳遞。
• Akamai邊緣服務器會向用戶瀏覽器返回一個HTTP 103響應。該響應包含產品縮略圖的URL以及頁面上使用的關鍵JS和CSS文件列表。用戶瀏覽器會對這些資產提出額外請求。
• 任何存儲在邊緣服務器緩存中的頁面內容和資產都會在HTTP 200響應中返回給瀏覽器。如果頁面請求與緩存中的內容相匹配，則不會使用早期提示來預載資產。取而代之的是使用標準的預加載鏈接元素。

5.HarperDB集群中的縮略圖URL記錄會根據(jù)電商網(wǎng)站源的新信息定期更新。

· 系統(tǒng)和組件

1.Akamai邊緣服務器：距離用戶最近的Akamai邊緣服務器。該邊緣服務器會緩存電商網(wǎng)站的頁面內容和資產。這些服務器上運行的EdgeWorkers負責對請求和響應執(zhí)行邏輯處理。

2.Akamai EdgeWorkers：在請求及響應的生命周期內，負責在Akamai邊緣服務器上執(zhí)行可配置的JavaScript。在本解決方案中，EdgeWorker負責檢索特定電商網(wǎng)站頁面的縮略圖URL。EdgeWorker可以借助Akamai Early Hints API以編程方式通知邊緣服務器，并將縮略圖的HTTP 103響應發(fā)送到用戶瀏覽器。

3.HarperDB集群：安裝在10個核心計算區(qū)域內的分布式數(shù)據(jù)庫集群。該集群將電商頁面URL映射到特定頁面上出現(xiàn)的圖片縮略圖URL。該集群充當了EdgeWorker縮略圖URL請求的源。

4.Global Traffic Management：將EdgeWorker的早期提示子請求路由到HarperDB集群。

5.電商基礎設施：電商網(wǎng)站的現(xiàn)有源Web服務器。

總結

作為一種HTTP狀態(tài)碼，早期提示（Early Hint）的目的是在服務端完全生成響應前，向客戶端發(fā)送部分提示信息，從而加速網(wǎng)頁加載。這個技術在提升用戶體驗和優(yōu)化網(wǎng)絡性能方面有顯著價值，可顯著優(yōu)化網(wǎng)頁加載性能，特別適合對加載速度敏感的場景，是一種現(xiàn)代Web性能優(yōu)化的重要工具。

—————————————————————————————————————————————————

如您所在的企業(yè)也在考慮采購云服務或進行云遷移，

點擊鏈接了解Akamai Linode的解決方案