如何修復 PageSpeed 中的“確保文本在 webfont 加載期間保持可見”錯誤

您是否在檢查 Google 的頁面速度洞察力時收到“確保文本在 Webfont 加載期間保持可見”錯誤並且不知道如何解決此問題？ 一般來說，我知道如何在基於 PHP 或 HTML 的自定義網站上解決這個問題，但是當談到 WordPress 時，我也遇到了困難。

因此，在本指南中，我們將討論如何在 WordPress 中解決此問題（我還將分享在基於 PHP 和 HTML 的自定義站點中解決此問題的步驟）並通過消除此錯誤來提高頁面速度得分。

為什麼它在 PageSpeed 中顯示“確保文本在 Webfont 加載期間保持可見”錯誤

在 Google 的 PageSpeed Insight 上測試您的網站時，您可能已經看到“確保在 Webfont 加載期間文本保持可見”錯誤的問題，點擊該錯誤後，它將顯示字體文件的完整 URL。

正如您在上圖中看到的，我還在此網站上收到“確保文本在 Webfont 加載期間保持可見”錯誤，當我單擊它時，它將顯示 Google 字體文件的完整 URL。

為什麼會顯示錯誤？

當網站在瀏覽器中加載並檢測到任何應用於文本的自定義字體文件時，它會等到字體下載完畢，直到那時，文本才可見。 自定義字體文件下載後，會立即應用到網站上，這就是所謂的隱形文字閃現。

如何修復不可見文本的 Flash？

修復不可見文本的閃爍還可以修復您網站上的“確保文本在 Webfont 加載期間保持可見”錯誤，並且修復此問題非常容易。

您可以通過添加輕鬆解決此問題

字體顯示：交換；

您當前的代碼

@字體臉{

}

CSS 屬性。

但是@font-face 是什麼？

@font-face 是一個簡單的 CSS 規則，您可以通過它將自定義字體應用於文本。 它具有 woff2、woff、ttf 等擴展名。例如，@font-face 代碼如下所示：

 @字體臉{

字體系列：Roboto，無襯線；

字體顯示：交換； // ---> 它將解決這個問題。

字體樣式：正常；

字體粗細：400；

src：網址（Roboto.woff2）；

}

現在我們在段落中應用這個字體；

 p {

字體系列：Roboto，無襯線；

字體大小：18px；

}

當網站加載時，它表明段落標籤應用了“ Roboto ”字體，它會立即開始下載段落標籤中使用的字體。 在它下載字體之前，文本保持不可見。

這就是為什麼它在 pagespeed 中顯示“確保文本在 webfont 加載期間保持可見”錯誤並添加font-display: swap; 在你當前的@font-face CSS 中可以解決這個問題。

如何在 WordPress 中解決此問題

如果您使用的是 WordPress，並且它在頁面速度洞察力中顯示此錯誤，那麼您可以使用簡單的步驟輕鬆解決此問題。 我已經分享了在本地字體和 Google 字體上解決此錯誤的步驟。

谷歌字體解決方案

最初，Google Fonts 不會添加font-display: swap; 規則到他們的字體，但現在他們支持一個新的查詢參數來應用字體顯示：交換； 通過在 google 字體文件的末尾添加&display=swap參數。

這是它的外觀；

如果您是主題開發人員或者您知道如何在 WordPress 中編輯主題文件，那麼您可以輕鬆地將&display=swap參數添加到您的 Google 字體文件中。

但是如果您不習慣編輯 WordPress 主題文件，您仍然可以使用Asset CleanUp等各種插件來添加此參數並解決“確保在 Webfont 加載期間文本保持可見”的問題。

如何使用“資產清理”插件解決此問題

要在您的 Google 字體文件中應用display=swap參數，您必須從免費提供的 WordPress 庫下載並安裝 Asset CleanUp 插件。

下載並激活插件後，單擊 WordPress 管理面板中的“資產清理”選項 > 然後單擊“資產清理”下的“設置”以打開優化頁面。

進入設置頁面後，單擊“ Google 字體”選項。 當您單擊Google 字體選項時，它將進一步打開設置，您可以從中輕鬆管理各種設置以優化 google 字體文件。

其中一些設置可以包括：

一旦你在谷歌字體文件設置中，在“應用字體顯示：CSS屬性值”設置並將其從“不應用（默認） ”更改為“交換（最常用） ”，它將添加 &display=交換參數到你所有的谷歌字體文件。

主題和插件字體解決方案

大多數情況下，您的 WordPress 主題或插件會加載其他字體，例如 font-awesome 或 icon 字體，並且在 Google PageSpeed Insight 中也會顯示相同的問題。

這也是一個簡單的解決方法，但它需要一點 WordPress 編輯知識。 如果您不習慣編輯代碼，您還可以使用高級版“ Asset CleanUp Pro ”插件自動添加font-display: swap; WordPress 主題或插件樣式表中的 CSS 屬性。

要使用 Asset CleanUp Pro 解決此問題，請單擊 WordPress 管理面板中的“ Asset CleanUp ”選項>，然後單擊“Asset Cleanup”下的“設置”以打開優化頁面。

進入“資產清理”>“設置”頁面後，單擊“本地字體”選項以打開本地字體的自定義設置。

在瀏覽器中打開“本地字體”自定義設置後，從“應用字體顯示：CSS 屬性值”下的給定選擇選項中選擇“交換（最常用） ”以自動添加字體顯示：交換； 在您的所有樣式表中。

包起來

在本指南中，我們已盡力解釋如何解決 pagespeed insight 上的“確保文本在 webfont 加載期間保持可見”或“不可見文本閃爍”問題。

頁面加載時間和頁面速度是提供良好用戶體驗的重要因素，解決此問題可以提供更好的用戶體驗。 除非頁面上顯示了所有內容，否則不應將其視為已加載頁面。

因此，您必須減少頁面上的內容加載時間，以使頁面不會超時，並且用戶可以獲得他們想要的平衡、速度和穩定性。 如果您還遭受網站速度緩慢的困擾，那麼您可以查看我們關於網站速度優化的帖子以正確優化它。