如何在 WordPress 中預加載密鑰請求

已發表: 2023-06-08

使用網絡字體、CSS 和 JavaScript 可以使您的網站更加獨特和互動。 但是等待這些文件類型加載可能會讓您網站的訪問者感到沮喪。

這是在 WordPress 中預加載密鑰請求可以派上用場的地方。 通過告訴瀏覽器在請求鏈中更早地下載這些文件類型，當瀏覽器準備好呈現內容時，它們就在手邊。 反過來，這可以加快您感知的頁面加載時間並提供更好的整體網絡體驗。

在今天的指南中，我們將討論預加載密鑰請求的含義，以及您網站的潛在性能優勢。 然後，我們將解釋如何使用 Google 字體、Font Awesome、CSS 和 JavaScript 在您的 WordPress 網站上執行此操作。

WordPress 中的“預加載密鑰請求”是什麼意思？

當有人訪問您的網站時，他們的瀏覽器會向您網站的服務器發送多個 HTTP 請求，請求它提供構成您的內容的文件。 服務器將需要一定的時間來開始響應這些請求並向瀏覽器發送信息，這稱為首字節時間 (TTFB)。

接下來，瀏覽器將開始從您的站點文件下載內容（PHP、JavaScript 和 CSS）並將其渲染以在前端顯示可視頁面 (HTML)。 完成此過程後，訪問者可以看到您的完全加載的網頁。

瀏覽器將使用“請求鏈”按順序請求和呈現內容。 這意味著在較大的請求中有多個較小的請求步驟，最終結果是訪問者可以查看您網站上的內容。

本質上，“預加載”意味著告訴用戶的瀏覽器先下載必要的文件，而不是等到加載過程結束。 這些通常是字體（特別是網絡字體）、CSS、JavaScript，有時還有圖像。

關鍵請求是唯一的，因為您的瀏覽器通常在加載過程的後期才會請求這些文件。 因此，當瀏覽器到達那個點並發現它必須請求文件時會有延遲。 通過告訴瀏覽器首先加載這些文件，它會在需要渲染它們時讓它們派上用場。

預加載密鑰請求有什麼好處？

預加載關鍵請求的主要好處是提高您網站的感知性能。 這意味著用戶的瀏覽器可以更快地呈現您的內容，訪問者會覺得您的網站速度更快。 但是，您的網站實際上只是預加載了必要的內容，以使其看起來像那樣。

此外，預加載請求對於您的 Core Web Vitals 分數至關重要。 這些 Google 指標衡量您網站的加載性能、交互性和視覺穩定性，為您提供一個分數，表示您網站的整體用戶友好性。

這些是三個核心網絡生命力：

  • Largest Contentful Paint (LCP)：加載頁面上最大的元素需要多長時間。
  • 首次輸入延遲 (FID)：瀏覽器響應用戶與您的內容的交互所需的時間。
  • Cumulative Layout Shift (CLS) ：頁面加載時元素四處移動的程度。

特別是，預加載密鑰請求會對您的 LCP 分數產生重大影響。 通過預加載圖像、字體和其他大文件，您將能夠減少渲染它們所需的時間。

此外，預加載會影響您的 First Contentful Paint (FCP) 分數。 該指標衡量頁面上第一個 HTML 元素顯示所需的時間。 如果您可以預加載該元素，瀏覽器將能夠更快地顯示內容的初始部分。

更重要的是，像谷歌這樣的搜索引擎更喜歡快速加載和互動的內容。 因此，除了提供更好的用戶體驗外，改進這些性能指標還可以促進您網站的搜索引擎優化 (SEO)。

從本質上講，性能改進可以幫助提高網站頁面的排名，並讓更多用戶看到您的內容。 另外，預加載密鑰請求相對容易。 在這篇文章的後面，我們將向您展示具體操作方法！

預加載密鑰請求有缺點嗎？

從性能的角度來看，預加載請求聽起來是個好主意。 也就是說，嘗試預加載太多元素可能會對您不利。

瀏覽器一次只能處理這麼多請求。 因此，如果您告訴它預加載多個元素，它可能會產生一個“瓶頸”，影響您網站的頁面加載時間。

因此，值得仔細選擇應該預加載哪些元素以獲得最大的影響。 在大多數情況下，這些將是網絡字體、CSS 和 JavaScript，因為它們往往是最重的文件。

如何檢查您的站點是否正在預加載密鑰請求

有幾種不同的工具可以識別您的網站是否正在預加載請求，並建議可以從這種優化技術中受益的元素。 例如，PageSpeed Insights 是識別網站性能問題的最受歡迎的選項之一。

要使用這個免費工具，只需輸入您網站的 URL 並點擊Analyze 。 這將生成詳細的性能報告。

來自 Google PageSpeed 的核心網絡生命力報告

向下滾動以查看性能機會、診斷和通過的審核。 您應該能夠在這些部分之一中找到預加載密鑰請求建議。

來自 Google PageSpeed 的改進建議

如果您不想在您的網站和 PageSpeed Insights 之間來回導航，請考慮安裝 Google Lighthouse Chrome 擴展程序。 它使您能夠從瀏覽器中生成報告並查看頁面的性能指標。

來自 Google Lighthouse 的性能建議

同樣，GTMetrix 可以為任何站點生成詳細的性能報告。 它使您可以分析來自多個位置的頁面並跟踪它們隨時間的性能。

在 GTMetrix 的Structure選項卡下，您將能夠看到預加載密鑰請求是否有助於您網站的性能。

GTMetrix 的性能指標

如何在 WordPress 中預加載關鍵請求

在對您的 WordPress 網站進行任何重大更改（例如添加自定義代碼）之前，進行完整備份始終是值得的。 這種安全預防措施意味著如果您犯了任何錯誤，您手頭將擁有一個功能版本的網站。

這就是 Jetpack VaultPress Backup 派上用場的地方。 這個用戶友好的插件會自動創建所有數據的全面備份，包括其文件、數據庫表和 WooCommerce 產品信息。 這些備份實時保存並安全地存儲在雲端。 只需單擊幾下即可恢復它們 - 即使您在旅途中或根本無法訪問您的網站。

Jetpack VaultPress 備份主頁設計

1.字體

有時，字體會隱藏在您網站上的其他文件中，包括 CSS 和 JavaScript 文件。 不幸的是，這會減慢頁面呈現過程。

要在 WordPress 中預加載帶有字體的請求，請將此代碼複製並粘貼到頁面的 <head> 部分：

 <head> <!-- ... --> <link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin> </head>

請記住用“字體名稱”代替您的字體名稱。 此外，如果您的字體來自第三方來源，則包含“crossorigin”是必不可少的，因為它告訴瀏覽器它需要從外部服務器加載文件。

2.谷歌字體

Google Fonts 包括一個包含近 1500 個字體系列的開源庫。 如果您正在尋找要在您的網站上使用的自定義網絡字體，您可能會在那裡找到一個。

Google 字體庫中的字體

使用 Google 字體有助於為您的網站帶來獨特的設計，但瀏覽器在呈現內容時還必須下載字體文件。 根據您的字體，這可能會增加您的頁面加載時間。

預加載 Google 字體時，最好先“預連接”它們。 此步驟提前告訴瀏覽器它將需要連接到第三方站點（例如，Google Fonts）以檢索資源。

此外，在添加您的預加載代碼後，值得包含一個指向其樣式表的鏈接。 這樣，如果您的用戶的瀏覽器無法預加載有問題的字體，它仍然能夠呈現它。

只需將以下代碼添加到頁面的 <head> 部分：

 <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin /> <link rel=”preload” as=”style” href=”$fontURL&display=swap” /> <link rel=”stylesheet” href=”$fontURL&display=swap” media=”print” onload=”this.media='all'” /> <noscript> <link rel=”stylesheet” href=”$fontURL&display=swap” /> </noscript>

在您的代碼中，您需要將“$fontURL”替換為指向您的 Google 字體的鏈接。 例如，它可能看起來像這樣：

https://fonts.googleapis.com/css2?family=Tangerine:ital,wght@0,400;0,700;1,400;1,700

然後，只需確保保存您的編輯！

3.字體真棒

Font Awesome 是自定義圖標和字體的絕佳資源，其庫中提供免費和高級選項。 您可以使用其中一些圖標來增強菜單、頁眉、頁腳和內容區域中的設計。

與 Google Fonts 一樣，預加載 Font Awesome 圖標是加快感知頁面加載時間的好主意。 只需將此代碼添加到頁面的 <head> 部分：

 <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

您需要換出您在網站上使用的字體或圖標的文件路徑。 然後，保存您的更改！

4. CSS

層疊樣式表 (CSS) 是一種設計語言，它與 HTML 一起工作以確定網頁的樣式和表示。 使用自定義 CSS，您可以快速更改不同元素的外觀。

您網站上每個樣式化的 HTML 頁面都會有一個包含所有 CSS 的相應樣式表。 瀏覽器在呈現網頁時需要加載此文件，因此值得告訴瀏覽器它應該預加載此資源。

幸運的是，有一種預加載 CSS 的簡單方法。 只需將此代碼添加到頁面的 <head> 部分：

 <head>  <link rel="preload" href="styles.css" as="style" /> </head>

確保將樣式表的名稱替換為“styles.css”。 此外，請記住，雖然此代碼可以在 Google Chrome 中運行，但並非所有瀏覽器都支持它。

5. JavaScript

JavaScript 是 WordPress 中使用的另一種常見腳本語言。 它允許您創建動態內容，例如動畫、移動圖像輪播和自動更新提要。

呈現 JavaScript 通常更複雜，因為它的文件相對較重，需要更長的過程來顯示內容。 這就是為什麼讓瀏覽器預加載繁重的 JavaScript 有利於加快頁面加載時間的原因。

與 CSS 一樣，您只需將這行簡單的代碼添加到頁面的 <head> 部分：

 <head>  <link rel="preload" href="ui.js" as="script" /> </head>

和以前一樣，將 JavaScript 文件的名稱替換為“ui.js”，並保存您的更改。

獎勵：安裝免費插件以改進 Core Web Vitals

預加載請求只是您可以用來提高 WordPress 網站的 Core Web Vitals 分數的一種技術。

如果您正在尋找更全面（且免費！）的解決方案，請考慮安裝 Jetpack Boost。 該工具由 Automattic 開發，它是 WordPress.com 背後的同一家公司。

Jetpack VaultPress 備份主頁

這個用戶友好的插件會掃描您的整個網站，並在台式機和移動設備上為您評分。 此外，Jetpack Boost 不僅對三個 Core Web Vitals 有用。 它的優化方法可以改善其他指標，包括交互時間 (TTI) 和總阻塞時間 (TBT)。

您將能夠使用一個簡單的切換系統來優化 CSS 加載、延遲非必要的 JavaScript 和延遲加載圖像。 每當您對網站進行更改時，該插件的高級版本還會自動生成關鍵 CSS。

或者，Jetpack Complete 可以將您的 WordPress 網站提升到一個全新的水平。 該計劃包含多種性能工具，包括訪問 Jetpack 的圖像內容交付網絡 (CDN)，這既可以節省帶寬，又可以縮短頁面加載時間。 此外，您還將獲得高級 WordPress 安全和增長工具。

有關預加載密鑰請求的常見問題

至此，您應該對如何在 WordPress 中預加載關鍵請求有了很好的了解。 儘管如此，我們還是會復習一些常見問題以確保萬無一失！

預加載請求是否會改善用戶體驗？

預加載請求可以通過減少網站的感知加載時間來改善用戶體驗。 由於訪問者不必等待您的內容呈現那麼久，他們就不太可能感到沮喪並可能離開您的網站去另一個網站。

預加載請求會改善 Core Web Vitals 嗎？

在 WordPress 中預加載關鍵請求可以提高您的 Core Web Vitals 分數，尤其是當涉及到 Largest Contentful Paint (LCP) 時。 事實上，當您決定預加載哪些元素時，明智的做法是包括您的“最大”或“主要”內容，因為這可能會從中受益最大。

預加載關鍵請求與預加載關鍵資產

值得注意的是，預加載關鍵請求與預加載關鍵資產的含義相同。 這兩個術語都是指告訴瀏覽器提前加載特定資源以更快地呈現頁面內容。

預加載與預連接與預取

預加載、預連接和預取似乎是相似的概念，但實際上它們的含義略有不同。 它們都是指示瀏覽器以何種順序加載內容的標籤，但它們具有不同的功能。

首先，預加載涉及加載在用戶瀏覽器中呈現頁面所需的內容。 這是一個高優先級標籤，可以在幾秒鐘內準備好資源。

相比之下，預取涉及可能需要加載的後續元素。 瀏覽器會提前尋找資源並將它們存儲在它的緩存中。 這是一個非常低優先級的標籤，所以你不應該將它用於緊急資源。

最後，當您想要告訴瀏覽器連接到特定域時，使用預連接。 如果您的網站使用來自特定第三方網站（如 Google 字體）的資源，預連接會告訴瀏覽器它需要在加載過程的某個時刻連接到該域。

我還能做些什麼來提高網站的性能？

各種任務可以幫助提高 WordPress 網站的性能，包括：

  • 使用 CDN 向全球訪問者提供您的內容
  • 推遲（或刪除）未使用的 CSS
  • 消除渲染阻塞資源
  • 縮小 CSS 和其他資源
  • 發出更少的 HTTP 請求

選擇高質量的 WordPress 主機也是值得的，它將為您提供性能優化功能，如專用緩存、正常運行時間保證和遍布全球的龐大數據中心網絡。

通過預加載關鍵請求提高 WordPress 網站的性能

頁面加載時間會顯著影響您網站的用戶體驗和搜索引擎排名。 因此，您需要竭盡全力加快瀏覽器顯示網站內容的速度。

當您在頁面中預加載關鍵請求時，訪問者的瀏覽器將準備好資源（如字體、CSS 和 JavaScript）。 然後，加載您的內容並讓用戶可以訪問時不會出現延遲。

預加載關鍵請求只是提高網站性能的第一步。 使用 Jetpack Boost，您可以輕鬆地將您的網站配置為延遲加載圖像、延遲非必要的 JavaScript 等。 更好的是，該插件可以免費使用。 立即查看 Jetpack Boost！