分享笔记:

WordPress Prefetch 预先加载页面

优化网站加载速度

什么是Prefetch?

prefetch是指一种浏览器技术,用于提前预先加载与当前页面相关的资源,以加快页面加载速度和用户体验像图片、样式表、脚本文件等。它可以告诉浏览器在后台加载指定的资源,倒是不会立即显示它们。当你需要这些资源时,它们可以更快地显示出来,因为浏览器已经提前下载好了。

WordPress里需要通过预读(prefetch)或预渲染(prerender)页面中的URL来改善用户的浏览体验。当用户把鼠标放在某个链接上时,系统会假设用户点开了该链接,并开始预读或预渲染页面内容,这样当用户真正点击时,新页面几乎可以秒加载。

比较可惜的是这个加载规则目前仍主要被基于Chromium引擎的浏览器识别,Safari和Firefox或其他浏览器目前对这个功能还没有那么完善(当前时间24年6月27日)

怎么在WordPress上使用预先加载?

WordPress 6.8 版本已经把预先加载添加到了原生态上,不需要额外下载其他的预加载插件。

如果你想要试试这个预先加载在你的网站,你可以安装不同的插件,像Speculative Loading,这个是由WordPress官方的性能团队做的,该插件使用加载规则API,在兼容的浏览器中提供网站加载速度的优化

wordpress预先加载插件

你只要把它下载过来启用它就会自己运行了,当然你也可以在它的设置界面更改一些设置,像选择预读或预渲染。

  • 预取(prefetch):仅应用于静态内容,因为如果用于加载 JavaScript 等内容,可能会导致错误。

  • 预渲染(prerender):适用于所有类型的内容,使用起来更安全。

wordpress预先加载插件

你还可以在设置中选择预读或预渲染的级别,有“积极”,“适中” 和 “保守” 三种选项,取决于你希望加载规则启动的速度。你要是想要选择其他的插件当然也是可以的,WordPress最不差的就是一样功能的不同插件。

wordpress预先加载插件

可以从推测加载中排除某些 URL 吗?

除了自动排除的 URL 之外,还有多种方法可以手动排除某些 URL。以下是被排除的 URL 列表以及如何排除它们的说明:

  1. 带有 nofollow 属性的 URL
    带有 rel="nofollow" 的链接不会被预取或预渲染,因为这些链接通常是不必要的导航链接、外部链接或冗余链接(例如“添加到购物车”、“登录”、“退出”等)。

  2. 带有 no-prerrender CSS 类的 URL
    你可以将 no-prerrender 这个 CSS 类应用到任何链接上,这样它们就不会被推测加载规则预取。

  3. 使用 wp_nonce_url() 生成的 URL 或带有 _wpnonce 查询参数的 URL
    这些 URL 也会自动从推测加载中排除,因为它们通常用于安全验证。

  4. 默认排除的 WordPress 登录和管理页面链接
    WordPress 默认不会预取登录页面或管理后台的链接。

以上的一些具体链接你可以看看之前的noopener,noreferrer 和 nofollow 标签的区别。通过这些方法你可以更灵活地控制哪些 URL 可以预加载,从而优化网站性能并避免不必要的资源消耗。

add_filter(
'plsr_speculation_rules_href_exclude_paths',
function ( array $exclude_paths ): array {
$exclude_paths[] = '/cart/*';
return $exclude_paths;
}
);

你还可以通过以上的代码完全禁止某些链接的预读或预渲染,怎么添加看WordPress添加自定义代码方法

预先加载对谷歌网站指标有帮助?

加载规则不会改善你的Google网站指标,因为目前还无法被衡量。Lighthouse引擎仅测量你要求分析的页面,而不是不同页面之间的实际浏览体验。而且我之前在优化网站速度的笔记里也说过,谷歌的速度评分经供参考,以实际浏览速度体验为主,只要你的评分不是过分的低,像20分,30分… 那么这意味着不会感受到明显的浏览速度提升?当然不是,一旦安装并激活该插件,浏览同一网站的不同URL时,速度会显著加快,效果立竿见影。

Prefetch的负面影响

如果你的分析系统,像Google Analytics,可以记录网页的加载次数,那么你会发现访问量比往常会多得多,即使用户没有真正的点击一些页面,因为每个链接都会加载两次,一次是预读,一次是实际点击。

另外,由于预读或预渲染不会存储在缓存中(该插件没有缓存功能),每次预读或预渲染都会增加服务器资源的消耗,因为每个URL都会被加载两次。如果用户最终没有点击,预读就会白白消耗资源。所以建议在安装插件后,注意一下服务器资源的消耗。

Prefetch预先加载和缓存加载的区别

缓存插件主要有两种加载方式:缓存预热(Cache Warming)或缓存预加载(Cache Preloading),这种方式是将网站上的所有或大部分URL存储在插件创建的静态缓存中,通常基于站点地图这种预加载不依赖访问或点击,它是自动运行的,为网站生成一个缓存基础,以便在实际访问时展示静态版本。

我们这里就拿缓存插件的老大哥,WP Rocket举例,它除了提供缓存功能以外,有自带prefetch预先加载功能,当用户将鼠标悬停在链接上或触摸链接超过100毫秒时,该页面的HTML内容将在后台被获取,这样当用户点击链接时,页面几乎会立即打开。

wprocket缓存插件和预先加载prefetch

这种预加载对已缓存和未缓存的URL都有效,有和刚刚提到的加载规则相同的优点和缺点。因此,建议在使用该功能时选择一个插件,而不是同时使用多个插件。

为笔记评分

平均评分 5 / 5. 摘星者: 2

有疑问?留个言吧!

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
?>

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors