亞馬遜公司(Amazon)發現 100 毫秒(0.1 秒)網站延遲會影響 1% 銷售額,但網站速度問題很難改善,無論是不是電子商務網站,速度已經成為每個網站爭搶流量、留住使用者甚至是搜尋引擎最佳化關鍵。要提高網站速度的方法非常多,依照我的經驗,重新檢查原始碼是第一要務,將過度影響速度的部分移除,其他像是透過內容傳遞網路(CDN)進行圖片影片分流也是個很好的作法,關於網站速度檢查可參考「16 個免費網站測速工具,分析網頁效能表現」一文,有些很好用的工具能幫助開發者發現網站過慢等問題。
本文要介紹一個很有趣的小程式「instant.page」,能在短短一分鐘讓你的網站變快!聽起來是不是很神奇呢?花了一些時間了解這個工具的運作原理,其實不難理解,instant.page 運用瀏覽器 prefetch
技術(預先取回鏈結),縮小使用者將滑鼠游標移動到鏈結上、點選鏈結再到整個網頁內容載入中間的幾毫秒延遲時間。根據網站說明,這是一種欺騙大腦的概念,因為人類的時間感知力不到 100 毫秒,即使在 3G 行動網路也能感受到即時性。
instant.page 原始碼只有 125 行,開放原始碼,程式部分使用 Cloudflare Workers 托管,這也意味著使用 serverless 方式確保程式碼不會遭到入侵或竄改,亦能擁有最好的延展性。這個概念來自於 InstantClick,不過運作方式不太一樣(InstantClick 沒有好的說明文件),最近 Google 釋出的 quicklink 會在顯示鏈結時自動加入 prefetch
,開發者認為他應該專注在建構一個更精簡的版本,於是有了 instant.page。
我已經在網站上使用 instant.page,讀者可以感受一下速度的差異。
網站名稱:instant.page
網站鏈結:https://instant.page/
使用教學
STEP 1
開啟 instant.page 官方網站,首頁就會有非常完整的說明。
而它的使用方式真的非常簡單,直接複製網站內的程式碼,點選 Copy snippet 再把這段程式碼貼到網站的 之前,大功告成!網站現在就有內部鏈結
prefetch
的能力。
根據 instant.page 官方的技術細節,目前 Google Chrome 瀏覽器完整支援,Firefox 也支援不過如果頁面沒有被快取就會重新下載頁面,Safari 沒有支援,UC Browser 還沒支援這模組,但應該會在今年支援,Edge 不支援 prefetch
不過會採用 Chrome 引擎。
instant.page 是漸進式增強模組,對不支持這項技術的瀏覽器不會有任何影響。
STEP 2
在首頁有個 Test your clicking speed 按鈕,可以測試一下你將游標移動到鏈結上、再點擊鏈結的時間差,依照 instant.page 說明,當使用者點選鏈結前,會將游標停在鏈結上,時間超過 65 微秒(這個時間非常短)時就會開始預先載入該鏈結內容,如此一來在點選鏈結後就能達到即時顯示頁面的效果。
STEP 3
預設情況下 instant.page 不會預先載入鏈結中帶有查詢符號(問號)的頁面,因為它們有時候會觸發一些操作(例如登入或刪除某些東西),不過如果你要讓整個頁面都有效果,也可以加入參數至 中,或是針對不同的鏈結個別設定。
從 instant.page 的「Page not preloaded」可以查到白名單和黑名單的設定方式教學。
值得一試的三個理由:
- 運用 prefetch 技術,在游標移動至鏈結時預先獲取內容
- 開放原始碼,程式碼只有 125 行(1 kb)
- 使用 Cloudflare Workers 托管,確保程式安全與最佳延展性
相關文章
- instant.page 官方 WordPress 外掛程式,在網站頁面產生立即載入效果
- FasterChrome 提升瀏覽網頁速度,點選連結前預先載入頁面(Chrome 擴充功能)
- 在 WordPress 網站使用 Google AMP 技術,提升頁面開啟速度教學
- statically.io 免費 CDN 提供網站加速和圖片最佳化功能,無流量速度限制
Ten articles before and after
Dunnnk 建立漂亮模型素材,將圖片快速合成到行動裝置或 Apple Watch – telegram 下載
Free CSS Templates – 免費 CSS 網站模版。 – telegram 下載
WorkFlowy 幫助你有條理的組織生活中每一件大小事! – telegram 下載
Pixelmob 免費圖庫搜尋引擎,聚合百萬張相片找圖更有效率 – telegram 下載
線上申請交通違規簡訊,超速闖紅燈或違停遭檢舉時以手機簡訊通報 – telegram 下載
TransferBigFiles – 檔案太大沒辦法寄給朋友嗎?這裡可以寄送最大1GB的檔案! – telegram 下載
Collabpad 線上即時多人協作的雲端記事本,讓所有人共同編輯一份文件 – telegram 下載
EVEREST Ultimate Edition 4.6 免費下載(含註冊序號) – telegram 下載
iMobie AnyTrans:輕鬆在電腦與 iPhone、iPad 及 iPod 傳送相片、音樂或影片檔案(限時免費) – telegram 下載