InstantClick插件-让网页提前预加载 提升网站访问速度

InstantClick插件-让网页提前预加载 提升网站访问速度插图

通常我们为了让自己的网站速度加快,经常进行各种优化,包括页面压缩的、包括图片优化的等等,今天虾皮路再分享一款比较强大的WordPress插件-InstantClick,让网站的访问速度获得更大的提升。

可能很多人会发现,为什么谷歌浏览器的访问速度比其他浏览器快很多,乃至很多浏览器的内核最终也开始用谷歌浏览器的内核,其实谷歌浏览器的一大特点就是对页面进行提前预加载。什么是预加载?其实就是你打开一个页面的时候,这个页面里面包含的各类要到达的链接页面也在后台提前加载了,然后你点击这些链接的时候,这些页面就从后台跳到前台呈现。

那么,我们的网站实际上也可以实现这样的效果。当我们的鼠标滑到链接上到点击的时间间隙去加载这个页面,通常这个间隙有几百毫秒,利用InstantClick,我们可以充分利用这几百毫秒,让网站能够瞬间显示新页面,几乎没有延迟。

InstantClick网站加速原理

官方介绍如下

Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). InstantClick makes use of that time to preload the page, so that the page is already there when you click.
InstantClick uses pushState and Ajax (a combo known as pjax), replacing only the body and the title in the head.

利用mouseover()、mousedown()、mouseout()执行整个过程,运行原理:当鼠标移到链接上时,就已经开始加载页面了,从鼠标悬停该链接到点击链接这中间有那么几百毫秒的间隔,此时页面已经加载得差不多,那么在真正打开页面时就等于直接显示,速度会非常快。所以这不单纯是Ajax,而是 pushState+Ajax ,即是PJAX,类似于整个页面的Ajax(和真实的Ajax有区别)。

InstantClick插件安装

WordPress后台搜索“InstantClick”,直接安装启用

InstantClick插件-让网页提前预加载 提升网站访问速度插图1

安装完成后直接可用,也可以在后台设置直接选择停留链接50ms还是100ms预加载。

不想在线安装的,可以选择插件下载:

大侠阿木的汉化版下载地址:instantclick

原版下载:https://wordpress.org/plugins/instantclick/

InstantClick代码实现

对于不喜欢用插件的小伙伴,可以选择代码的方法去实现。

1、先从官方下载InstantClick的JS文件。

地址:http://instantclick.io/download

2、将下载后的instantclick.min.js放到自己主题文件夹里的JS文件夹里,或者放到自己的根目录里新建一个js文件夹等。

然后在自己的footer文件的</body>标签之前插入以下代码

<script type="text/javascript" src= "<?php bloginfo(‘template_directory’); ?>/js/instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

以上代码是放到主题文件夹的JS文件夹里,如果放的位置有变化,自己调整以上的地址。

以上保存,然后刷新自己的缓存页面即可。

改变/隐藏InstantClick的进度条颜色

默认情况下,InstantClick在载入页面的时候,会在页面的顶部显示一个进度条,默认的颜色是#29d,你可以更改颜色放到自己的CSS文件里:

#instantclick-bar {
  background: #fd8561;
}

将以上的white改为自己想要改变的颜色。

如果希望直接隐藏进度条,可以放入如下代码

#instantclick {
  display: none;
}

最后提醒:因为InstantClick和Ajax存在一定的冲突,因此在使用InstantClick插件或者代码的时候容易导致网站内的其他JS或者模块出现问题。比如页面的懒加载图片,百度统计、评论框出现问题。

使用如下代码解决,在InstantClick.init();之前添加以下代码

<script data-no-instant>
InstantClick.on('change', function(isInitialLoad) {
if (isInitialLoad === false) {
// 多说
if ($(".ds-thread").length == 1)
DUOSHUO.EmbedThread(".ds-thread")
// 多说最近评论小工具
DUOSHUO.RecentCommentsWidget(".ds-recent-comments")
// 百度分享
window._bd_share_main.init()
// 百度统计
_hmt.push(['_trackPageview', location.pathname + location.search])
//MathJax
if (typeof MathJax !== 'undefined')
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
//google analytics
if (typeof ga !== 'undefined') // support google analytics
ga('send', 'pageview', location.pathname + location.search);
//google code prettify
if (typeof prettyPrint !== 'undefined') // support google code prettify
prettyPrint();
}
});
InstantClick.init();
</script>

以上根据自己的需要进行调整,删去对应的代码。

 收藏 (0) 更新不易,打赏吧

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《InstantClick插件-让网页提前预加载 提升网站访问速度》
文章链接:https://www.xiapilu.com/web/wordpress-plugin/instantclick.html
分享到: 生成海报

热门文章

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活