採用標準化載入屬性的知識
我們的目標是要發文要求 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 使用者應該都能因這項功能而受益。如果該功能尚未支援這麼多瀏覽器，則該功能必須要確保該功能至少不會對這些瀏覽器造成不良影響。
與可視區域的距離門檻
延遲載入的常見疑慮是，原則上會增加圖片在使用者可視區域中顯示時，因載入週期於稍後階段開始而無法載入的可能性。與之前以 JavaScript 為基礎的解決方案不同，瀏覽器會以保守的做法，根據實際使用者體驗資料微調其做法，將影響降至最低，讓 CMS 平台應能安全地採用瀏覽器層級的延遲載入。
使用者體驗建議
元素必須提供維度屬性
為避免版面配置位移，我們長期建議您嵌入內容 (例如圖片或 iframe) 一律包含 width 和 height 尺寸屬性，以便瀏覽器在實際載入元素之前先推斷這些元素的顯示比例。無論元素是否延遲載入，都適用這項建議。不過，由於 0.1% 的圖片在可視區域未完整載入的機率較高，因此在設定延遲載入的情況下，會稍微適用一點。
CMS 最好為所有圖片和 iframe 提供尺寸屬性。如果這對每個這類元素都無法這樣做，則建議略過延遲載入圖片，因為該圖片不提供這兩種屬性。
避免延遲載入不需捲動位置的元素
目前，CMS 建議只將 loading="lazy" 屬性新增到位於需捲動位置的圖片和 iframe 中，以避免「最大內容繪製」指標發生延遲，在某些情況下，這可能會發生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 中為 HTML 元素新增 loading 屬性的方法有兩種：
- 在後端的內容編輯器中新增屬性，然後永久儲存在資料庫中。
- 透過前端資料庫轉譯內容時，即時新增屬性。
建議 CMS 在算繪時選擇即時新增屬性，同時為現有內容提供延遲載入的優點。如果這項屬性只能透過編輯器新增，那麼只有新內容或最近修改過的內容會獲得好處，大幅降低 CMS 對儲存網路資源的影響。此外，如果瀏覽器層級延遲載入的功能需要進一步擴充，可即時新增屬性，方便日後修改。
不過，在即時資訊中加入屬性應能為元素中可能現有的 loading 屬性提供響應，並讓這類屬性優先採用。如此一來，CMS 或擴充功能的 CMS 或擴充功能也可執行以編輯器為準的方法，而不會導致與重複的屬性發生衝突。
最佳化伺服器端效能
使用伺服器端中介軟體 (例如) 即時將 loading 屬性新增至內容時，系統會考慮速度。視 CMS 而定，您可以透過 DOM 週遊或規則運算式新增該屬性，並使用後者提高效能。
請盡量避免使用規則運算式，例如只會收集內容中的所有 img 和 iframe 標記 (包括其屬性) 的單一規則運算式，然後視情況將 loading 屬性新增至每個標記字串。例如，WordPress 與使用單一一般規則運算式執行各種即時作業對某些元素進行各種即時作業的關係，其中新增 loading="lazy" 只是一個，使用單一規則運算式來執行多項功能。這種最佳化形式還有另一個好處，就是我們建議您在 CMS 核心中採用延遲載入，而非擴充功能，因為這有助於改善伺服器端效能。
後續步驟
請查看現有的功能要求票證，以便在 CMS 中新增這項功能的支援單，如果尚未支援，請建立新的功能要求支援單。視需要使用本文的參考資料做為提案的佐證。
透過推文 (felixarntz@) 提出問題或留言。如果已新增瀏覽器層級延遲載入功能，也可以在此頁面列出您的 CMS。如果遇到其他挑戰，也希望進一步瞭解這些難題，希望能找出解決方案。
如果您是 CMS 平台開發人員，請詳閱其他 CMS 如何實作延遲載入功能：
您可以運用研究結果和本文提供的技術建議，開始將程式碼提供給 CMS，例如修補或提取要求等。
Colin Watts 透過 Unsplash 提供的主頁橫幅。