专栏首页啸天"s blogTypecho 通过 JS 脚本预加载提升网站访问速度

Typecho 通过 JS 脚本预加载提升网站访问速度

在用户点击网站链接之前,他们将鼠标悬停在该链接上。当用户徘徊65毫秒时,他们将点击该链接有两个机会,因此 instant.page 此时开始预加载,平均超过 300 毫秒,以便页面预加载。

instant.page 是渐进式增强 - 对不支持它的浏览器没有影响。

原理就是通过捕捉鼠标悬浮的链接进行预加载。此脚本的加速指站内加速,但只会预加载 html 页面,不会加载图片等资源,所以不用担心与流量损耗等问题。

GitHub 地址:https://github.com/instantpage/instant.page

typecho 调用方法

把上述 Github链接文件 instantpage.js 下载之后上传到网站目录下;

在foot.php 文件 /body 标签前添加:

<script src="`存放路径`/instantpage.js" type="module"></script>

BUG:使用此脚本后统计数据增加,因为预加载会被统计成正常浏览次数,期待官方解决

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://xtboke.cn/复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 如何通过预加载器提升网页加载速度

    预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措。Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了...

    wangxl
  • 如何通过预加载器提升网页加载速度

    预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措。Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了...

    葡萄城控件
  • Typecho接入熊掌号附带AMP/MIP简单教程

    在Typecho接入熊掌号之前,你得先去熊掌号申请开通一下。具体填写的信息就是上面页面的那么多,请准备号正面手持身份证的照片。

    Erwin
  • 这样优化和加速你的wordpress网站,快速提升网站的访问加载速度

    这样优化和加速你的wordpress网站,快速提升访问加载速度,最近发现很多的站长对一些基础的知识懂得不多,导致自己wordpress网站非常的慢非常的卡,几乎...

    wordpress建站吧
  • 百度 MIP 和谷歌 AMP 有没有必要以及跟 CDN 的差异

    说起 MIP 算是最近站长圈子里很吸引眼球的一个话题了,毕竟这是百度推出的一个移动网页加速器, MIP 页面可以无需等待加载,页面内容将以更友好的方式瞬时到达用...

    明月云服务
  • 个人博客平台选择 Typecho 还是 WordPress ?

    明月一直都是 WordPress 的粉丝,可以说七八年的博客生涯都是 WordPress 博客上度过,所以说对 WordPress 的好、坏理解和认识应该说更...

    明月云服务
  • shell脚本实现整站缓存和预缓存,进一步提升网站整体加载速度

    在 Linux 中,shell 脚本结合系统任务计划 crontab,非常简单就能实现一些复杂程序才能完成的工作,开发成本低,且简单易学。 张戈博客之前也分享过...

    张戈
  • Typecho文章代码高亮功能

    Typecho是一款由国人开发的博客程序,它的特点是简洁小巧,扩展性强,并且内置支持Markdown语法写作,因而很受技术博客作者的欢迎。但是默认的Typec...

    HCG_Sky
  • typecho搭建保姆级教程

    本文从Typecho 简介来说明,包括服务器的选择,域名注册,服务器系统选择 ,环境装备,Typecho设备包括中心的防踩坑注意事项,为您提供完好的保姆级...

    用户7146828
  • 一个提高 CDN 缓存命中率小技巧

    说起 CDN 来对明月来说可以说是熟的不能再熟了都,为了选择一个适合自己站点的免费 CDN 几乎试遍了所有主流的 CDN,明月自己都不记得使用过多少种 CDN ...

    明月云服务
  • 【2019-10-05 更新】Typecho 主题:AL_lolimeow - 基于Wordpress 主题 lolimeow

    作者:Alone88 Email:im#alone88.cn (#换成@) Wordpress form 猫可喵

    Alone88
  • 网站预加载 JS 脚本 instant.page 的使用方法

    不知道各位是都了解 instant.page 网站预加载的脚本,至少我是不知道的,我之前接触过“dns-prefetch”标签,也在部分模板集成了接口,昨天看彧...

    李洋个人博客
  • 个人博客如何选择 Typecho 和 Hexo ?

    在 Typecho 和 Hexo 之间选择一个适合自己的博客平台(框架)首先的了解它们之间的区别,不同的博客平台(框架)部署、配置、运行方式可能都会有不小的差异...

    Xcnte
  • 【腾讯云前端性能优化大赛】秒开的艺术:Hexo 博客首屏耗时优化实践

    Hexo 是一款基于 Node.js 的静态博客生成器。有别于传统的 WordPress、Typecho 等由服务端渲染的动态博客程序,Hexo 可以遍历博客的...

    电脑星人
  • Typecho部署腾讯CDN加速站点

    由于刚毕业腾讯云校园优惠套餐结束,无法进行套餐续期。目前将博客数据迁移到阿里云轻量云服务器,带宽5M是腾讯云带宽的5倍。以前也开过CDN但由于各种原因关闭了。近...

    雨落凋殇
  • 【玩转Lighthouse】搭建Typecho+Chevereto博客写作环境

    注册好腾讯云账号后,在轻量应用服务器购买页面选购服务器,本次教程选用服务器配置如下

    吹肯
  • 个人博客如何选择 Typecho 和 Hexo ?

    这两天明月一直在折腾学习 Hexo 博客框架的部署和搭建,目前基本已经成型了(hexo.imydl.tech),通过这几天的不断折腾对比,发现 Hexo 还是很...

    明月登楼
  • 页面性能优化的五种办法

    大部分用户希望网页能在 2 秒之内就完成加载。事实上,加载时间每多 1 秒,你就会流失 7% 的用户。如果加载需要太长时间,他们就会放弃访问。

    小生方勤

扫码关注云+社区

领取腾讯云代金券