對(duì)電商網(wǎng)站來(lái)說(shuō)，糟糕的頁(yè)面性能可能會(huì)增加交易放棄率。一直以來(lái)，人們會(huì)使用CDN進(jìn)行緩存從而縮短頁(yè)面加載時(shí)間，但即便實(shí)施了強(qiáng)大的緩存，消費(fèi)者在通過(guò)移動(dòng)網(wǎng)絡(luò)訪問(wèn)這些網(wǎng)站時(shí)可能仍然會(huì)需要頻繁等待。

延伸閱讀，點(diǎn)擊鏈接了解 Akamai Cloud Computing

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

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

早起提示和HarperDB工作流

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

克服挑戰(zhàn)

· 延遲敏感性

找出造成高延遲的來(lái)源，并盡量減少這些組件對(duì)延遲的影響。

當(dāng)瀏覽器渲染網(wǎng)頁(yè)時(shí)，會(huì)對(duì)頁(yè)面內(nèi)容提出初始請(qǐng)求，然后對(duì)頁(yè)面上出現(xiàn)的資產(chǎn)（如圖片、樣式表和JavaScript）提出一系列后續(xù)請(qǐng)求。如果初始請(qǐng)求需要時(shí)間讓源進(jìn)行處理（也稱為“服務(wù)器思考時(shí)間”），那么瀏覽器就需要等待，因?yàn)樵谑盏巾憫?yīng)前，瀏覽器無(wú)法針對(duì)后續(xù)需要的資產(chǎn)提出請(qǐng)求。

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

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

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

· 擴(kuò)展電商產(chǎn)品目錄

在維持低延遲的同時(shí)擴(kuò)大電商產(chǎn)品目錄的規(guī)模。

這個(gè)解決方案需要支撐的電商產(chǎn)品目錄規(guī)模可達(dá)數(shù)百萬(wàn)項(xiàng)，這也給早期提示功能的配置帶來(lái)了挑戰(zhàn)。因?yàn)樵跒樘囟?yè)面請(qǐng)求分配早期提示URL的EdgeWorker中，不可能容納如此多的項(xiàng)目。因此，我們決定將此記錄保存在另一個(gè)支持現(xiàn)有源基礎(chǔ)設(shè)施的數(shù)據(jù)庫(kù)集群中。之所以選擇HarperDB，是因?yàn)樗梢灾С志W(wǎng)站的擴(kuò)展和速度要求。

早期提示和HarperDB設(shè)計(jì)示意圖

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

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

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

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

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

4.處理請(qǐng)求：

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

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

· 系統(tǒng)和組件

1.Akamai邊緣服務(wù)器：距離用戶最近的Akamai邊緣服務(wù)器。該邊緣服務(wù)器會(huì)緩存電商網(wǎng)站的頁(yè)面內(nèi)容和資產(chǎn)。這些服務(wù)器上運(yùn)行的EdgeWorkers負(fù)責(zé)對(duì)請(qǐng)求和響應(yīng)執(zhí)行邏輯處理。

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

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

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

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

總結(jié)

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

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

如您所在的企業(yè)也在考慮采購(gòu)云服務(wù)或進(jìn)行云遷移，

點(diǎn)擊鏈接了解Akamai Linode的解決方案