在 eBay.com 上享受購物速度

最佳化 eBay 網站和應用程式的效能，提供更快速的使用者體驗。

eBay 於 2019 年是全公司推出的計畫，許多團隊都決定盡可能加快網站和應用程式的執行速度。事實上，搜尋網頁載入時間每縮短 100 毫秒，eBay 的「加入購物車」次數就會增加 0.5%。

透過採用效能預算 (經過 Chrome 使用者體驗報告進行競爭研究後)，以及聚焦於以使用者為中心的成效指標，eBay 大幅改善了網站速度。

...此外，他們的 Chrome 使用者體驗報告資料也突顯了這些改進措施。

還有更多應用方式，但以下是 eBay 到目前為止學到的知識。

網路效能「方塊」

實際改善 eBay 的成果，是對各種實體在使用者歷程中縮減或「切割」(在大小和時間內) 的減少或「切割」。本文涵蓋與眾多網頁程式開發人員社群相關的主題，而非專門討論 eBay 的主題。

減少所有文字資源的酬載

加快網站載入速度的方法之一，就是盡可能減少程式碼。eBay 將所有提供給使用者的 JavaScript、CSS、HTML 和 JSON 回應中不使用和不必要的位元組縮減，藉此減少文字酬載。之前，每次推出新功能時，eBay 都會持續增加回應的酬載，而不會清理未使用的內容。這種情況會隨著時間增加，並帶來效能瓶頸。團隊通常會在這項清理活動中延遲，但 eBay 省下的費用會令人感到意外。

此處的「裁切」是回應酬載中浪費的位元組。

最佳化不需捲動位置內容的重要路徑

螢幕上的每個像素都不同。「不需捲動位置」的內容比需捲動位置更重要。iOS/Android/電腦版和網頁應用程式也要留意這一點，但服務會是什麼？eBay 的服務架構有一個名為體驗服務的層，可供前端 (平台專屬的應用程式和網路伺服器) 進行通訊。這個層特別設計為以檢視畫面或裝置為基礎，而非以實體為依據 (例如項目、使用者或訂單)。eBay 接著又導入體驗服務重要路徑的概念。當收到這些服務的要求時，它們會同時呼叫其他上游服務，立即取得不需捲動位置的內容資料。資料準備就緒後，就會立即清除。這些需捲動位置資料會在較晚的區塊中傳送，或是延遲載入。結果：使用者可以更快看到不需捲動位置的內容。

這裡的「切割」是指服務顯示相關內容所花費的時間。

圖片最佳化

圖片是網頁版面最大的貢獻者之一。即使只進行少量最佳化也有助於大幅改善成效。eBay 針對圖片執行了兩項最佳化作業。

首先，eBay 將使用 WebP 圖片格式標準化，不論在 iOS、Android 和支援的瀏覽器等所有平台的搜尋結果中，都可使用該圖片。搜尋結果頁面是 eBay 中最大量圖片的網頁，而且早已採用 WebP，但模式不一致。

其次，雖然 eBay 的商家資訊圖片已高度最佳化 (不論大小和格式)，但相同的嚴謹性不適用於精選圖片 (例如首頁上的頂端模組)。eBay 有許多專精的收錄圖片，可透過各種工具上傳。先前這些最佳化作業是由上傳者自行執行，但現在 eBay 會強制執行工具中的規則，因此所有上傳的圖片都會經過適當最佳化。

這裡的「剪切」是指傳送給使用者的圖片位元組浪費。

預先擷取靜態資產的預測功能

eBay 上的使用者工作階段並非只剩下一頁，這是一道流程。舉例來說，流程可以是從首頁前往搜尋頁面到項目頁面。為何流程中的頁面無法互相幫助？這是一種「預測預先擷取」概念，可讓單一網頁預先擷取下一個可能網頁所需的靜態素材資源。

使用預測預先擷取功能時，當使用者前往預測的網頁時，該資產就存在於瀏覽器快取中。這個步驟適用於 CSS 和 JavaScript 素材資源，可以事先擷取網址。值得一提的是，這項功能只適用於初次瀏覽，後續瀏覽時，靜態資產已存在於快取中。

這裡的「切割」是指 CSS 和 JavaScript 靜態素材資源在第一次導覽中的網路時間。

預先擷取熱門搜尋結果

當使用者搜尋 eBay 時，eBay 的數據分析資料顯示使用者很有可能瀏覽前 10 筆搜尋結果的項目。現在，eBay 會從搜尋中預先擷取項目，並在使用者瀏覽時保留這些項目。預先擷取作業分為兩個層級。

第一層發生在伺服器端，商品服務會快取搜尋結果中的前 10 個項目。當使用者前往其中一個項目時，eBay 現在可省下伺服器處理時間。伺服器端快取專供平台專用應用程式使用，並在全球推出。

第二層發生在瀏覽器快取中，澳洲適用於瀏覽器。由於項目會動態性質，預先擷取項目是一項進階最佳化功能。而且還有許多細微差異：網頁曝光、曝光量、競價項目等。詳情請參閱 LinkedIn 的效能工程聚會簡報，或持續關注 eBay 工程師針對特定主題發表的詳細網誌文章。

此處的「切割」可能是伺服器處理時間或網路時間，視該項目快取的位置而定。

正在下載搜尋圖片

在搜尋結果網頁中，當查詢以高層級發出時，會發生兩件事。第一是喚回度/排名步驟，系統會傳回與查詢相符的最相關項目。第二個步驟是利用額外的使用者相關資訊 (例如運費) 來補強召回的商品資料。eBay 現在會立即以區塊的形式，將前 10 張項目圖片連同標頭一起傳送至瀏覽器，讓下載作業可以在標記的其餘部分之前開始下載。進而加快圖片顯示速度。這項異動已在全球的網路平台中推出。

此處的「切割」指的是搜尋結果圖片的下載開始時間。

用於自動建議資料的邊緣快取功能

當使用者在搜尋框中輸入字母時，系統會彈出建議項目。不過，這些建議對於字母組合的效力至少在一天內不會改變。這些物件適合從 CDN 快取並提供 (最多 24 小時)，而不是將要求一路傳送至資料中心。國際市場特別受益於 CDN 快取。

不過，找到了一項擷取項目。eBay 在建議彈出式視窗中設有個人化元素，因此無法高快取。幸好，這是特定平台的應用程式並非問題，因為個人化功能和建議的使用者介面可能會分開。對網頁而言，在國際市場中，延遲比個人化更為重要。透過這項功能，eBay 現在可透過全球 CDN 快取，為 eBay.com 的全球平台和非美國市場提供自動建議。

這裡的「切斷」指的是提供自動建議的網路延遲時間和伺服器處理時間。

無法識別首頁使用者的邊緣快取

對網路平台而言，無法識別的使用者首頁內容都是一樣的。這些使用者是首次使用 eBay 或開始新的工作階段，因此並未個人化。雖然首頁廣告素材經常變動，但仍有快取空間。

eBay 決定在邊緣網路 (PoPs) 上快取無法辨識的使用者內容 (HTML)。初次造訪的使用者現在可以從附近的伺服器取得首頁內容，而不是從遠方的資料中心供應。eBay 仍在國際市場對此進行實驗，而 eBay 的成效將會發揮更大的影響力。

此處的「切斷」會再次發生，無法識別使用者發生網路延遲和伺服器處理時間的情形。

其他平台最佳化

改善 iOS/Android 應用程式剖析功能

iOS/Android 應用程式會與回應格式通常是 JSON 的後端服務進行通訊。這些 JSON 酬載可能會很大。eBay 並非剖析整個 JSON 以便在螢幕上算繪內容，而是採用高效剖析演算法，針對需要立即顯示的內容進行最佳化處理。

使用者現在可以更快看到內容。另外，針對 Android 應用程式，eBay 會在使用者在搜尋框中輸入搜尋字詞時，開始初始化搜尋檢視控制器 (iOS 裝置已有這項最佳化作業)。系統以往只有在使用者按下搜尋按鈕後才會執行這項操作。使用者現在可以更快找到搜尋結果。這裡的「切斷」是指裝置用來顯示相關內容的時間。

改善 Android 應用程式啟動時間

這適用於 Android 應用程式的冷啟動時間最佳化。當應用程式冷啟動時，許多初始化作業會在 OS 層級和應用程式層級進行。在應用程式層級縮短初始化時間，有助於使用者更快看到主畫面。eBay 進行過一些分析，並發現並非所有初始化作業都需要初始化才能顯示內容，有些可以延遲完成。

更重要的是，eBay 觀察到有第三方分析呼叫會延遲顯示在螢幕上。移除封鎖呼叫並改為非同步，進一步協助冷啟動時間有所提升。這裡的「切割」指的是 Android 應用程式不必要的啟動時間。

結論

eBay 的所有表演「方塊」都對移動針織產生貢獻，且發生了一段時間。這些版本在一整年內分階段進行，每個發布版本都以數十毫秒表示，最終要達到 eBay 的發展重點：

成效是功能要素和競爭優勢。改善體驗有助於提高使用者參與度、轉換率和投資報酬率。就 eBay 的案例而言，這些最佳化的範圍從低功夫 (至有) 的先進方法大不相同。

如需瞭解詳情，請參閱 Speed by kions 網站瞭解詳情，並密切留意 eBay 工程師不久後會處理的研究表現的詳盡文章。