让博客速度快如闪电

学习折腾
732 19

来我博客的的朋友是否有一种秒开感觉,打开一个链接几乎不需要等待就能瞬间跳转,除了一般cdn静态加速和主机本身的原因外,还使用了一个重要的文件InstantClick。

原理:当我们鼠标放到超链接上到按下鼠标,中间有一个非常简短的过程,InstantClick正是利用这个时间差预加载超链接的内容,点击的时候直接显示出来,让读者有种秒开的感受。

官方解释(机翻):

默认值:鼠标悬停时
当用户将鼠标悬停在链接上时,预加载开始。如果用户的连接良好并且您的页面加载时间不长,则页面将立即显示。
只需按照“入门”中所述初始化 InstantClick即可。
无需对服务器进行额外负载:鼠标按下时
当用户按下鼠标按钮时预加载(单击发生在释放时)。这几乎不会给您的服务器带来任何开销,但仍然会带来“神奇的”速度提升。
要使用,请'mousedown'作为参数传递给InstantClick.init。要使用,请'mousedown'作为参数传递给InstantClick.init。要使用,请'mousedown'作为参数传递给InstantClick.init。要使用,请'mousedown'作为参数传递给InstantClick.init。
InstantClick . init ( '鼠标按下' );
两者之间:鼠标悬停时延迟
如果用户在您选择的延迟时间过去后仍然将鼠标悬停在链接上,则页面将开始预加载。
建议的延迟为 100 毫秒和 50 毫秒。超过 100 毫秒实际上可能比鼠标按下时更糟糕(见下文),少于 50 毫秒可能不会被察觉。
要使 InstantClick 在延迟后预加载,请将延迟时间(以毫秒为单位)作为参数传递给InstantClick.init。
InstantClick.init ( 50 ) ;
移动端无论使用哪种选项,当访问者的手指触摸链接(touchstart)时,预加载都会开始。
如果您的网站针对移动设备进行了优化(Android 上使用设备宽度视口,iOS 上使用FastClick),则“点击”发生在访问者从链接上松开手指时,预加载会有大约 100 毫秒的延迟。
如果您的网站针对移动设备进行了优化(Android 上使用设备宽度视口,iOS 上使用FastClick),则“点击”发生在访问者从链接上松开手指时,预加载会有大约 100 毫秒的延迟。
如果您的网站未针对移动设备进行优化,则取决于操作系统。Android 需要 300 毫秒,iOS 需要 450 毫秒。如果您的网站未针对移动设备进行优化,则取决于操作系统。Android 需要 300 毫秒,iOS 需要 450 毫秒。
同一站点上的 3G 请求通常需要大约 200 毫秒。

选择哪一个
如果您的网站可以处理额外的负载,请在鼠标悬停时进行预加载如果您的网站可以处理额外的负载,请在鼠标悬停时进行预加载。
如果您的网站可能无法实现,请在鼠标按下时进行预加载。无论如何,您的网站仍将比 99% 的网站更快。
如果您想确定您的服务器是否可以,请从 mousedown 开始,这几乎不会给您的服务器带来任何额外的压力。然后使用延迟 100 毫秒的 mouseover。然后延迟 50 毫秒(或者如果您有耐心,可以减少一点)。然后直接使用 mouseover。
如果服务器端分析很重要,则您只能使用鼠标按下,因为使用其他任何方式都会扭曲数据。
缺点:我的博客使用exif插件,需要加载文章里面的图片然后显示出来,使用InstantClick后需要刷新一下才能显示exif信息,不过瑕不掩瑜,让读者大大能快速到达需要的网址就是最大的胜利。

使用方法

  1. 前往InstantClick官网,下载js文件。
  2. 将它上传到博客空间或者cdn空间
  3. 在foot.php放入如下代码
// src后面填写文件路径
<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

效果

如本站所示,实测只要支持js的网站都能使用该方法加速浏览,提高读者体验。

评论 ( 19 )
隐私评论
  1. 11天前北京市回复
    确实快得离谱,是所有主题都能用嘛
    1. 11天前中国回复
      @老派
      理论上所有的网站都可以使用。
  2. 2024-09-23广西南宁市回复
    博主你这是wp主题嘛?用InstantClick
    1. 2024-09-23安徽省回复
      @寻鹤
      是typehco主题,年龄大了,比较喜欢这种中规中矩的界面。
  3. 2024-09-15重庆市回复
    确实很快,预加载立大功,此外就是没有多余的动画也很重要。
  4. 2024-09-14江苏省无锡市回复
    高级货,打开速度确实很快
    1. 2024-09-14安徽省回复
      @大峰
      对于空间在国外的博客提升是很明显的。
  5. 2024-09-12上海市回复
      1. 2024-09-12安徽省安庆市回复
        @keyle
        真是涨见识了,多谢
  6. 2024-09-12上海市回复
    哈?还有这种黑科技。
  7. 2024-09-12重庆市江北区回复
    感觉还不错,原理简单、操作简便。不过好像我对速度要求也没那么高,姑且观察一段时间再决定是否使用吧。
    1. 2024-09-12安徽省安庆市回复
      @陈大猫
      确实能提高加载速度,用楼上的cdn试一试如何?
  8. 2024-09-12广东省湛江市霞山区回复
    不错的优化建议
  9. 2024-09-11云南省回复
    有一种方法,在首次获取到图片的 Exif 数据后,将数据存储到 Json 文件中,已经存储 Exif 数据的图片,在之后就不需要等待图片加载完成后,通过 Exif.js 再次获取了。
    1. 2024-09-12安徽省回复
      @Lopwon
      思路很好,就是实现起来我等代码盲完全不知道怎么去弄。
  10. 2024-09-11江苏省无锡市回复
    对,我就是因为exif的问题才放弃instantclick的。
    1. 2024-09-11中国回复
      @S̆̈
      找到了一个类似的js文件,好像不影响exif信息的加载,https://instant.page/,要不要试试。
    2. 2024-09-11安徽省回复
      @S̆̈
      按道理你的图片是从cdn里面过来的应该可以直接读取exif信息,我博客插件是本地读取的。