2024-06-24|閱讀時間 ‧ 約 23 分鐘

如何一鍵提升網頁速度？使用 instant.page 技術實現

根據 Amazon 研究統計指出，網頁每延遲 100 毫秒就會導致銷售額減少 1%。也就是說，過慢的網頁速度會影響你在網路上的生意。因此，本篇文章將教你如何透過 instant.page 技術讓你的網站在一分鐘內變快！

instant.page 介紹

instant.page 技術的運作原理是，在超連結中新增prefetch屬性，當使用者將滑鼠遊標移至連結時，就會預先載入網頁內容，達到立即載入的效果。

根據官方文件說明，instant.page 支援 Chrome 和 Firefox 等主流瀏覽器，部分的瀏覽器 (像是 Safari) 即使沒有支援，也不會影響連結的作用。

在安全性方面，由於 instant.page 將程式碼部屬在 Cloudflare Workers 上，無伺服器就不用擔心讓人攻破。此外，還運用 Subresource Integrity 防止檔案遭到有心人士竄改。基於以上 2 點保護措施，你可以安心使用。

在你的 WordPress 網站新增 instant.page 技術的方法有兩種，分別是程式碼片段與官方所開發的外掛。

方法一：你可以將以下程式碼片段透過 FluentSnippets 外掛新增至 <body> 結束標籤之前。

<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>

方法二：如果你不擅長新增程式碼片段，官方也有提供 WordPress 外掛讓你使用。當你安裝並啟用 instant.page 外掛後，立即載入網頁的效果便已設定好。

分享至

成為作者繼續創作的動力吧！