延遲轉譯大型內容

如果網頁內容豐富，例如無限捲動、複雜的資訊主頁或密集文章，初始轉譯速度可能會變慢，互動速度也會變慢。現代網路技術可讓您延遲轉譯不會立即顯示的內容，大幅提升效能，同時不影響無障礙功能或使用者期望。

如要最佳化算繪作業，您可以使用 CSS content-visibility 屬性和 HTML hidden="until-found" 屬性。雖然兩者都有助於提升效能，但用途不同。

各項參數的使用時機

如何導入 content-visibility: auto

選擇畫面外的內容

強制：請務必仔細找出哪些元素會收到 content-visibility: auto。

• 建議：指定位於初始摺疊線下方的大型獨立版面配置區塊 (例如無限動態消息中的資訊卡項目、結尾留言或底部較重的版面配置部分)。
• 請勿將這項屬性套用至初始不需捲動位置可視區域中的元素。這樣一來，瀏覽器在算繪前就必須評估可見度邊界，反而會延遲重要網頁的載入速度。
• 建議指定具有深層或複雜內部 DOM 結構的元素，盡可能節省算繪成本。

導入步驟

1. 必要：找出在初始載入時，確定不會顯示在畫面上的大型區塊。
2. 必要：將 content-visibility: auto 套用至每個螢幕外元素。
3. 必要：請在每個元素上使用 contain-intrinsic-size，提供預估的版面配置結構大小。

如何使用「contain-intrinsic-size」

強制：content-visibility: auto 必須與 contain-intrinsic-size 搭配使用。否則瀏覽器會強制將元素高度縮減為 0 像素，導致使用者捲動頁面時，版面配置嚴重位移，捲軸也會跳動。

contain-intrinsic-size CSS 簡寫屬性會做為預留位置維度。使用 auto 關鍵字，瀏覽器就能在元素最終算繪後「記住」確切大小，並在元素再次離開畫面時，使用計算出的大小，而非預留位置。

範例程式碼

/* DO ONLY apply this class to items OUTSIDE the initial layout viewport */
.heavy-section-deferred {
  /* MANDATORY: Skips rendering calculations when off-screen */
  content-visibility: auto;
  
  /* Mandatory: Provide an estimated size to prevent layouts shifts.
    - 'auto' is optional and enables the browser to remember the actual size
      once rendered. It must be paired with a <length> value to be used for
      the first render.
    - 'none' tells the browser not to apply any intrinsic width to this element.
      It can be used for either the height or the width value.
    - '150px' is the estimated height of this element. This can be any valid
      CSS <length> value.
   */
  contain-intrinsic-size: auto none auto 150px; 
}

如何導入 content-visibility: hidden

1. 找出載入時間較長的部分：找出初始狀態為隱藏的版面配置區塊 (例如大型資料表中的額外資料列)。
2. 套用 CSS：在元素中加入 content-visibility: hidden。
3. 顯示元素：如要顯示元素，請將 content-visibility 屬性變更為 visible 或 auto。

範例程式碼

.cached-view {
  /* Hides content but caches rendering state */
  content-visibility: hidden;
}

.cached-view.is-active {
  content-visibility: visible;
}

由於 content-visibility: hidden 會從無障礙樹狀結構和網頁內搜尋中排除元素及其子項，因此如果內容在隱藏時仍須可供搜尋，請不要使用。如要讓隱藏內容仍可透過原生「在網頁中尋找」功能搜尋，請按照「搜尋隱藏內容」一節所述使用 hidden="until-found"。

最佳做法

• 正確做法：搭配 content-visibility: auto 使用 contain-intrinsic-size。否則，系統會在捲動時重新計算高度，導致可視區域版面配置跳動或出現視覺錯誤。
• 請勿將 content-visibility: auto 套用至初始摺疊可視區域內的元素，否則會延遲重要網頁算繪。
• 強制無障礙功能驗證：套用 content-visibility: auto 時，必須驗證鍵盤是否能依序觸及。在某些輔助技術設定中，使用 content-visibility: auto 的螢幕外節點可能會從無障礙樹狀結構或依序導覽路徑中排除，直到焦點強制移至這些節點內。僅使用鍵盤測試線性導覽，確認能否跨越畫面邊界。

備用策略

content-visibility備用廣告

如果瀏覽器不支援 content-visibility，就會忽略該屬性。在大多數情況下，content-visibility: auto 不需要備用廣告，但如果沒有備用廣告，效能就會降低。不支援的瀏覽器會讓 content-visibility: hidden 元素完全可見。使用功能偵測功能實作備用方案。

/* Default for everyone */
.inactive {
  display: none;
}

/* Modern Browsers only */
@supports (content-visibility: hidden) {
 .inactive {
    display: block; /* Turn the layout box back on */
    content-visibility: hidden;
  }
}