專案著重於改善網站體驗核心指標並改用 Next.js，結果轉換率提升 5%，單次工作階段頁數則增加了 87%。
QuintoAndar 是一家巴西的道具科技公司，他們產品提供房地產數位端對端解決方案。今年，我們推出的專案著重於改善應用程式中內容中心的成效，讓使用者流量和轉換指標的表現明顯提升。
46%
跳出率降幅
87%
單次工作階段頁數增幅
5%
驗證階段的轉換率升幅
挑戰
這款應用程式設有聯合內容中心，設有超過 40,000 個頁面，使用者可以取得房源相關資訊、查看公共區域相片、閱讀社區相關資訊，以及查看可供出租或出售的房源資訊。這些網頁對於 QuintoAndar 非常重要：
- 這類流量是自然流量的重要來源，而且從搜尋引擎結果進入的使用者人數穩定成長。
- 與其他網頁相比，最高成效廣告活動在中和長期的轉換率都很高。
不過，在以下網頁的成效和使用者體驗方面仍有一些挑戰：
- 這項功能的效能並未依網站體驗核心指標衡量，且有已知問題包括網頁載入速度緩慢、使用者輸入回應速度緩慢及版面配置不穩定等問題。
- 他們的跳出率已經很高，即使我們預計會比應用程式其他部分的跳出率還高。
- Google 搜尋中的網頁體驗更新 (當時尚未發布) 會將網站體驗核心指標納入排名演算法，這意味著網頁效能可能會影響搜尋結果的顯示方式。
同時，我們也發現一些開發人員經驗可以協助公司內部其他專案獲得優勢：
- 我們的伺服器端轉譯邏輯是由內部系統建立，可轉譯所有高流量的網頁 (包括住宅頁面)，因此維護及培訓新進員工變得太複雜。
- 要獲得良好應用程式效能的重要功能，例如程式碼分割，不僅需要自訂設定，還須由開發人員手動操作。
- QuintoAndar 有超過 30 個 React 網頁應用程式。將更新提供給這些應用程式，並根據最佳做法維護，是一項艱鉅的任務。
方法
為了改善使用者體驗，我們開始推行 Conthedominium 內容中心的效能最佳化專案，以改善使用者體驗，進而提升轉換成效、改善搜尋引擎最佳化 (SEO) 及可用性。這項計畫也是改善開發人員體驗的絕佳機會。
遷移至 Next.js
新版 Condominium 頁面是使用 Next.js 實作。公寓內容中心大部分與應用程式的其他部分都是獨立的，因此非常適合嘗試新架構。我們得以瞭解遷移工作的重要性，並評估其功能在不影響 QuintoAndar 中其他 React 應用程式的情況下有何助益。
我們硬性規定是確保搜尋引擎能夠持續檢索網頁。Next.js 支援立即可用的伺服器端算繪功能，因此不需要自訂設定，即可符合這項規定。使用說明文件後，您更能輕鬆分享如何執行工作，例如伺服器上的資料擷取，以及培訓新開發人員。伺服器端轉譯作業也稱為「改善效能」指標，例如「首次顯示內容所需時間」 (FCP)。
這個架構也提供其他較注重效能的功能，例如自動程式碼分割和預先擷取。雖然現有架構已提供這類功能，但開發人員需要的額外工作還是停滯不前。舉例來說，在網頁或元件層級執行程式碼必須手動完成。
最佳化 JavaScript 資源
第一步是移除未使用的程式碼。我們檢查了 Webpack Bundle 分析工具報表，其中顯示每個 JS 套件的內容，並仔細審查了所有第三方指令碼。因此，我們成功清除了某些未在此特定網頁中使用的追蹤程式庫。
我們的團隊進一步評估現有功能的效能成本。舉例來說，「喜歡」按鈕需要大量的 JavaScript 才能運作。不過，在洲際頁面中，只有不到 0.5% 的使用者與按鈕互動，且按鈕的互動頻率較高，且更常用於應用程式其他部分。經過有關「工程」和「產品」的討論後，我們決定移除這項功能。
其他 JS 最佳化作業已開始進行 (例如使用 Brotli 進行靜態壓縮)，在建構期間使用 BrotliWebpackPlugin 完成，而且也適用於其他類型的靜態資源。起初，我們依靠 CDN 的壓縮方式，而 Brotli 將 JS 大小縮減 18% (相較於 gzip)。但在建構期間，我們改用 Brotli 壓縮，成功降低 24%。
最佳化圖片資源
行動版的不需捲動位置上方大部分區域都含有主頁橫幅。也會是網頁的最大內容繪製 (LCP)。
先前所有圖片皆已設有 srcset 和 sizes 屬性，可用於提供回應式圖片。我們同時也使用 Thumbor 來視需求調整圖片的大小，並將我們的 CDN 設定為有效率地快取圖片。
新型行動裝置的螢幕像素密度極高，也就是說，瀏覽器會算繪 3 倍或 4 倍的圖片 (如有)。隨著解析度增加，人類的眼睛會更難察覺差異，但無論檔案尺寸如何，檔案大小都會增加。達到圖片解析度上限會提高圖片尺寸，且不影響使用者體驗。我們已限制主頁橫幅，最多放送 2 倍的版本，大約比 3 倍的版本小 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 屬性。我們也建立了預留位置，防止動態轉譯的元件導致版面配置位移。
逐步推出變更
我們的團隊想驗證是否已最佳化 Condominium 中樞頁面，確保使用者能享有更優質的體驗。為達成這個目標，我們採取漸進式發布策略：
- 在第一階段，新版本僅針對少數使用者挑選的網址發布，因此每天只有少數使用者看到。
- 在第二階段中，該作品發布更多頁面，每天約有數千名使用者；
- 在第三階段和最後階段，該版本已發布至所有頁面，且所有使用者的推出作業均已完成。
在此期間，工程團隊會持續評估網頁的實際效能，並持續做出改善。此外，這個團隊還比較了新舊版本的業務指標。驗證期間的結果很亮眼。
結果
該團隊使用 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%，同時也代表每次點擊付費廣告的投資。
至於對業務指標的影響，我們分析了各種交易 (例如安排巡迴演出、申請租屋或購屋) 的轉換率。在尚未推出改善功能的這段期間，我們的團隊會比較新舊版本的轉換成效。在同一週，包含新版本的網頁組轉換率提高了 5%，其他網頁則在相同指標上略有下降。
結論
從無架構 React 到 Next.js 進行長期遷移，這項專案是第一步。後來參與住宅團隊的團隊也針對開發人員體驗給予正面評價。原本必須採用 Next.js 的其他團隊，才能啟動新的網頁應用程式。我們相信 Next.js 將可簡化維護工作，並為不同應用程式建立共同的基準。
整體而言，綜合內容中心的使用者人數和交易量絕對不斷增長。在長期分析中，影響這方面的因素有很多，例如 QuintoAndar 的營運和搜尋引擎最佳化計畫的擴大，例如改善網頁索引建立功能。在這個專案中，我們發現網頁效能也是提升轉換成效的其中一個因素。
特別感謝 SEO 團隊產品經理 Pedro Carmo 深入研究使用者資料，並建立本個案研究提到的所有轉換分析。