WordPress中的推测加载

WordPress性能团队最近发布了名为“推测加载”的新插件这使得一种同名的新技术能够在页面上自动预呈现某些URL,这可能导致页面加载时间接近即时。该功能由推测规则提供支持美国石油学会美国石油学会 API或应用程序编程接口是一种软件中介,允许程序以有限的、明确定义的方式相互交互和共享数据。是一种新的web API,它允许定义要预取或预呈现的URL类型的规则。

请安装并测试插件插件 插件是一个包含一组功能的软件,可以添加到WordPress网站。他们可以扩展功能或为WordPress网站添加新功能。WordPress插件是用PHP编程语言编写的,并与WordPres无缝集成。这些可以在WordPress.org插件目录中免费https://wordpress.org/插件/或者可以是第三方基于成本的插件在潜在考虑在WordPress中包含此类功能之前,提供反馈以告知进一步的改进核心核心 核心是运行WordPress所需的一组软件。核心开发团队构建WordPress。。您可以通过在WP中搜索“推测加载”来安装插件行政管理员 (和超级管理员),或通过性能实验室插件

WordPress中预取和预呈现的简要历史

几年来,WordPress核心提供了一个简单的资源提示API允许注射<链接>标记到HTML格式HTML格式 超文本标记语言。主要用于在web浏览器中输出内容的语义脚本语言。除其他操作外,可用于预取或预呈现某些资源的文档。虽然预取对于HTML文档的某些子资源(如第三方脚本提供程序)很有用,但预呈现只需处理资源并在屏幕外执行一些呈现,因此对整个网页都很有用。

然而,使用注入方法链接[rel=“prefetch|prerender”]标记不是很灵活,因为一旦加载HTML,就需要定义预取或预呈现的URL。提供<链接> 标签标签 Subversion中的目录。WordPress使用标签来存储版本(3.6、3.6.1等)的单个快照,这是版本控制系统中标签的常见约定。(不要与帖子标签混淆。)对于每个潜在的锚链接,用户在页面上单击都是浪费,而不提供任何错过的机会,这是一个性能优化的好机会。到目前为止,解决方案包括快速连接可用于动态插入<链接>标记来预取用户视区中的资源,这更灵活,但仍不理想,因为它可能预取过多资源,并且需要JavaScript脚本JavaScript脚本 JavaScript或JS是一种面向对象的计算机编程语言,常用于在web浏览器中创建交互效果。WordPress广泛使用JS以获得更好的用户体验。当PHP在服务器上执行时,JS在用户浏览器中执行。https://www.javascript.com/图书馆。

但更重要的是,链接[rel=“prerender”]不会事实上支持prerender,因为“prerender”值实际上用于无状态预取,这意味着它仍然只是预取某些资源,而不是预渲染它们,例如,预渲染将包括运行JavaScript。最后但并非最不重要,“prerender”值已弃用此时。

投机规则API简介

这个推测规则API是一个解决上述问题的新web API。它允许定义规则,以基于用户交互动态预取和/或预呈现特定结构的URLJSON格式JSON格式 JSON或JavaScript Object Notation是结构化数据的最小可读格式。它主要用于在服务器和web应用程序之间传输数据,作为XML的替代。句法或换句话说,投机地在导航之前预加载这些URL。例如,只要用户将鼠标悬停在页面上,就可以使用此API预呈现页面上的任何链接。此外,使用推测规则API,“预呈现”事实上表示预呈现整个页面,包括运行JavaScript。一旦用户点击链接,这可能会导致近即时的加载时间,因为页面很可能已经全部加载。然而,这只是可能的配置之一。

以下代码示例显示了推测规则API JSON规范的一般语法,并概述了预呈现除WP Admin或登录URL以外的任何链接的配置。

<script type=“推测规则”>{“预呈现”:[{“source”:“文档”,“其中”:{“和”:[{“href_matches”:“/*”},{“不”:{“href匹配项”:[“/wp-login.php”,“/wp-admin/*”]}}]},“急切”:“适度”}]}</script>

推测规则API允许定义URL模式对于哪种URL应该可以进行推测加载。规则可以配置为预取或预呈现特定统一资源定位地址统一资源定位地址 互联网上网站或网页的特定网址,例如网站的URL www.wordpress.org模式。还可以指定所谓的“急切度”值,该值指示应用预取或预渲染的急切程度。例如,当用户将鼠标悬停在链接上时,值“中等”将触发推测加载。值为“conservative”会延迟此操作,直到用户单击链接(这仍然会提供相当好的性能优势),而值为“eagent”会在用户单击链接时立即执行操作。请注意,建议特别注意“急切”配置,因为它增加了浪费加载URL的可能性。

浏览器支持

虽然推测规则API已在Chrome和Edge中提供自109版起,解锁上述功能所需的特定子功能称为“文档规则”最近在版本121中添加本文介绍了最新的增强功能更深入地了解API。

换句话说,在撰写本文时,最终用户需要使用Chrome 121+或Edge 121+才能获得此功能的好处。然而,这对其他浏览器上的用户没有不利影响,因为这是一个渐进的过程增强增强 增强是对WordPress的简单改进,例如添加挂钩、新功能或对现有功能的改进。因此,无论用户群如何,在网站上使用推测规则API都是安全的。

推测规则API在W3C web标准会议TPAC 2023上提出,接收良好。此时,标准处于草稿阶段关于API的立场Firefox浏览器游猎已被请求。为了明确跟踪本文中概述的功能所需的子功能,您可以参考这张“我能用吗”桌子

推测性加载WordPress插件

如本文开头所述,WordPress性能团队最近发布了一个新功能插件“推测加载”它允许推测加载页面上链接的其他前端URL。它插入了一个类似于前面代码示例的JSON脚本。默认情况下,页面上链接的所有URL都会预先呈现为“适度”的急切配置,这通常会在将鼠标悬停在链接上时触发。因此,激活插件后您不需要做任何事情:它只是开箱即用。该插件还提供了一些自定义选项,以根据站点所有者的偏好调整行为。

推测加载插件的设置用户界面用户界面 用户界面

可以通过中新的“推测加载”部分修改默认行为设置>阅读屏幕。例如,如果站点使用的JavaScript还不适合在预呈现时加载,则可以将插件配置为仅预取文档。可以将急切程度设置为“保守”,以减少在用户没有导航到URL的情况下加载URL的可能性。或者可以将其设置为“急切”,以增加用户登录链接URL时已完成推测加载的可能性,但这可能会浪费加载多个资源。“适度”的默认在可持续性和绩效之间取得了良好的平衡。

可以使用滤波器过滤器 过滤器是两种挂钩之一https://codex.wordpress.org/Plugin_API/挂钩。它们为函数修改其他函数的数据提供了一种方法。它们是Actions的对应物。与Actions不同,过滤器是以孤立的方式工作的,不应该有副作用,例如影响全局变量和输出。称为“plsr_speculation_rules_href_exclude_paths”。例如,将URL添加到WordPress站点的插件可以使用该过滤器将这些URL从预呈现或预取中排除。 

下面是一个代码示例,它可以确保URLhttps://example.com/cart/https://example.com/cart/foo/将被排除在预取和预提交之外:

<?php(电话)添加筛选器(_F)(“plsr_speculation_rules_href_exclude_paths”,函数($exclude_path){$exclude_paths[]='/cart/*';返回$exclude_paths;});

请参阅插件的常见问题解答,了解过滤器的详细信息

潜在的后续步骤

目前,该插件应该用于测试该功能,性能团队渴望收到反馈,并分析插件在加载时的性能优势。

接下来,随着浏览器API和插件的成熟,将探索在WordPress核心中包含该功能的可能性。然而,为了实现这一目标,还需要额外的反馈。

测试和反馈

在探索其在WordPress核心中的潜在用途之前,您的测试和反馈对于改进该功能至关重要。请考虑以下帮助方式:

WordPress性能团队很高兴了解更多关于推测规则API如何在WordPres网站中使用的信息。请尝试插件并分享您的反馈!

道具@亚当西尔弗斯坦 @家蝇科昆虫 @杰里米罗曼 @瑞士风格 @调整网络 @推特新闻 @威斯顿鲁特用于审核和校对。

#特色项目,#性能,#性能指标,#投机性负荷