如今，速度就是一切。瀏覽器會嘗試快取網頁上的內容以加快載入速度。有很多方法可以通知瀏覽器快取什麼、何時快取以及快取內容保留多長時間。
預載入就是這樣一種快取功能，有助於提高WordPress網站的頁面載入速度。但是，這可能會在Google PageSpeed Insights工具中使用的Google Lighthouse報告中產生錯誤。
在本文中，讓我們解釋如何解決PageSpeed Insights中由於字型導致的預載入關鍵詞請求問題。
如何使用預載入？
預載入，顧名思義，就是在頁面開始載入時，通知瀏覽器立即開始快取網頁上的資源。這將有助於快取稍後需要的CSS、指令碼和字型。您可以在這篇Google開發人員文章中瞭解有關預載入的更多資訊。
基本上，preload是HTML連結標籤中rel屬性的值。以下是在您的網站上使用預載入請求的語法：
<link href="font.woff" as="style">
對於網站上載入的每個CSS、指令碼和字型檔案，您需要在HTML的head標籤之間插入此連結標籤。
預載入的Google PageSpeed問題
雖然預載入會加快載入時間，但應該正確使用。使用PageSpeed Insights工具檢查您的網站，看看是否有任何機會因預載入請求而可用。下面是一個示例，顯示由於預載入關鍵請求，您可以節省7.05秒。
單擊向下箭頭時，您將看到導致延遲的所有相關內容。在這種情況下，都是網頁上載入的字型。
PageSpeed Insights中的預載入關鍵詞請求錯誤
WordPress外掛和預載入
現在，您可能會對WordPress網站的Google PageSpeed報告中顯示的預載入方式感到困惑。您會收到此錯誤的原因有很多：
- 通過在CSS中匯入的主題和外掛載入字型。
- 您正在使用像WP Rocket這樣的快取外掛來預載入頁面但不預載入字型。
- 您正在使用帶有Google AdSense等廣告的第三方字型或使用外掛在您的網站上載入字型很棒的圖示。
快取外掛將預載入請求鍵新增到所有資源。但是，使用@font-face在CSS中匯入的字型不會使用預載入鍵請求。PageSpeed顯示的錯誤可能是由於站點載入的字型未使用預載入鍵所導致。
如何修復由於字型導致預載入關鍵請求問題？
您可以通過在PageSpeed中顯示的那些資源的站點標題上手動新增預載入鍵來消除錯誤。但是，也有一些外掛可以自動在您的標題上插入元標記。我們將解釋手動和外掛方法。
使用WP Rocket修復Google PSI中的預載入關鍵詞請求
首先，我們將使用WP Rocket外掛進行說明，因為它很簡單，您不需要修改PHP檔案。
使用WP Rocket包括字型預載入
WP Rocket是一款高階快取外掛，可讓您預載入字型。如果您使用的是WP Rocket，請轉到“設定 > WP Rocket > Preload”部分。將字型資源的相對URL貼上到“Preload fonts”文字框下並儲存更改。這將幫助您擺脫Google PageSpeed Insights工具中的預載入請求問題。請記住，相對URL的格式應為“/wp-content/themes/your-theme-name/font-file-name”（主題字型）和“/wp-content/plugins/plugin-name/font-file-name”（用於外掛載入的字型）。
在WP Rocket外掛中預載入字型
WP Rocket優化了許多其他功能，例如關鍵CSS生成、DNS預取和在本地託管Google Analytics等第三方指令碼。因此，使用WP Rocket之類的外掛來提高WordPress網站的整體速度是一個好主意。WP Rocket外掛還提供了生成關鍵路徑CSS或移除未使用的CSS的選項。
手動新增預載入元標記
按照以下步驟在主題的header.php檔案中手動插入元標記。我們建議使用子主題，以便在更新父主題時更改將保持不變。
準備連結元標記
第一步是獲取Google PageSpeed中顯示的資源的所有URL。通常，您會看到URL的結尾部分，將滑鼠懸停在連結上以檢視阻塞資源的完整URL。現在，您可以複製URL並貼上到文字編輯器中。
您需要使用以下格式的URL來包含在連結標籤中：
<link rel="preload" href="Font URL Showing in PageSpeed" as="font" crossorigin="anonymous">
為您的主題和外掛使用的每個字型資源準備連結標籤。
在標題中插入連結標籤
下一步是複製所有帶有預載入請求的連結標籤，並貼上到網站的標題部分。在您的WordPress網站上，您需要將連結標籤貼上到活動主題的header.php檔案中。您可以使用託管帳戶中的檔案管理器應用程式或使用FTP編輯header.php檔案並在標題中插入程式碼。
- 使用FileZilla等FTP客戶端登入您的託管帳戶，或在您的託管帳戶中找到檔案管理器應用程式。
- 導航到“/wp-content/themes/yourtheme”資料夾並找到header.php檔案。
編輯header檔案
- 編輯檔案並在標題部分插入預載入程式碼。
- 它將如下所示，記住插入您在Google PageSpeed Insights工具中看到的所有請求。
在header檔案中新增預載入引數
或者，您也可以在管理儀表盤中轉到“外觀 > 主題編輯器”並編輯檔案。我們建議使用子主題並修改header.php檔案。如果修改父主題檔案，每次更新主題時都需要手動插入這段程式碼。或者，您可以使用插入頁首和頁尾外掛等外掛將連結標籤新增到您網站的頁首，而無需編輯主題檔案。
再次檢查PageSpeed
手動插入連結標籤或使用WP Rocket後，請確保清除您網站上的快取。回來檢視PageSpeed Insights，現在您不會看到預載入關鍵請求錯誤。
沒有預載入問題
您可以單擊“Passed audits”部分並檢查“Preload key requests”問題是否處於通過狀態。
結論
通常，Google PageSpeed Insights會顯示預載入錯誤，導致頁面載入延遲數秒。您可以按照上述步驟手動或使用外掛插入預載入連結。這將幫助您從Google PageSpeed中消除錯誤並提高速度得分。
評論留言