專注於改善 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)。
此架構還提供其他有助於提升效能的功能,例如自動程式碼分割和prefetching。雖然現有結構已提供這類功能,但開發人員需要額外進行的工作,導致他們無法採用這類功能。舉例來說,您必須手動執行網頁或元件層級的程式碼分割作業。
最佳化 JavaScript 資源
第一步是移除未使用的程式碼。我們查看了 Webpack Bundle Analyzer 報表,其中顯示每個 JS 套件的內容,並仔細檢查所有第三方指令碼。因此,我們可以清除這個網頁中未使用的部分追蹤程式庫。
我們的團隊進一步評估現有功能的效能成本。舉例來說,「喜歡」按鈕需要大量的 JS 才能運作。不過,在公寓頁面中,只有不到 0.5% 的使用者與按鈕互動,且這個按鈕在應用程式的其他部分更常使用。在工程和產品團隊討論後,我們決定移除這項功能。
其他 JS 最佳化功能也已就位,例如使用 Brotli 進行靜態壓縮,這是在建構期間使用 BrotliWebpackPlugin
完成,也已套用至其他類型的靜態資源。一開始,我們仰賴 CDN 提供的壓縮功能,而 Brotli 相較於 gzip 可將 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) 廣告的投資來說是好消息。
至於業務指標的影響,我們分析了預約導覽和申請租賃或購買房產等交易的轉換率。在改善功能推出期間,我們的團隊比較了舊版和新版之間的轉換。在同一週內,採用新版本的網頁群組轉換次數增加了 5%,而其他網頁的轉換次數則略有減少。
結論
這個專案是從無架構 React 遷移至 Next.js 的長期遷移作業的第一部分。自那時起,負責處理公寓網頁的團隊對改善後的開發人員體驗給予正面回饋。其他需要啟動新網頁應用程式的團隊,已使用 Next.js 完成這項工作。我們相信 Next.js 可簡化維護工作,並為不同應用程式建立共同基礎。
整體而言,公寓內容中心的使用者和交易數量持續成長。從長期分析來看,這項成就的達成受到許多因素影響,例如 QuintoAndar 的業務擴張,以及改善網頁索引等 SEO 計畫。在這個專案中,我們發現頁面成效也是其中一個因素,可能會對轉換成效產生正面影響。
特別感謝 SEO 團隊產品經理 Pedro Carmo,深入研究使用者資料並建立本案例研究中的所有轉換分析。