瞭解如何採用標準化載入屬性
本文章的目標是說 CMS 平台開發人員和貢獻者 (即 CMS 核心開發者)，現在是支援瀏覽器層級圖片延遲載入功能的大好時機。我也會分享建議，協助您瞭解如何在導入延遲載入時確保優質的使用者體驗，並啟用其他開發人員自訂功能。這些指南來自我們新增對 WordPress 的支援經驗，並協助 Joomla、Drupal 和 TYPO3 實作這項功能。
無論您是 CMS 平台開發人員或 CMS 使用者 (也就是透過 CMS 建構網站的人員)，都能參考這篇文章，進一步瞭解 CMS 中瀏覽器層級延遲載入的優點。請參閱「後續步驟」一節中的建議，瞭解如何建議 CMS 平台實作延遲載入。
背景
過去一年來，使用 loading 屬性的延遲載入圖片和 iframe 已成為 WHATWG HTML 標準的一部分，且各種瀏覽器的採用率越來越高。不過，這些里程碑只是為更快且節省資源的網路奠定基礎。這項功能現在已在分散式網路生態系統中，才能使用 loading 屬性。
內容管理系統約有 60% 的網站提供，因此這些平台在將新型瀏覽器功能導入網路時扮演了舉足輕重的角色。針對 WordPress、Joomla 和 TYPO3 等熱門的開放原始碼 CMS，已經針對圖片實作 loading 屬性的支援，我們來看看這些 CMS 的方法，以及在其他 CMS 平台上採用此功能的相關要點。延遲載入媒體是網站需要大規模改善的關鍵網站效能功能，因此我們建議在 CMS 核心層級採用這項功能。
立即實作延遲載入的情況
標準化
在 CMS 中採用非標準化瀏覽器功能可促進大規模的測試，並指出有待改善之處。然而，使用 CMS 的普遍共識是，只要瀏覽器功能並未標準化，建議以個別平台的擴充功能或外掛程式形式實作。只有經過標準化處理的功能才能在平台核心中採用。
瀏覽器支援
瀏覽器支援這項功能也有類似的疑慮：大多數的 CMS 使用者應該都能受惠於這項功能。如果有相當比例的瀏覽器尚未支援這項功能，這項功能至少要確保對這類瀏覽器沒有負面影響。
與可視區域距離的門檻
延遲載入實作有個常見疑慮，那就是圖片在使用者可視區域中顯示後，由於載入週期是從稍後的階段開始，因此不會載入。與先前的 JavaScript 解決方案不同，瀏覽器會以較保守的方式採取這種做法，並根據實際使用者體驗資料微調做法，盡可能降低相關影響，因此 CMS 平台應適合採用瀏覽器層級的延遲載入功能。
使用者體驗建議
元素須有尺寸屬性
為避免發生版面配置位移，這是長期建議，圖片或 iframe 等內嵌內容應一律包含尺寸屬性 width 和 height，這樣瀏覽器就能在實際載入元素前，先推斷這些元素的長寬比。無論元素是否延遲載入，都適用這項建議。不過，由於圖片未在可視區域中完整載入一次的可能性提高 0.1%，因此在採用延遲載入的情況下，會稍微更適用。
CMS 最好為所有圖片和 iframe 提供尺寸屬性。 如果這類元素無法達到此效果，建議略過未提供這兩個屬性的延遲載入圖片。
避免在不需捲動位置的元素延遲載入
目前，建議 CMS 只為位於需捲動位置的圖片和 iframe 加入 loading="lazy" 屬性，以免延遲「Largest Contentful Paint」指標出現延遲，但在某些情況下，可說是 2021 年 7 月的發現。不過，必須瞭解，在轉譯程序前評估元素相對於可視區域的位置並不容易。如果 CMS 使用自動化方法新增 loading 屬性，但即使基於手動介入處理多項因素 (例如不同的可視區域大小和顯示比例)，此做法就特別實用。不過，我們強烈建議您省略主要圖片以及其他可能會延遲載入的主頁橫幅或 iframe。
避免使用 JavaScript 備用功能
雖然 JavaScript 可用於為不支援 loading 屬性的瀏覽器提供延遲載入，但這類機制一律會仰賴最初移除圖片或 iframe 的 src 屬性，造成瀏覽器「確實」支援該屬性時出現延遲。此外，在大型 CMS 前端推出這類以 JavaScript 為基礎的解決方案，可能會增加潛在問題的途徑範圍，這也是為什麼主要 CMS 在標準化瀏覽器功能前，並未在核心中採用延遲載入。
技術建議
預設啟用延遲載入功能
對於導入瀏覽器層級延遲載入的 CMS，整體建議是預設為啟用，也就是將 loading="lazy" 新增至圖片和 iframe，最好只用於含有尺寸屬性的元素。與必須手動啟用 (例如個別映像檔) 啟用這項功能時，預設啟用這項功能會讓您省下更多網路資源。
請盡可能讓 loading="lazy" 只加入可能出現在需捲動位置的元素。
雖然由於缺少用戶端感知機制和各種可視區域大小，因此這個 CMS 的實作要求可能相當複雜，但建議您至少使用初步經驗法則，略過不需捲動位置可能無法順利載入的主頁橫幅這類元素。
允許個別元素修改
雖然根據預設應將 loading="lazy" 加入圖片和 iframe，但在特定圖片中省略相關屬性十分重要，例如針對 LCP 進行最佳化。如果 CMS 的目標對像一般認為較熟悉技術，您可以為每個圖片和 iframe 公開 UI 控制項，這樣可以為該元素停用延遲載入功能。此外，也可以向第三方開發人員公開 API，讓他們能夠透過程式碼進行類似的變更。
舉例來說，WordPress 可針對整個 HTML 標記或結構定義，或是內容中的特定 HTML 元素略過 loading 屬性。
翻新現有內容
總而言之，在 CMS 中將 loading 屬性新增至 HTML 元素的方法有以下兩種：
- 從後端的內容編輯器新增屬性，將屬性永久儲存至資料庫中。
- 在前端從資料庫轉譯內容時，即時新增屬性。
我們建議 CMS 在算繪時立即選擇新增屬性，這樣也能為任何現有內容帶來延遲載入的優點。如果只能透過編輯器新增屬性，那麼只有新增或最近修改的內容片段才能帶來好處，大幅降低 CMS 對節省網路資源的影響。此外，只要即時新增屬性，日後如果再進一步展開瀏覽器層級延遲載入的功能，就能輕鬆修改。
不過，即時新增屬性應能迎合元素上現有的 loading 屬性，並優先採用這類屬性。這樣一來，它的 CMS 或擴充功能也能執行編輯器導向的方法，而不會與重複屬性發生衝突。
最佳化伺服器端效能
使用伺服器端中介軟體即時將 loading 屬性新增至內容時，系統會考量速度。視 CMS 而定，您可以透過 DOM 週遊或規則運算式來新增屬性，後者則建議使用，以提升效能。
使用規則運算式時，請至少保留幾次，例如透過單一規則運算式來收集包含其屬性等內容中的所有 img 和 iframe 標記，然後在適用情況下，為每個標記字串新增 loading 屬性。例如 WordPress 就足以設定單一一般規則運算式，對特定元素進行各種即時作業，而加入 loading="lazy" 僅是加入一個元素，可使用單一規則運算式來協助啟用多項功能。這種最佳化方式的說法更進一步，就是建議在 CMS 核心中採用延遲載入，而非使用擴充功能，因為這樣可以改善伺服器端效能最佳化。
後續步驟
查看是否已有功能要求支援單，可供 CMS 中的功能新增支援。如果還沒有支援單，請提出新的要求。請視需要參考這篇文章的參考資料來支持您的提案。
如有任何問題或意見，請透過 Twitter 推文 (felixarntz@) 提問；如果已新增支援瀏覽器層級延遲載入功能，則可在本頁面列出您的 CMS。如果您遇到其他難題 我也想深入瞭解這些挑戰，希望能找出解決方案
如果您是 CMS 平台開發人員，請研究其他 CMS 如何實作延遲載入：
您可以運用從研究中學到的知識和本文所述的技術建議，開始為 CMS 提供程式碼，例如透過修補或提取要求形式提供程式碼。
主頁橫幅由 Colin Watts 提供，來源為 Unsplash。