[ad_1]
如果您想加快WordPress網站的速度，則在WordPress上使用Instant Page是一種鮮為人知的策略，可以利用「預載入」的力量。
最終，網站導航很簡單。您轉到頁面，找到您感興趣的鏈接，單擊它，然後重複該過程。在後台，單擊鏈接後，瀏覽器將載入每個頁面。但是，請想像一下您的瀏覽器是否在單擊之前載入了新頁面。在前端，唯一的不同是第二頁的載入速度比平常快。
這就是預載入-使用代碼告訴訪問者的瀏覽器預載入特定頁面。這樣一來，用戶將可以體驗到更快的導航，如果正確實施導航，他們將永遠不會注意到後台有更多的數據載入。
在本文中，我們將詳細介紹預載入的工作原理，然後教您如何使用 即時頁面 腳本將功能添加到WordPress。我們還將測試預載入對現實生活有何影響。
讓我們開始！
Instant.page通過預載入來加快載入時間?️這是在#WordPress上使用它的方法
「及時」預載入的介紹
預載入是 標籤，告訴瀏覽器他們應儘快載入和緩存資源。例如，您可以使用以下代碼，以便瀏覽器在載入頁面後立即獲取您的style.css文件：
通常，您使用預載入標籤下載樣式表或腳本。但是，即時預載入更進一步。當您與特定鏈接互動時，它會告訴您的瀏覽器開始載入另一個頁面。
您的瀏覽器除了對網頁進行緩存外，對它預載入的網頁沒有任何作用。這意味著當您單擊鏈接時，載入時間應比平時更快。但是，請記住，即時預載入僅適用於：
- 網站內的內部鏈接
- 鏈接到外部頁面（如果需要！）
換句話說，在您的網站中添加即時預載入可以加快內部導航的速度。但是，它不會影響搜索引擎或其他網站的載入時間。
在我們自己的測試中，我們發現，將滑鼠懸停在鏈接上平均需要200-300毫秒的時間才能單擊該鏈接。在現實生活中，即使開始時很快，這對於任何頁面的載入時間來說都是一個不錯的選擇。
值得注意的是，預載入與「預取」不同，這是您可能會遇到的另一個術語。預取還會告訴您的瀏覽器在後台載入資產。但是，這樣做的優先順序較低，這不適合幾乎立即開始載入的目的。
Instant Page使設置「及時」預載入變得容易
對於初學者， 即時頁面 是一個開源腳本，可用於將即時預載入添加到您的網站。用戶將滑鼠懸停在鏈接上後，該腳本即會開始載入新頁面-儘管它只會預載入靜態內容。
根據Instant Page的說法，當用戶將鏈接懸停在鏈接上約65毫秒時，他們有50％的機會會點擊該鏈接。此時，您的瀏覽器將有一些時間開始在後台載入頁面，從而導致 載入時間更短。
在將腳本添加到您的網站之前，您需要運行一些內部速度測試。為此，我們喜歡使用Chrome開發工具。只需右鍵單擊您網站上的任何頁面，然後選擇“檢查”選項即可。在右側打開工具的情況下，選擇“網路”選項卡，然後單擊內部鏈接：
右下角的DOMContentLoaded部分告訴您頁面HTML載入所花費的時間。運行其中一些測試並記下結果-這就是您的基準。
現在，讓我們看看如何在WordPress上使用「即時頁面」。
在WordPress上使用即時頁面的最簡單方法
在下一節中，我們將向您展示如何使用WordPress上的Instant Page的手動方法，但使用WordPress上的Instant Page的絕對最簡單的方法是使用專用插件：
即時頁面 當前版本：3.0.0
上次更新時間：2019年10月26日
此處無需教程-您只需安裝插件即可開始使用！
如何在WordPress上手動使用Instant Page
我們建議大多數用戶使用該插件，但是您也可以手動將Instant Page腳本添加到WordPress網站。
使用手動方法的小好處是，您可以更好地控制預載入功能。
該過程將根據您使用的方法而有所不同。例如，您可以 使用掛鉤 將代碼添加到WordPress或直接插入代碼。
由於即時頁面只需要幾行代碼即可工作，因此我們將使用後一種技術。
為此，您需要訪問自己的網站 通過文件傳輸協議（FTP） 並導航到您的WordPress根文件夾。
到達那裡後，轉到wp-content / themes並找到與 你的孩子主題。
如果您沒有使用子主題，或者不確定如何創建子主題，建議您使用上面的插件方法。如果您嘗試在不使用子主題的情況下將代碼段添加到主題的模板文件中，則下次您更新主題時所做的更改將被覆蓋。
然後查找footer.php文件，該文件應包含主題的最後一部分
標籤。使用文本編輯器打開文件，然後找到結束正文標籤（）。您可以在下面看到示例footer.php文件的一部分，但請記住，根據您使用的主題，您的文件可能看起來有些不同：
現在，繼續並將以下代碼段粘貼到該標籤之前。然後，您需要先將更改保存到文件，然後再關閉它：
默認情況下，該腳本僅預載入內部鏈接。不過，您可以通過將屬性添加到來對其進行調整以啟用外部預載入
標籤，如下所示：您還可以通過添加另一個屬性來修改懸停延遲。例如，如果您的頁面包含許多按鈕和可單擊元素，則可能需要在預載入之前增加懸停時間。因此，您的瀏覽器應僅預載入訪問者真正打算點擊的鏈接：
測試WordPress中的即時預載入
我們繼續並在我們的一個網站上設置了Instant.page腳本進行測試。您在上一節中看到了我們的基準結果，因此讓我們再進行一次測試，看看腳本是否有很大的不同：
在我們的測試過程中，我們沒有發現WordPress中載入時間的任何顯著差異。根據Chrome開發者工具的說法，它略有減少，但是正如您所見，它只有幾毫秒。不錯，但我們甚至沒有將延遲降低100毫秒。
但是，當您在靜態網站上使用腳本時，結果確實會更好。在測試過程中，我們設法從完全靜態的測試網站上節省了200毫秒的延遲：
最終，如果您是WordPress用戶，則只需執行即時預載入即可。延遲的減少是不錯的，但是我們在WordPress上進行的測試並未顯示出明顯的減少，這意味著根據這些結果，它在某些情況下只是改變遊戲規則的人。
結論
您可以採取任何措施來改善網站的載入時間，這對企業來說是一件好事。即使縮短几毫秒也可能對 用戶體驗。實施預載入對於進一步提高性能非常有用。特別是對於內容豐富且渴望最大化的網站 「現場停留時間」。
Instant.page通過預載入來加快載入時間?️這是在#WordPress上使用它的方法
實施即時預載入就像添加 即時頁面 您網站之間的腳本
標籤。如果您使用WordPress， 甚至還有一個插件 可以為您完成工作。但是，我們的測試表明，對於WordPress網站，延遲的減少並沒有像靜態網站那樣顯著減少。如果您正在尋找其他加快WordPress網站速度的方法，則還需要了解 圖像優化 和 快取。我們在帖子中介紹了有關如何加快速度的其他策略 WordPress的。
您對即時頁面或預載入的工作方式有任何疑問嗎？讓我們在下面的評論部分中討論它們！