在 WordPress 中實現預加載、預取、預連接

利用現代瀏覽器功能（例如預加載、預取、預連接）使 WordPress 網站更快。

作為網站所有者，誰不喜歡盡一切可能更快地加載網頁？

確保在全球範圍內始終如一地更快地加載站點具有挑戰性。 您可以做幾件事來快速加載站點資源，包括啟用以下瀏覽器提示。 它們也被稱為預瀏覽技術。

注意：當您第一次訪問該網站時，瀏覽器提示技術沒有多大幫助，但隨後的請求會更快。

預載

您可以使用preload標籤告訴瀏覽器提前獲取一些靜態資源。 它們可以是圖像、字體、JavaScript、CSS、腳本、視頻等。它有助於優先考慮資源加載； 因此，性能得到改善。

如果您希望您的用戶隨後訪問多個頁面，那麼預加載將是一個好主意。 就像用戶訪問產品頁面然後查看信息、與其他產品比較、添加到購物車、付款等的電子商務商店。

您可以使用以下插件來設置預加載功能。

更好的資源提示——配置 CSS 和 JS 文件的免費插件。

WP Rocket – 一個高級插件，通過許多基本技術（包括預加載緩存和站點地圖）來增強網站性能。

你怎麼知道是否啟用了預加載？

找出答案的最快方法是查看頁面源代碼。 您應該會看到類似下面的內容。

 <link rel="preload" as="style" href="IMPORTANT.css"> <link rel="preload" as="script" href="CRITICAL.js">

並非所有瀏覽器都支持在寫入時預加載。 因此，請在實施前查看兼容性矩陣。

預連接

您是否從其他域加載資源？ 也許CDN？

如果沒有，並且每個資源都是從您的單個域加載的，那麼這可能沒有幫助。

預連接提示瀏覽器在後台建立與其他域的連接，以節省 DNS 查找、重定向、TCP 握手、TLS 協商等的時間。其想法是降低延遲以提供從另一個域快速加載資源。

同樣，您可以使用上面提到的更好的資源提示插件或像 perfmatters 這樣的高級插件。

配置所需資源後，您應該會在頁面源中看到它們，如下所示。

 <link rel="preconnect" href="https://ANOTHERSITE.com">

注意：如果您從需要 CORS 的域加載資源，那麼您需要將其指定為crossorigin和輸出應該看起來像。

 <link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>

Preconnect 與最新版本的 Chrome、Edge、Firefox、Safari 兼容。

預取

讓瀏覽器獲取下一個頁面，您認為當用戶四處導航時將需要該頁面。 Prefetch 將下載必要的資源並將它們存儲在本地緩存中，並在需要時快速提供它們。 有兩種類型的預取。

DNS 預取– 解釋如下

鏈接預取– 使用 <link url ..> 配置。 用於預取 HTML 或靜態資源。 您可以使用as屬性預取資源。

<link rel="prefetch" href="https://somesite.com/articles/page/2/" as="document">

as屬性支持各種資源，如音頻、視頻、腳本、軌道、樣式、字體、對象、文檔等。可以藉助 Pre Party Resource Hints 插件配置鏈接預取。

DNS 預取

從多個域加載資源並希望在後台解析它們？

這種快速設置可以幫助更早地解決所有潛在的域，因此當請求資源時，它可以更快地加載。 這有助於降低整體延遲。

假設您正在從 3 個域加載資源，每個域大約需要 100 毫秒來執行 DNS 查找，那麼您將節省 300 毫秒的延遲。

不是很酷嗎？

如果您喜歡編輯主題文件，您可以使用 perfmatters 插件或在主題的functions.php文件中添加以下內容來實現。

 //* DNS Prefetching function dns_prefetch() { echo '<meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" /> <link rel="dns-prefetch" href="https://ANDANOTHERONE.com" /> <link rel="dns-prefetch" href="https://AND.SOMEMORE.com" /> } add_action('wp_head', 'dns_prefetch', 0);

您可以在 Mozilla 網絡文檔中閱讀更多內容。

預渲染

您是否希望您的網站用戶瀏覽潛在頁面？

Prerender 可以幫助在後台加載這些資產，當用戶點擊它時，他們會很快得到它。 您可以使用 Pre Party Resource Hints 插件來實現這一點。

預渲染適用於輕量級頁面或資產，但要小心整個站點或大型資源，因為它可能會增加 CPU 利用率和帶寬並降低站點速度。 因此，請嘗試使用較小的資源並對其進行測試以確保它沒有副作用。

如您所見，在 WordPress 中實現瀏覽器提示涉及四個主要插件。 選擇你喜歡的並符合要求的。

Pre Party Resource Hints 插件 – 免費插件提供 DNS 預取、鏈接預取、預渲染、預連接和預加載。

更好的資源提示——上述提示的替代方案。

免費插件只要得到維護和支持就很好。 不幸的是，許多插件不會發生這種情況，這就是為什麼有時最好選擇付費版本的原因。 商業版插件得到專業支持，並通過 WordPress 標準和安全修復獲得最新版本。 如果您願意花幾美元來優化您的網站性能，那麼您可以查看以下內容。

WP Rocket – 享有盛譽，受到超過 800,000 個站點的信任。 一個網站的價格為 49 美元。

Perfmatters – 一個輕量級且易於遵循的站點，成本為 24.95 美元。 在我撰寫本文時，它提供了以下功能。

這是很多優化。

結論

WordPress 核心是輕量級的，但它變得龐大取決於您使用的主題和插件。 而且，優化網站的性能以獲得更好的搜索排名和轉化率至關重要。 上述技術很容易遵循，但您不應止步於此。

您還應該考慮使用 CDN 在全球範圍內更快地緩存和交付內容給您的用戶。 有很多，但我建議嘗試同時提供 CDN 和安全性的 SUCURI。