WordPress 核心效能團隊發布了兩個插件,這些插件利用新技術加快網頁速度,這些新技術可在使用者點擊連結之前預先渲染 URL,並加快延遲載入圖片的速度。
WordPress 核心效能團隊
WordPress核心效能團隊負責與各WordPress核心開發團隊協調以提升效能,並致力於直接影響WordPress核心效能提升的專案。
表演團隊的初步計劃包括:
- 領導組建工作小組
- 協調初始管理任務(slack 通道、每週會議、安排工作小組代表的提名等)
- 為團隊制定使命宣言
- 協調要解決的領域
- 概述範圍和路線圖
WordPress 效能插件
WordPress 的一些效能改進首先在外掛程式中進行測試,然後再整合到 WordPress 的未來版本中。
下載插件的用戶可以成為世界上第一個使用並受益於網頁速度改進的用戶,並且(希望)希望使用這些插件的用戶也能提供他們的體驗反饋,無論是積極的還是消極的
效能團隊發布的第一個也是最受歡迎的插件是 Performance Lab 插件,它包括五個模組,可以根據使用者的需求開啟或關閉。
目前的性能實驗室插件模組是:
- 主色影像:
新增了對儲存新上傳圖像的主色並建立該顏色的佔位符背景的支援。 - WebP 支援健康檢查:
新增 WebP 支援檢查站點健康狀態。 - WebP 上傳:
如果伺服器支持,請為新上傳的 JPEG 影像建立 WebP 版本。 - 檢視排隊資產的狀態:
為網站健康狀態新增 CSS 和 JS 資源檢查。 - 檢查自動載入選項的狀態:
新增對網站健康狀態自動載入選項的檢查
兩個新的性能插件
今天宣布的兩個新插件是:
- 延遲載入影像的自動尺寸
- 投機規則
這兩個插件都以兩種不同的方式提高效能,這意味著兩者都可以用來獲得最大的改進。
新的自動調整大小 WordPress 插件
延遲載入是一種效能最佳化技術,可推遲(暫停)非關鍵影像的載入以縮短頁面載入時間。 首先載入渲染網頁可見部分所需的圖像,而不需要的圖像則推遲到用戶滾動並需要圖像時才加載。
該插件的作用是整合一個名為“size=”auto”的新延遲加載 HTML 屬性,該屬性將使用“srcset”延遲加載圖像的“size”屬性設置為“auto”,並加快圖像的下載速度當用戶向下捲動頁面時需要。
圖片的 size=”auto” 屬性是 HTML 中響應式圖片規範的一部分,但與延遲載入沒有特定關係。 相反,sizes 屬性與 srcset 一起使用,為瀏覽器提供以不同視窗大小顯示圖像所需的圖像大小尺寸。 然後瀏覽器可以從 srcset 中選擇最合適的圖像來源。
新的 WordPress 推測規則插件
推測規則插件利用推測規則 API 從使用者可能要求的網頁下載資源。 推測規則插件基本上預測將請求頁面並在用戶單擊連結之前開始渲染網頁。
官方插件說明解釋:
“預設情況下,使用推測規則 API 在懸停時預先渲染連結的 URL。”
推測規則 API 是一項旨在透過允許網頁向瀏覽器提供有關使用者可能點擊以導航到不同網頁的潛在連結的提示來提高 Web 瀏覽效能的功能。 然後,瀏覽器可以根據網站訪客點擊連結導航到新網頁的可能性來取得或預先呈現資源。
Mozilla 的推測規則 API 開發者頁面解釋:
「推測規則 API 旨在提高未來瀏覽的效能。它的目標是文件 URL,而不是特定的資源文件,因此它對於單頁應用程式 (SPA) 網站中的多頁應用程式 (MPA) 很有意義。
推測規則 API 提供了該函數的替代方案 廣泛使用並旨在取代該功能 僅在 Chrome 中已棄用。 它對這些技術進行了許多改進,並提供了更具表現力和可配置的語法,用於指定應檢索或預先渲染哪些文件。”
插件實作需要使用至少 Chrome 121。使用者在使用不支援推測規則 API 的其他瀏覽器造訪網站時不會受到任何影響,網頁將以正常方式顯示。
根據插件文檔:
「預設情況下,該外掛程式配置為當使用者將滑鼠懸停在相關連結上時在 WordPress 介面中預先渲染 URL。這可以使用下面的「推測規則」部分進行自訂 設定 > 閱讀。
篩選器可用於排除某些 URL 路徑,使其不符合預取和預先渲染的條件(請參閱常見問題解答部分)。 或者,您可以將“no-prerender”CSS 類別新增至任何連結(
<a>
標籤)不應提前提交」。
了解有關新 WordPress 效能外掛程式的更多資訊並在此處下載:
WordPress 延遲載入圖片自動調整大小插件
WordPress 推測規則插件
精選圖片由 Shutterstock/Haali 提供