這個外掛使用瀏覽器原生功能延遲載入網頁中的媒體內容。進一步了解全新 loading 屬性,或查看 WordPress core ticket 所討論的 WordPress 核心程式類似的實作項目。
如果使用者的瀏覽器不支援 loading 屬性,外掛會以基於 IntersectionObserver API 的 JavaScript 解決方案進行後援。對於停用 JavaScript 功能但支援 loading 屬性的瀏覽器案例,不須進行任何變更,便會加入包含 loading 屬性的對應元素 noscript 變數。
原生功能,就是快
如果你在尋找解決方案,應該會發現效能對網站的使用者體驗及成功有多麼關鍵,也了解延遲載入對增進效能是個關鍵功能。但是延遲載入這個解決方案本身目前仍會造成負擔,因為它依賴載入、剖析及執行自訂 JavaScript 運作邏輯,這對效能或多或少會產生影響。
這個外掛在最大程度上解決了這種模式。它依賴全新的 loading 屬性,這使得延遲載入成為瀏覽器的原生功能。Chrome 已開始支援這個屬性,其他瀏覽器也會逐漸開始支援。當解決方案為「原生功能」時,代表它不會依賴自訂的 JavaScript 運作邏輯,進而輕量化,而「輕量化」就代表著「更快的速度」。
最後,隨著更多的瀏覽器支援 loading 屬性,這個外掛所能增進的效益會越來越明顯。
使用方式
僅需啟用外掛,便會讓瀏覽器在瀏覽網站時,延遲載入全部頁面的圖片及 iFrame。
引用資訊
這個外掛的部分運作邏輯來自 WP Rig 專案,並參考 web.dev 及 developers.google.com 的建議。
