Breeze v1.2 發布：看看這次重大更新帶來的新功能

已發表: 2021-05-11

關注@Cloudways

Cloudways 發布了 Breeze v1.2，重點是提高您的 Core Web Vitals 兼容性，並最終為您的網站提供更好的 PageSpeed Insights 分數。

如果您還沒有聽說過，Google 將在本月推出新的頁面體驗更新。我們最近推出了免費的 Google 頁面體驗檢查器，可幫助您根據更新來衡量網站的性能和其他頁面體驗因素。事實上，自 2021 年初以來，我們一直專注於改進我們的產品並推出更新，以提供最佳的 Google 頁面體驗。

但是，在將 Breeze 更新到最新版本之前，強烈建議備份您的整個 WordPress 站點或在臨時環境中測試新版本。較新版本與其他插件的不兼容有時會導致問題和隨機錯誤，因此如果您準備好備份，您可以快速恢復您的 WordPress 網站。

Breeze v1.2 有哪些新功能？

現在，讓我們簡單看看 Breeze 在 1.2 版本中帶來了哪些令人興奮的新功能。

跨域安全鏈接

如果您熟悉 SEO 實踐，您就會明白“noopener noreferrer”屬性的重要性。這一次，Breeze 帶來了一個新功能，它會自動為具有“_blank”目標值的鏈接添加“noopener noreferrer”屬性。

注意：不要在 WordPress 編輯器中添加它們，因為編輯器會自動添加 noopener noreferrer； 在主題文件中添加鏈接。添加鏈接後，返回 wp-admin 並保存 Breeze 設置或清除緩存。

跨源安全鏈接

– Breeze 中的跨域安全鏈接

一些用例

_blank 目標值且沒有rel屬性，該特性會直接添加 rel=" noopener noreferrer "。
_blank，但rel屬性只包含noopener值，然後將添加noreferrer 。 例如，該鏈接僅包含noopener屬性： noreferrer 該功能還添加了 noreferrer 屬性： <a href =”https://example.com” target =”_blank” rel=”noopener noreferrer _blank，但rel包含noreferrer值，那麼noopener也會被添加。
_blank 目標值和rel 都包含noopener noreferrer ，不會有任何變化。
href 包含#link(ID)，它會被忽略，這意味著沒有變化。

輸入代碼：

- 在主題編輯器中輸入代碼

代碼的輸出：

– 代碼的輸出

字體在加載期間保持可見

訪問站點時會加載字體，並且在加載期間文本不可見。為了改善用戶體驗，您應該使用一種在字體下載（字體加載持續時間）時顯示文本內容（後備字體）的技術。 Breeze 現在有一個新功能可以幫助您做到這一點。

當您檢查 CSS minification 時，此功能將可見，並且僅適用於 CSS minification 和 CSS Group 選項。要將font-display:swap屬性附加到 CSS 類，我們需要修改內容。

– 微風中的縮小

要測試此功能，您可以檢查視圖頁面源中的 .css 文件並蒐索@font-face 。 將添加屬性font-display 。 如果該 font-face 定義已經有一個屬性 font-display，那麼什麼都不會改變。

– CSS 中的字體顯示
延遲加載圖像
延遲加載是一種速度優化技術，它只加載屏幕上可見的圖像，而不是一次加載整個頁面的圖像。這可以顯著改善加載時間和用戶體驗。
Breeze 的新版本在高級選項中提供了延遲加載圖像功能。 如果啟用此選項，圖像將被虛擬透明圖像替換為佔位符，並且當需要顯示時，將加載原始圖像。
– Breeze 中的延遲加載圖像
該代碼識別用於根據分辨率顯示正確圖像大小的數據大小和 data-srcset 屬性。以下屬性替換了原始屬性：
數據微風= src
數據-brsrcset=數據-srcset
數據-brsizes=數據-大小
如果要檢查延遲加載圖像是否有效，請按“CTRL + Shift + I” →網絡→選擇圖像→向下滾動整個頁面。

– 檢查瀏覽器中的延遲加載
預加載鏈接
預加載鏈接是我們添加到“高級選項”菜單中的另一項新功能，用於加快您的網站性能並提高頁面速度結果。 當您將鼠標懸停在鏈接上時，此功能將創建一個緩存，當您再次打開或訪問該鏈接時，頁面加載速度會更快。
在後端啟用該選項時，會在前端加載一個 JavaScript 文件，該文件不依賴於任何其他庫。
當用戶在鏈接上懸停超過 150 毫秒時，將為該鏈接啟用預取，並會創建頁面緩存。因此，當用戶單擊鏈接時，頁面就可以立即顯示內容。
– Breeze 中的預加載鏈接
此功能不會在懸停時緩存整個下一頁。相反，它會緩存請求以稍微提高站點速度。
注意：默認情況下，鏈接懸停延遲時間設置為 150 毫秒。 從不緩存這些URL 中包含的URL將從預加載加載中排除。

預加載您的 Web 字體
高級選項中提供了預加載您的 Web 字體功能，使用起來很簡單。 您需要做的就是提供僅加載 fonts的本地字體 URL 或 CSS 文件 (URL)。 很多時候，網絡字體會減慢您的網站速度並導致延遲，因此建議選擇更好的解決方案來幫助您解決此問題。
在此更新中，我們帶來了預加載您的 Web 字體功能，該功能將幫助您提高網站性能並消除預加載關鍵請求問題。
– 在 Breeze 中預加載您的 Web 字體
此功能將提前加載特定字體（在字段中添加）而不是最後加載字體，因此您可以體驗更好的網站性能和良好的 Web Vital 分數。
延遲 JS 內聯腳本
Delay JS Inline Scripts是高級選項中的一項新功能。 這旨在最終加載您的內聯 JS，因此您的用戶和站點速度測試員將看不到加載時間。

這背後的概念是延遲加載，當您與網站交互（向下滾動、移動光標等）時，您的內聯 js 腳本將出現在其中。這是提高站點性能和 Web Vital 分數的絕佳技術。
– 在 Breeze 中延遲 JS 內聯腳本
在這裡，您需要為您的內聯 js 腳本（如 Google Ads）提供關鍵關鍵字，它會在最後自動加載特定的腳本。
概括！
Cloudways 團隊日以繼夜地工作，使 Breeze 成為您的首選緩存插件。這是第一個提供六項令人興奮的新功能的主要版本，這些功能將幫助您提高頁面速度體驗和 Web Vital 分數。
當 Google 本月推出其頁面體驗更新時，希望您的網站已準備好利用新更新。
如果您對 Breeze v1.2 有任何問題或反饋，請在評論部分告訴我們。