instant.page:預載技術、預測使用者點擊進而加速載入網頁
2019/02/22
萌芽站長
1,481 1
網站技術 , HTML , JavaScript
⚠️ 溫馨提醒:我們發現您可能啟用了廣告阻擋器,請將本站加入白名單以正常閱讀文章內容,謝謝支持 ❤️
「instant.page」 是一款相當輕量的 JavaScript 程式,利用 CDN 的方式放入自己的網站,就可以加速網頁載入速度,怎麼這麼神奇呢?原來是利用我們從觸碰連結到點擊連結的這個空檔進行預載,就可以減少部分的載入時間,預載只包含 HTML,但這樣就足以讓網頁整體首次顯示的速度加快,使用者將體驗到相當快的載入體驗,程式碼完全開源,非常推薦有在經營網站的站長們使用!
詳細技術是當使用者游標在連結上浮動 65 ms (毫秒) 的時間就很有機會點擊該連結,因此這時開始預載連結網頁,所以點入該連結後其實已經先載入好(或載入好部份)HTML,所以網頁幾乎可以瞬間開啟(顯示),達到「快速」開啟的效果!官方網站上有提供一顆按鈕可以測試自己從觸碰連結到點擊連結的空檔有多久,其實平均應該是 300 ms 唷!
基本上只要把以下原始碼添加到網頁 </body> 前即可:
<script src="//instant.page/1.1.0" type="module" integrity="sha384-EwBObn5QAxP8f09iemwAJljc+sU+eUXeL9vSBw1eNmVarwhKk2F9vBEpaN9rsrtp"></script>
▲「instant.page」官方網站截圖。
▲官方文件也有說明可以設定白名單/黑名單,用來設定是否執行預載。有些條件下預載不會執行,如連結網址內有「?」,這可能跟登出等行為有關,不適用預載。
贊助廣告 ‧ Sponsor advertisements
Apache Tomcat 完整安裝教學、附更改通訊埠 & 虛實位址對應 & 起始檔案設定教學
📆 2019-03-04
📁
軟體介紹, 軟體應用, 網站技術, 伺服器, JSP, 架站資源
Node.js:Webpack 基礎概念與 JS 封裝過程教學(使用 VS Code)
📆 2019-08-19
📁
軟體應用, 網站技術, JavaScript, Node.js, Webpack
Toastr:最佳的通知提示 jQuery 插件
📆 2019-07-01
📁
網站技術, JavaScript, jQuery
XAMPP:本機上安裝 SSL 憑證以建立 HTTPS 開發測試環境
📆 2021-11-09
📁
軟體應用, 網站技術, 伺服器
SQL - OUTFILE & INFILE:資料表匯出成 TXT、將 TXT 資料匯入至資料庫(備份與復原)
📆 2019-05-30
📁
網站技術, 伺服器, 資料庫, SQL
PHP 資料型別種類與判斷
📆 2021-09-29
📁
網站技術, PHP
【論壇經營】Discuz! X3.1去除標題中的Powered by Discuz!
📆 2014-01-11
📁
網站技術, 架站程式, Discuz!
HTML基本簡介
📆 2013-01-01
📁
網站技術, HTML
留言區 / Comments
萌芽論壇