页面优化:使用JS脚本实现页面链接预加载-Eswlnk Blog
智能摘要 AI
本文介绍了Instant.Page这一JavaScript插件，用于优化文章页面的预加载和缓存，提升访客浏览体验。Instant.Page能自动判断并预加载站内链接，但不包括外部链接。预加载在鼠标悬停超过65毫秒时触发。文中提供了多种引入方法，包括直接引用官方脚本、使用BootCDN加速以及通过PHP代码挂钩等方式。此外，还介绍了如何使用白名单、黑名单及全局/局部设置来控制预加载行为。需要注意的是，预加载可能增加CDN流量和服务器负担，因此需谨慎使用。

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

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

效果演示

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

页面优化:使用JS脚本实现页面链接预加载-Eswlnk Blog

引入方法

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」中选择「停用缓存」，预加载缓存效果会失效！