專注於改善 Core Web Vitals 和遷移至 Next.js 的專案，可讓轉換率提高 5%，每個工作階段的網頁數則增加 87%。
QuintoAndar 是巴西的房地產科技公司，其產品提供數位端對端房地產解決方案。今年，我們制定了一項專案，專注於提升應用程式內容中心的成效，也推動了使用者流量和轉換指標的增加。
46%
跳出率降幅
87%
單次工作階段頁數增加幅度
5%
驗證階段的轉換率提升
挑戰
我們的應用程式設有公寓內容中心，並擁有超過 40,000 個頁面，方便使用者查看房源資訊、查看公共區域的相片、瀏覽社區相關資訊，以及尋找可供出租或出售的房源資訊。這些網頁對 QuintoAndar 來說非常重要：
- 搜尋引擎結果是自然流量的重要來源，而且來自搜尋引擎結果的使用者人數持續增加。
- 與其他頁面相比，這些頁面在中長期內的轉換率較高。
不過，這些網頁的效能和使用者體驗仍有待加強：
- 根據 Core Web Vitals 的評估，這些網站的效能並未達到最佳狀態，且有已知問題，包括網頁載入速度緩慢、對使用者輸入的回應速度緩慢，以及版面配置不穩定。
- 即使我們預期這些使用者的跳出率會高於應用程式其他部分，實際上仍偏高。
- Google 搜尋中的網頁體驗更新 (當時尚未發布) 會將 Core Web Vitals 納入排名演算法，因此網頁效能可能會影響搜尋結果顯示的方式。
同時，我們也發現一些開發人員體驗商機，可在公司其他專案中發揮效益：
- 我們的伺服器端轉譯邏輯 (用於轉譯所有流量高的網頁，包括公寓網頁) 是由內部人員自行建立，但維護和新進人員的訓練難度太高。
- 為了提升應用程式效能，您必須使用程式碼分割等必要功能，但這類功能也需要開發人員進行自訂設定和手動操作。
- QuintoAndar 提供超過 30 個 React 網頁應用程式。為這些應用程式提供更新，並依照最佳做法進行維護，是一項艱鉅的任務。
方法
我們已開始進行公寓內容中心的效能最佳化專案，以改善使用者體驗，因為這些改善措施可提升轉換率、改善 SEO 和可用性。這項計畫也是改善開發人員使用體驗的絕佳機會。
遷移至 Next.js
我們使用 Next.js 實作新版公寓頁面。由於公寓內容中心與應用程式的其他部分幾乎無關，因此似乎是嘗試新架構的理想候選項目。我們能瞭解遷移工作規模，並評估其功能在不影響 QuintoAndar 中的其他 React 應用程式的情況下可提供哪些協助。
我們必須確保網頁仍可供搜尋引擎檢索，Next.js 可滿足這項需求，因為它支援即時支援伺服器端轉譯，因此不必進行自訂設定。有了說明文件，您就能更輕鬆地分享如何執行相關作業的知識，例如在伺服器上擷取資料，以及新開發人員的 onboarding 作業。伺服器端轉譯功能也可以改善效能指標，例如首次顯示內容繪製 (FCP)。
此架構還提供其他有助於提升效能的功能，例如自動程式碼分割和預先擷取。雖然現有結構體已提供這類功能，但開發人員需要額外進行的工作，導致他們無法採用這類功能。舉例來說，您必須手動執行網頁或元件層級的程式碼分割作業。
最佳化 JavaScript 資源
第一步是移除未使用的程式碼。我們查看了 Webpack Bundle 分析工具報表 (其中會顯示每個 JS 套件的內容)，並仔細審查所有第三方指令碼。因此，我們可以清除這個網頁中未使用的部分追蹤程式庫。
我們的團隊進一步評估現有功能的效能成本。舉例來說，「喜歡」按鈕需要大量的 JS 才能運作。然而，在 Condomini 頁面中，只有不到 0.5% 的使用者曾與按鈕互動，且該按鈕在應用程式其他部分出現且較常使用。經過我們探討工程和產品方面的討論後，我們決定移除這項功能。
系統已採用其他 JS 最佳化設定 (例如使用 BrotliWebpackPlugin 在建構期間執行 Britli 靜態壓縮)，而且也適用於其他類型的靜態資源。一開始，我們依賴 CDN 的壓縮功能，與 gzip 相比，Britli 將 JS 大小縮減 18%。但我們在建構期間改用 Brotli 壓縮，結果成功減少 24%。
最佳化圖片資源
行動版網頁的不需捲動位置佔據大部分的區塊區域。這也恰好是網頁的最大內容繪製 (LCP)。
先前，所有圖片都已具備 srcset 和 sizes 屬性，可提供回應式圖片。我們也使用 Thumbor 依需求調整圖片大小，並設定 CDN 以便有效快取圖片。
新型行動裝置的螢幕具有極高的像素密度，因此瀏覽器會在可用時算繪 3x 或 4x 版本的圖片。隨著解析度增加，人力較難察覺差異，但無論檔案大小為何，檔案大小都會增加。限制圖片解析度上限，可改善圖片大小，同時兼顧使用者體驗。我們限制主圖片最多只能提供 2x 版本，這比 3x 版本小約 35%，比 4x 版本小約 50%。
最後，我們採用預先載入策略，盡快下載並顯示圖片，希望能改善 LCP 指標。
<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">
Next.js 內建圖片元件包含許多這類最佳化功能，例如回應式大小調整和優先載入。在這個專案中，我們並未將現有圖片轉移至使用此元件，但我們計劃在新的功能中採用此元件。
減少版面配置位移
公寓網頁有幾個累計版面配置位移 (CLS) 問題。負責版面配置變更的元素只會在用戶端中算繪，例如使用用戶端算繪元件重新整理伺服器端標記，或是未定義 width 和 height 屬性的圖片。
為解決這個問題，我們盡可能為這些元素設定確切的尺寸，或使用 min-height 估算值。您還可以採用其他選項，例如使用 aspect-ratio CSS 屬性。我們也建立了預留位置，避免動態算繪的元件造成版面配置位移。
逐步推出變更
我們的團隊希望驗證經過最佳化的公寓中心網頁，確保使用者體驗更佳。為達成這項目標，我們採用了漸進式推出策略：
- 在第一階段，我們為少數精選網址發布新版本，因此每天只有幾百名使用者會看到這些網址；
- 在第二階段，我們將這項功能發布至更多網頁，每天有數千名使用者使用。
- 在第三個也是最後一個階段，我們已為所有網頁發布這項功能，並完成對所有使用者的推出作業。
在這段期間，工程團隊持續評估實際工作環境中的網頁效能，並持續改善。此外，團隊也比較了新版與舊版之間的業務指標。這個驗證期間的結果令人振奮。
結果
團隊使用 SpeedCurve 持續針對公寓網頁執行實驗室測試。以下是行動版的結果：
| 研究室指標 | 之前 | 使用後 | 差值 |
|---|---|---|---|
| 最大內容繪製 (LCP) | 2.41 秒 | 1.48 秒 | -39% |
| 互動準備時間 (TTI) | 12.16 秒 | 7.48 秒 | -39% |
| 總封鎖時間 (TBT) | 1124 毫秒 | 1056 毫秒 | -4% |
| 累計版面配置位移 (CLS) | 0.0402 | 0.0093 | -77% |
我們也想確認這項功能對實際使用者的影響。我們使用 Instana 網站監控收集到的現場資料，分析推出前後 1 個月的期間。比較行動裝置使用者的第 75 個百分位數，我們發現 LCP 減少了 26%，FID 則減少了 72%。
PageSpeed Insights 會提供過去 28 天的實地資料報表。最常造訪的社區網頁有足夠的資料，可產生行動使用者的報表。截至 2021 年 11 月，所有網站體驗核心指標都屬於「良好」類別。
在逐步推出期間，我們發現跳出率下降。在我們完成所有網頁的發布作業後，Google Analytics 顯示跳出率降低了 46%、單次工作階段頁數增加了 87%，平均工作階段持續時間則增加了 49%。付費搜尋的跳出率甚至下降了，下降了 59%，表示對每次點擊付費 (PPC) 廣告投資的投資效益提升了 59%。
至於業務指標的影響，我們分析了預約導覽和申請租賃或購買房產等交易的轉換率。在改善功能推出期間，我們的團隊比較了舊版和新版之間的轉換。在同一週內，採用新版本的網頁群組轉換次數增加了 5%，而其他網頁的相同指標則略為下降。
結論
這個專案是從無架構 React 遷移至 Next.js 的長期遷移作業的第一部分。自那時起，負責處理公寓網頁的團隊對改善後的開發人員體驗給予正面回饋。其他必須啟動新網頁應用程式的團隊，也已透過 Next.js 完成這項作業。我們相信 Next.js 可簡化維護作業，並為不同應用程式建立共同基礎。
整體而言，從使用者和交易的絕對數量來看，公寓內容中心持續成長。從長期分析來看，這項成就的達成受到許多因素影響，例如 QuintoAndar 的業務擴張，以及改善網頁索引等 SEO 計畫。在本專案期間，我們發現網頁成效也是上述其中一個因素，對轉換成效有正面影響。
特別感謝 SEO 團隊產品經理 Pedro Carmo，深入研究使用者資料並建立本案例研究中的所有轉換分析。