輪轉介面的最佳做法

針對輪轉介面進行最佳化，提升效能和可用性。

Katie Hempenius
Katie Hempenius
X

輪轉介面是一種使用者體驗元件，會以類似投影播放的方式顯示內容。輪轉介面可以設為「自動播放」，或讓使用者手動導覽。雖然輪轉介面可用於其他位置，但最常用於在首頁上顯示圖片、產品和促銷活動。

本文將說明輪轉介面的效能和使用者體驗最佳做法。

顯示輪轉介面的圖片

成效

實作良好的輪轉介面本身，對效能影響應極小或完全沒有影響。不過，輪轉介面通常會包含大型媒體素材資源。無論顯示在輪轉介面或其他位置，大型素材資源都可能會影響效能。

  • LCP (最大內容繪製)

    大型的折頁面外輪轉介面通常會包含網頁的 LCP 元素，因此可能會對 LCP 造成重大影響。在這些情況下，最佳化輪轉介面可能會大幅改善 LCP。如要深入瞭解 LCP 測量在包含輪轉介面的網頁上的運作方式，請參閱「輪轉介面的 LCP 評估」一節。

  • INP (Interaction to Next Paint)

    輪轉介面幾乎沒有 JavaScript 要求，因此不應影響網頁的回應速度。如果發現網站的輪轉介面含有長時間執行的指令碼，建議您考慮更換輪轉介面工具。

  • CLS (累計版面配置位移)

    令人驚訝的是，許多輪轉介面都使用無法順暢播放的非合成動畫，這可能會導致 CLS 增加。在含有自動播放輪轉介面的網頁中，這可能會導致無限的 CLS。這類 CLS 通常不易察覺，因此很容易被忽略。為避免發生這個問題，請避免在輪轉介面中使用非合成的動畫 (例如在幻燈片轉場期間)。

效能最佳做法

使用 HTML 載入輪轉介面內容

輪轉介面內容應透過網頁的 HTML 標記載入，以便瀏覽器在網頁載入過程的早期發現這些內容。使用 JavaScript 啟動輪轉介面內容的載入作業，可能是使用輪轉介面時，最容易犯下的效能錯誤。這會延遲圖片載入，對 LCP 造成負面影響。

正確做法
<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>
錯誤做法
const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

如要進行進階輪轉介面最佳化，建議您先將第一張幻燈片以靜態方式載入，然後逐步強化，納入導覽控制項和其他內容。這項技巧最適合用於使用者能持續專注的環境，因為這樣可讓系統有額外的時間載入內容。在主畫面等使用者可能只停留一兩秒的環境中，只載入單一圖片也可能同樣有效。

避免版面配置轉移

幻燈片轉場和導覽控制項是輪轉介面中版面配置位移最常見的兩個來源：

  • 滑動轉場效果：在滑動轉場期間發生的版面配置位移，通常是因為更新 DOM 元素的版面配置誘導屬性。這類屬性的範例包括：left、top、width 和 marginTop。為避免版面配置位移，請改用 CSS transform 屬性來轉換這些元素。這個示範說明如何使用 transform 建構基本輪轉介面。

  • 導覽控制項：移動或新增/移除 DOM 中的輪轉介面導覽控制項，可能會導致版面配置位移，視這些變更的實作方式而定。這類行為的輪轉介面通常在回應使用者懸停時呈現這類行為。

以下是輪轉介面評估 CLS 時的一些常見問題：

  • 自動播放輪轉介面：幻燈片轉場是輪轉介面相關版面配置位移最常見的來源。在非自動播放的輪轉介面中，這些版面配置移位通常會在使用者互動後的 500 毫秒內發生，因此不會計入累積版面配置移位 (CLS)。不過，對於自動播放輪轉介面而言，這些版面配置變更不僅可能會影響 CLS，還可能無限重複。因此，請務必確認自動播放輪轉介面並非版面配置位移的來源。

  • 捲動：部分輪轉介面可讓使用者透過捲動功能瀏覽輪轉介面投影片。如果元素的起始位置有變，但捲動偏移量 (也就是 scrollLeft 或 scrollTop) 改變的次數相同 (但方向相反)，只要這些元素發生在同一影格，就不會視為版面配置位移。

如要進一步瞭解版面配置偏移，請參閱「偵錯版面配置偏移」。

使用現代化技術

許多網站會使用第三方 JavaScript 程式庫實作輪轉介面。如果您目前使用舊版輪轉介面工具，可以改用較新的工具來提升效能。較新的工具通常會使用更有效率的 API，且不太可能需要 jQuery 等額外依附元件。

不過，視您建構的輪轉介面類型而定，您可能根本不需要 JavaScript。新的 Scroll Snap API 可讓您僅使用 HTML 和 CSS 實作類似輪轉介面的轉場效果。

以下提供一些有關使用 scroll-snap 的實用資源：

改善輪轉介面內容

輪播介面通常會包含網站上最大的圖片，因此請務必確保這些圖片已完全最佳化。選擇適當的圖片格式和壓縮等級、使用圖片 CDN，以及使用 srcset 提供多個圖片版本，都是可減少圖片傳輸大小的技術。

成效評估

本節說明 LCP 評估與輪轉介面的相關性。雖然在 LCP 計算期間，輪轉介面的處理方式與其他使用者體驗元素並無不同，但針對自動播放輪轉介面計算 LCP 的機制，是相當容易混淆的現象。

輪轉介面 LCP 評估

以下是瞭解輪轉介面 LCP 計算方式的關鍵要點：

  • LCP 會考量繪製到頁框中的網頁元素，使用者與網頁互動 (輕觸、捲動或按下按鍵) 後，系統就不會再考慮 LCP 元素的新候選項目。因此，自動播放輪轉介面中的任何投影片都有可能成為最終 LCP 元素，而靜態輪轉介面中只有第一張投影片才有可能成為 LCP 候選元素。
  • 如果系統算繪兩張大小相同的圖片，系統會將第一張圖片視為 LCP 元素。只有當 LCP 候選項目大於目前 LCP 元素時，系統才會更新 LCP 元素。因此，如果所有輪轉介面元素的大小相同，LCP 元素應是第一個顯示的圖片。
  • 評估 LCP 候選時，LCP 會考量「可見大小或內建大小，以較小者」為考量。因此，如果自動輪轉介面以一致的大小顯示圖片，但其中包含的圖片具有不同內在大小 (小於顯示大小)，則在顯示新幻燈片時，LCP 元素可能會變更。在這種情況下，如果所有圖片都以相同大小顯示，系統會將內在大小最大的圖片視為 LCP 元素。為保持低 LCP，請確保自動播放輪轉介面中的所有項目都相同內建大小。

Chrome 88 中輪轉介面 LCP 計算方式的異動

自 Chrome 88起，日後從 DOM 中移除的圖片會視為潛在的最大內容繪製作業。在 Chrome 88 之前，系統不會考量這些圖片。對於使用自動播放輪轉介面網站，這項定義變更對 LCP 分數的影響將為中性或正面。

這項變更是為了回應觀察結果，許多網站在實作輪轉介面轉場效果時，會從 DOM 樹狀結構中移除先前顯示的圖片。在 Chrome 88 之前，每次系統顯示新投影片時，移除前一個元素會觸發 LCP 更新。這項異動只會影響自動播放的輪轉介面，因為根據定義，潛在的最大內容繪製作業只能在使用者首次與網頁互動前發生。

Chrome 121 中的閾值異動

Chrome 121 變更了輪轉介面等水平捲動圖片的行為。這些現在使用與垂直捲動相同的門檻。也就是說，在輪轉介面用途中，圖片會在可視區域顯示前載入。這表示使用者較不容易察覺圖片載入作業，但代價是下載次數會增加。使用水平延遲載入示範，比較 Chrome 與 Safari 和 Firefox 的行為。

其他注意事項

本節將討論實作輪轉介面時應注意的使用者體驗和產品最佳做法。輪轉介面應以易於瀏覽及閱讀的方式呈現內容，進而協助您達成業務目標。

提供醒目的導覽控制項

輪轉介面的導覽控制項應易於點選，且十分醒目。這項功能很少有良好的執行方式，大多數輪轉介面都會提供小型且不明顯的瀏覽控制項。請注意，單一顏色或樣式的導覽控制項很少會在所有情況下運作。舉例來說，在深色背景上清楚可見的箭頭，在淺色背景上可能難以辨識。

表示導航進度

輪轉介面導覽控制項應提供幻燈片總數和使用者瀏覽進度的相關資訊。方便使用者前往特定投影片，瞭解已看過的內容。在某些情況下，提供即將播放的內容預覽畫面 (無論是下一張投影片片段或縮圖清單) 也能帶來幫助，並提高參與度。

支援行動手勢

在行動裝置上，除了傳統的導覽控制項 (例如畫面上的按鈕) 之外，也應支援滑動手勢。

提供其他導覽路徑

由於大多數使用者不會與所有輪轉介面內容互動，因此輪轉介面幻燈片連結的內容應可透過其他導覽路徑存取。

可讀性最佳做法

不要使用自動播放功能

使用自動播放會產生兩個幾乎差不多的問題：畫面上的動畫通常會分散使用者的注意力，並將目光移開更重要內容。此外，由於使用者經常將動畫與廣告建立關聯，因此系統會忽略自動播放的輪轉介面。

因此，自動播放功能很少是個好選擇。如果內容很重要，不使用自動播放功能就能盡量提高曝光率；如果輪轉介面內容不重要，使用自動播放功能反而會影響到更重要的內容。此外，自動輪轉介面不易閱讀，也可能會造成困擾。每個人閱讀的速度不同，因此輪轉介面很少會在「正確」的時間點為不同使用者轉換。

理想情況下，使用者應透過導覽控制項操作滑動瀏覽功能。如果您必須使用自動播放功能，請在使用者游標懸停時停用自動播放功能。此外，幻燈片轉場速率應考量幻燈片內容：幻燈片包含的文字越多，在畫面上顯示的時間就應越長。

區隔文字和圖片

輪轉介面文字內容通常會「烘焙」在對應的圖片檔中，而不是使用 HTML 標記單獨顯示。這種做法不適用於無障礙功能、本地化和壓縮率。並鼓勵採用一體適用的素材資源建立方法。不過，相同的圖片和文字格式在電腦和行動裝置格式中，很少能以同樣的方式呈現。

保持精簡

您只有短短幾秒的時間，才能吸引使用者的注意力。簡短且切題的廣告文案，有助於提高傳達訊息的機率。

產品最佳做法

如果無法使用額外的垂直空間來顯示額外內容，輪轉介面就很實用。產品頁面上的輪轉介面通常是關於此用途的好範例

不過，輪轉介面不一定能有效運用。

  • 輪轉介面 (尤其是含有促銷活動或自動前進的輪轉介面) 很容易讓使用者誤認為廣告。使用者往往會忽略廣告，這種現象稱為橫幅失明症。
  • 輪轉介面通常用於安撫多個部門，避免做出關於商業優先順序的決定。因此，輪轉介面很容易變成放置無效內容的垃圾場。

測試假設

您應評估及測試輪轉介面的商務成效，尤其是在首頁上顯示的輪轉介面。輪轉介面點擊率有助於判斷輪轉介面及其內容是否有效。

切合需求

輪轉介面最適合用於呈現有趣且相關的內容，並提供明確的背景資訊。如果內容在輪轉介面外無法吸引使用者，將其放入輪轉介面並不會改善成效。如果您必須使用輪轉介面，請將內容設為優先順序，並確保每個幻燈片都與使用者相關，讓他們想點選後續幻燈片。