當麻許不寫程式

首先說一下，這目前只對 Chrome , Edge 有效，不過我想這就已經很夠了，然後簡單說一個結論

有加速但是可能不是麼明顯

程式碼很簡單就是這樣 

<script type="speculationrules">
    {
  		"prerender": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }],
  		"prefetch": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }]
    }
</script>

只要放在</head> 前面就可以了，其實非常的簡單，但是這段主要是做啥我就問一下 GPT 測試一下

基本上 prefetch 就是在讓 瀏覽器 "可但是不保證" 的先去抓可能會用到的資源，prerender 就是先在記憶體中先把畫面 在記憶體中先準備好

我自己實測會是在滑鼠移動到某超連結的時候，感覺瀏覽器會在背景做事情，我是用我自己的 Blog 分別加上跟沒加上進行測試

 

這是我在載入後清除紀錄，之後滑動滑鼠到超連結上方，發現瀏覽器的確有在偷偷做一些事情

這裡面 eagerness 是可以改的參數，你可以設定為 eager 讓瀏覽器更加的激進，但是建議平常使用就用

moderate ，你也可以透過 where 調整要處理的頁面這邊給一個 sample 

<script type="speculationrules">
    {
      "prefetch": [{
        "where": {
            "href_matches": "/(article_list|spiritualcates|teatalk).*"
          },
        "eagerness": "eager"
      }],
      "prerender": [{
        "where": {
            "href_matches": "/(consultation|article_list)\\.aspx"
          },
        "eagerness": "eager"
      }]
    }
</script>

結論，其實如果是 Blog 或靜態網站蠻適合的，如果是一些處理到購物車會員登入的頁面就比較不適合，就要頁面加入這段'可能'加速的指令

當然這東西基本上只是解決一些癢點，並不是痛點，就當作一個冷知識處理吧...

下面附上參考連結，裡面還有 firefox , safari 等其他瀏覽器作法，這邊我就不贅述了..

reference:

https://javascript.plainenglish.io/make-any-website-load-faster-with-6-lines-of-html-1d0d93ffe453

--

本文原文首發於個人部落格：6 行程式碼就加速網頁效果 ?

--

 

---

Yesterday I wrote down the code. I bet I could be your hero. I am a mighty little programmer.