如何在WordPress中修復帶有字體的預載入鍵請求?

如今,速度就是一切。瀏覽器將嘗試在網頁上緩存內容,以加快載入速度。有很多方法可以告知瀏覽器要緩存的內容,何時緩存以及將緩存的內容保留多長時間。預載入是一種這樣的緩存功能,有助於提高WordPress網站的頁面載入速度。但是,這可能會在Google PageSpeed Insights工具中使用的Google Lighthouse報告中創建錯誤。在本文中,讓我們解釋如何解決由於字體導致的PageSpeed Insights中的預載入密鑰請求問題。

如何使用預緊力?

顧名思義,預載入通知瀏覽器在頁面開始載入時立即開始在網頁上緩存資源。這將有助於緩存稍後需要的CSS,腳本和字體。您可以在此Google開發者文章中了解有關預載入的更多信息。

基本上,預載入是HTML鏈接標記中rel屬性的值。這是在您的站點上使用預載入請求的語法:

<link rel =「 preload」 href =「 font.woff」 as =「 style」>

對於站點上載入的每個CSS,腳本和字體文件,您都需要在HTML的head標籤之間插入此鏈接標籤。

Google PageSpeed與預載入有關的問題

儘管預載入會加快載入時間,但應正確使用它。使用PageSpeed Insights工具檢查您的網站,以查看是否由於預載入請求而提供了任何機會。下面是一個示例案例,該案例顯示由於預載入密鑰請求,您可以節省7.05秒。

當您單擊向下箭頭時,您將看到導致延遲的所有相關內容。在這種情況下,所有字體都是載入在網頁上的。

PageSpeed Insights中的預載入密鑰請求錯誤
PageSpeed Insights中的預載入密鑰請求錯誤

WordPress插件和預載入

現在,您可能會感到困惑,預載入如何顯示在WordPress網站的Google PageSpeed報告中。有很多原因會導致您收到此錯誤:

  • 通過導入CSS,主題和插件載入字體。
  • 您正在使用WP Rocket之類的緩存插件來預載入頁面。
  • 您正在使用插件在網頁上使用Google AdSense之類的廣告。

緩存插件將預載入請求密鑰添加到所有資源。但是,使用@ font-face在CSS中導入的字體將不使用預載入鍵請求。這是錯誤,PageSpeed顯示從站點載入的字體未使用預載入鍵。

如何修復帶有字體的預載入鍵請求?

您可以通過在頁面標題上手動為頁面速度中顯示的資源添加預載入鍵來消除錯誤。

準備鏈接元標記

第一步是獲取Google PageSpeed中顯示的資源的所有URL。通常,您將看到URL的末尾部分,將滑鼠懸停在鏈接上以查看阻止資源的完整URL。現在,您可以複製URL並粘貼到文本編輯器中。

您需要使用以下格式的URL來將其包含在鏈接標記中:

<link rel =「 preload」 href =「在PageSpeed中顯示的字體URL」為=「 font」 crossorigin =「 anonymous」>

為主題和插件使用的每種字體資源準備鏈接標籤。

在標題中插入鏈接標籤

下一步是複製所有帶有預載入請求的鏈接標記,並將其粘貼到網站的標題部分。在您的WordPress網站上,您需要將鏈接標籤粘貼到活動主題的header.php文件中。您可以從託管帳戶使用文件管理器應用程序,也可以使用FTP編輯header.php文件並在標題中插入代碼。

  • 使用FTP客戶端(如FileZilla)登錄到您的託管帳戶,或在託管帳戶中找到「文件管理器」應用。
  • 導航到「 / wp-content / themes / yourtheme」文件夾,然後找到header.php文件。
編輯頭文件
編輯頭文件
  • 編輯文件,並將預載入代碼插入標題部分。
  • 外觀如下圖,請記住插入您在Google PageSpeed Insights工具中看到的所有請求。
在頭文件中添加預載入參數
在頭文件中添加預載入參數

或者,您也可以轉到管理控制台中的「外觀>主題編輯器」,然後編輯文件。我們建議使用子主題並修改header.php文件。如果您修改父主題文件,則每次更新主題時都需要手動插入此代碼。

再次檢查PageSpeed

插入鏈接標記後,請確保清除站點上的緩存。再次檢查PageSpeed Insights,現在您將不會看到預載入密鑰請求錯誤。

沒有預載入問題
沒有預載入問題

您可以單擊「通過的審核」部分,並檢查「預載入關鍵請求」問題處於通過狀態。

WP Rocket更新,包括字體預載入

WP Rocket最近更新了該插件,以包括字體的預載入。如果您使用的是WP Rocket,請轉到「設置> WP火箭>預載入」部分。將字體資源的相對URL粘貼在「預載入字體」文本框中,然後保存更改。這將幫助您擺脫Google PageSpeed Insights工具中的預載入請求問題。

WP Rocket插件中的預載入字體
WP Rocket插件中的預載入字體

WP Rocket目前為萬聖節大減價提供20%的折扣。您可以抓住這筆交易來加快WordPress網站的速度。

結論

通常,Google PageSpeed Insights會顯示預載入錯誤,從而導致頁面載入延遲幾秒鐘。您可以按照上述步驟手動或使用插件插入預載入鏈接。這將幫助您從Google PageSpeed中刪除錯誤並提高速度得分。

相關文章