Perfmatters – 任何在 WordPress 中使用即时页面预获取链接

我们的即时页面功能允许您在用户悬停在链接上后自动在后台预取 URL。 这将导致几乎瞬时的加载时间,并改善用户体验和感知性能(网站感觉有多快)。

推荐广告

<link rel=”prefetch” href=”https://domain.com/post”>

链接预获取的工作原理

在桌面上,用户将鼠标悬停在链接上,65毫秒后,它会自动开始在后台预加载 URL,这可能是一篇博客文章、一个页面、一幅图像等。

例如,如果你的徽标有一个指向主页的链接,如果它们悬停在徽标上,它会预加载你的主页。 在移动设备上,在用户开始触摸其显示器上的链接后,会预加载 URL,然后再将其释放。 就服务器和移动设备的性能提升和低利用率而言,以上是最佳组合。

如果您在移动设备(Android、iPhone)上启用了数据保护程序或低数据模式,则该功能将受到尊重。如果启用,则不会预加载任何内容。 由于此功能适用于鼠标悬停,因此不会出现在速度测试工具上。但我们鼓励您在启用网站后点击网站。 你应该能感受到不同!

具有数据属性的其他选项

您可以使用以下数据即时属性启用即时页面的其他选项。只需将这些属性中的任何一个添加到文档中的<body>标记中,我们就可以完成其余的工作。 您可以在 instant.page 上进一步了解这些不同属性的作用。有关将这些属性添加到<body>标记的一些方法,请参见下文。

data-instant-allow-query-string
data-instant-allow-external-links
data-instant-whitelist
data-instant-intensity=”mousedown”
data-instant-intensity=”mousedown-only”
data-instant-intensity=”150″
data-instant-intensity=”viewport”
data-instant-intensity=”viewport-all”
data-instant-mousedown-shortcut

在页面加载后添加 JavaScript

第一种方法是在页面加载结束时启动 JavaScript,可以将以下代码添加到Perfmatters 中的“页脚代码”框中。 假设您希望更改脚本在预加载前等待的时间(毫秒)。您可以这样添加:

<script type=’text/javascript’> document.body.setAttribute(‘data-instant-intensity’, ‘150’); </script>

一次只能使用一个 data-instant-intensity 属性,但可以将其与其他属性混合并匹配。例如,这将起作用:

<script type=’text/javascript’> document.body.setAttribute(‘data-instant-intensity’, ‘150’); document.body.setAttribute(‘data-instant-allow-external-links’, ‘true’); </script>

注意:上述方法将向您的站点添加额外请求。

与 body 标签合并

第二种方法是在呈现页面时合并现有 body 标记中的属性。这不需要额外的请求。可以将以下代码添加到 Perfmatters 中的“页脚代码”框中。 下面是一个例子:

<body data-instant-intensity=’mousedown’ data-instant-allow-external-links > </body>

在页面或文章中排除即时页面

您可以将即时页面排除在单个文章、页面或自定义文章类型上运行。

在编辑器的右侧,取消选中“即时页面”,这将从脚本中排除整个页面。

您可以通过添加 data-no-instant 属性,例如:

<a href="https://domain.com/post" data-no-instant>Post</a>

 

推荐广告

登录账户

忘记密码?

忘记密码?

输入您的账户数据,我们稍后会发送重置密码的链接。

您的密码重置链接好像无效或已过期。

登录账户

隐私政策

添加到集合

暂无集合

在这里你可以找到你之前创建的所有集合。