惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Martin Fowler
Martin Fowler
D
DataBreaches.Net
F
Fortinet All Blogs
阮一峰的网络日志
阮一峰的网络日志
博客园_首页
Apple Machine Learning Research
Apple Machine Learning Research
H
Help Net Security
M
MIT News - Artificial intelligence
美团技术团队
人人都是产品经理
人人都是产品经理
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
The Cloudflare Blog
有赞技术团队
有赞技术团队
L
LangChain Blog
博客园 - Franky
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 【当耐特】
S
SegmentFault 最新的问题
V
Visual Studio Blog
Blog — PlanetScale
Blog — PlanetScale
Hugging Face - Blog
Hugging Face - Blog
B
Blog
I
InfoQ

优世界

OpenWrt 路由器改纯 AP 模式记录(Cudy TR3000 + 中兴 F50) Ubuntu 24.04 安装 Zabbix 8.0 全记录 我的静态博客动态化方案 Claude Code 启动脚本 我的5G路由器方案:中兴F50+cudy tr3000 256MB 还是弃用了使用多年的全拼输入法 临走前一份襄阳牛肉面 EdgeOne Pages 部署 Twikoo 评论 一个朋友圈风格 Hugo 主题 搓了一个仿朋友圈的Hugo主题 一个人烧烤被拒单了 周末闲暇时间翻修了一下博客 我把Vercel换成了EdgeOne Pages 博客友链实时健康监测方案 Artalk评论区接入AI摘要的尝试 给Hugo博客添加瀑布流相册功能 Hugo静态博客如何实现搜索功能 Artalk评论系统实现段落评论功能 为什么我觉得网页昼夜切换那么重要 博客六周年:从折腾到回归平淡 如何hugo静态实现友联朋友圈功能 脂溢性皮炎的烦恼 还是放弃了iPhone16e 米环勿扰同步问题 除草日记 Hugo使用GitHub Action自动刷新多吉云CDN缓存 迁移博客至hugo 添加ikun摆件 parsec远程软件报6023错误 win11右键菜单改回win10方法
访客体验优化
2024-03-02 · via 优世界

今天下午逛GitHub的时候,GitHub的首页推了一个这样的项目

github.com https://github.com/instantpage/instant.page

项目的介绍这样写到

PC端

在用户单击链接之前,他们会将鼠标悬停在该链接上。当用户悬停 65 毫秒时,他们有二分之一的机会点击该链接,因此 instant.page此时开始预加载,平均为页面预加载留下超过 300 毫秒的时间。
另一种选择是在用户开始按下鼠标时加载页面而不进行预加载。这使得未使用的请求为零,同时仍然将页面加载平均提高了 80 毫秒。
您还可以在悬停时或链接可见时进行预加载,并在用户开始按下鼠标时触发点击,从而使您的页面成为世界上最快的页面。

移动端

用户在释放之前开始触摸显示屏,平均留出90 毫秒的时间来预加载页面。

汉译过来大概意思就是,当鼠标即将悬停到a标签的之前,对该链接进行预加载,提高访问速度

因为之前有同学反馈我的博客点击文章加载有些慢,于是乎说干就干,项目很简单,如需上手,直接在body标签之前加入一行js代码即可

代码如下

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

如上截图所示,当鼠标即将点击到文章链接,instant.page会对文章链接执行预加载,从而提高页面渲染速度

各位来访的朋友,有没有觉得速度比之前更快呢