QuintoAndar 如何改善網頁效能,進而提高轉換率和單次工作階段頁數

專注於改善 Core Web Vitals 和遷移至 Next.js 的專案,可讓轉換率提高 5%,每個工作階段的網頁數則增加 87%。

Daniela Sayuri Yassuda
Daniela Sayuri Yassuda

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)。

Edifício Copan (巴西聖保羅) 的社區頁面。從地面拍攝的相片會顯示建築物結構的曲線。
公寓頁面的主頁橫幅。

先前,所有圖片都已具備 srcsetsizes 屬性,可提供回應式圖片。我們也使用 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) 問題。負責版面配置變更的元素只會在用戶端中算繪,例如使用用戶端算繪元件重新整理伺服器端標記,或是未定義 widthheight 屬性的圖片。

為解決這些問題,我們會盡可能為這些元素設定確切的尺寸,或使用 min-height 設定預估值。您可以使用 aspect-ratio CSS 屬性等其他選項。我們也建立了預留位置,避免動態算繪的元件造成版面配置位移。

圖片顯示 Google 地圖中的都會區,中央有紅色標記。
為地圖圖片等元素定義尺寸後,CLS 便會降低。

逐步推出變更

我們的團隊想驗證經過最佳化的公寓中心頁面,確保使用者體驗更佳。為達成此目標,我們採用了漸進式推出策略:

  1. 在第一階段,我們為幾個精選網址發布新版本,因此每天只有幾百位使用者會看到這些網址;
  2. 在第二階段,我們將這項功能發布至更多網頁,每天有數千名使用者使用。
  3. 在第三個也是最後一個階段,我們已將這項功能發布至所有網頁,並完成對所有使用者的全面推播。

在這段期間,工程團隊持續評估實際工作環境中的網頁效能,並持續改善。此外,團隊也比較了新舊版本的業務指標。這個驗證期間的結果令人振奮。

結果

團隊使用 SpeedCurve 持續針對公寓網頁執行實驗室測試。以下是行動版的結果:

實驗室指標 之前 使用後 差值
最大內容繪製 (LCP) 2.41 秒 1.48 秒 -39%
互動準備時間 (TTI) 12.16 秒 7.48 秒 -39%
總封鎖時間 (TBT) 1124 毫秒 1056 毫秒 -4%
累計版面配置位移 (CLS) 0.0402 0.0093 -77%
使用 SpeedCurve 收集的實驗室指標結果。

我們也想確認這項功能對實際使用者的影響。我們使用 Instana 網站監控收集到的現場資料,分析推出前後 1 個月的期間。比較行動裝置使用者的第 75 個百分位數,我們發現 LCP 減少了 26%,FID 則減少了 72%。

這張線形圖表顯示 LCP 值,比較當月與上個月的新舊版本。新版的曲線會在 2 到 4 秒之間浮動,大部分時間都低於舊版的曲線。
這張線形圖顯示 FID 值,比較當月與上個月的新舊版本。新版的曲線大多數時間都低於 100 毫秒,而舊版的曲線則有幾個尖峰值超過 250 毫秒。
透過 Instana 收集的欄位指標結果。

PageSpeed Insights 會提供過去 28 天的實地資料報表。最常造訪的社區網頁有足夠的資料,可產生行動使用者的報表。截至 2021 年 11 月,所有網站體驗核心指標都屬於「良好」類別。

以「網頁速度洞察」報表為主題的螢幕截圖,著重於「欄位資料」部分。所有 Core Web Vitals 指標 (FCP、FID、LCP、CLS) 都位於良好分類中。
PageSpeed Insights 顯示,在最常存取的社區住宅網頁中,行動使用者享有良好的使用體驗。

在逐步推出期間,我們發現跳出率下降。在我們完成所有網頁的發布作業後,Google Analytics 顯示跳出率降低了 46%、單次工作階段頁數增加了 87%,平均工作階段持續時間則增加了 49%。付費搜尋的跳出率降幅更大,達到 59%,這對按點擊付費 (PPC) 廣告的投資來說是好消息。

Google Analytics 圖表的螢幕截圖。這張圖表比較 2021 年 3 月的兩個不同期間的跳出率。自 3 月 17 日起,跳出率略有下降。3 月 24 日的下降幅度較大。
Google Analytics 顯示,隨著我們在更多網頁中推出新版本,跳出率也隨之下降。

至於業務指標的影響,我們分析了預約導覽和申請租賃或購買房產等交易的轉換率。在改善功能推出期間,我們的團隊比較了舊版和新版之間的轉換。在同一週內,採用新版本的網頁群組轉換次數增加了 5%,而其他網頁的轉換次數則略有減少。

兩個並排的線形圖,每個圖表比較目前與前一週的轉換次數。左側是先前版本的網頁,顯示目前一週的轉換曲線略低於前一週。右側是新版本,當週的轉換曲線略高於前一週。
在同一週,新版本的轉換次數增加,舊版本則略為減少。

結論

這個專案是從無架構 React 遷移至 Next.js 的長期遷移作業的第一部分。自那時起,負責處理公寓網頁的團隊對改善後的開發人員體驗給予正面回饋。其他需要啟動新網頁應用程式的團隊,已使用 Next.js 完成這項工作。我們相信 Next.js 可簡化維護工作,並為不同應用程式建立共同基礎。

整體而言,公寓內容中心的使用者和交易數量持續成長。從長期分析來看,這項成就的達成受到許多因素影響,例如 QuintoAndar 的業務擴張,以及改善網頁索引等 SEO 計畫。在這個專案中,我們發現頁面成效也是其中一個因素,可能會對轉換成效產生正面影響。

特別感謝 SEO 團隊產品經理 Pedro Carmo,深入研究使用者資料並建立本案例研究中的所有轉換分析。