众所周知,为访客创造一个良好舒适的浏览环境,文章的加载算是其中重要的一环,所以文章页面的预加载在这其中也是扮演了一个关键的角色。本次为各位站长介绍Instant.Page这个js脚本插件,它能够自动判断是否预加载文章,并且实现预缓存。

页面优化:使用JS脚本实现页面链接预加载插图
Instant.page

效果演示

经过测试,发现 instant.page 对站内访问速度的提升的确很给力。然而它只会预加载自己的站内链接,而不会预加载其他外链。如图所示,当鼠标在左侧文章链接悬停超过 65ms 后,右侧 Network 即会对文章页面进行预加载。而悬停未超过 65ms 时,则不会进行预加载。

页面优化:使用JS脚本实现页面链接预加载插图1

引入方法

GitHub项目:https://github.com/instantpage/instant.page

官方使用方法,代码添加到网站的</body>标签之前

<script src="//instant.page/1.2.2" type="module" integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>

但是此脚本是官方的,储存在国外服务器,对国内访问不太友好,可以将该JS脚本储存到自己的服务器上,点此获取该JS脚本,然后再根据以下格式在</ body> 之前引用:

<script type="module" src="存放路径"></script>

PHP代码引入

添加自定义PHP函数,对wp_footer进行挂钩。将以下代码添加到主题的functions.php文件中,即可实现站点页面预加载,也可以在footer.php中手动引入js插件。

function add_instant(){
    echo '<script type="module" src="https://cdn.bootcss.com/instant.page/3.0.0/instantpage.js"></script>';
}
add_action( 'wp_footer', 'add_instant', 100 );
//添加预加载

bootcdn加速

<script type="module" src="https://cdn.bootcss.com/instant.page/3.0.0/instantpage.js"></script>

定义预加载

白名单标签属性: data-instant ,例:

<a href="https://blog.eswlnk.com" data-instant>Eswink</a>

黑名单标签属性: data-no-instant ,例:

<a href="https://www.baidu.com" data-no-instant>百度</a>

全局允许:在 <body> 中添加 data-instant-allow-query-string 属性

局部允许:在使用的标签中添加 data-instant 属性(和白名单属性一样)

仅预加载部分指定链接(白名单模式):如果只想预加载特定的链接,请在 <body> 中添加一个 data-instant-whitelist 标签,并通过向其添加 data-instant 属性来标记要预加载的链接。

注意

预加载可能会存在增加耗费少量 CDN 流量问题,请自行对比后考虑是否使用。并且此方法可能会对您的服务器造成负担,毕竟会随时加载页面,如果在并发比较高的情况下,可能会导致服务器宕机的问题,所以需要对自己的网站进行审视后再进行添加。

谨记,本插件只是实现预加载功能,如果在「Network」中选择「停用缓存」,预加载缓存效果会失效!