5.9中增强的延迟加载性能

WordPress 5.5中引入了延迟加载图像及以后扩展到WordPress 5.7中的iframe在即将发布的WordPress 5.9版本中,这两个版本的实现都得到了一些微调,以提高性能。

21年年中的性能分析发现,WordPress的延迟加载实现导致了轻微的性能下降在中最大含量油漆指标(LCP)。如参考职位,原因是初始视口中的图像和iframe将被标记为惰性加载,因为WordPress实现将用标记几乎所有图像loading=“懒惰”。上述帖子进一步解释了可以通过跳过添加加载=“惰性”对于第一个内容图像或iframe公司iframe公司 iFrame是内联框架的缩写。iFrame用于在网页中加载另一个HTML文档并呈现它。该HTML文档还可能包含JavaScript和/或CSS,在用户浏览器解析iFrame标记时加载。,在大多数情况下,它将出现在初始视口中。WordPress只能对此进行有根据的猜测,而不能100%确定,但一项考虑了50个流行主题的分析表明增强增强 增强是对WordPress的简单改进,例如添加挂钩、新功能或对现有功能的改进。全面改进了LCP,页面加载速度提高了30%。WordPress 5.9现在实现了这种改进从而提高LCP性能。

它是如何工作的

到目前为止,可以使用wp_img_tag_add_loading_attrwp_iframe_tag_add_loading_attr过滤器,这些仍然像以前一样可用。然而,为了在不需要开发人员自定义行为的情况下提高即时可用的性能,WordPress现在将跳过页面上第一个“内容图像或iframe”的延迟加载。这里的术语“content-image or iframe”表示在当前主查询中任何帖子的内容中找到的任何图像或iframe循环 Loop是WordPress用来显示文章的PHP代码。使用The Loop,WordPress处理要在当前页面上显示的每个帖子,并根据它与The Loop标记中指定的标准的匹配程度设置其格式。循环中的任何HTML或PHP代码都将在每个帖子上处理。https://codex.wordpress.org/The_Loop.还有任何特色图片并被选为亮点论文 特色图片是博客存档页面上使用的主图片,当帖子或页面在社交媒体上共享时,会被提取。该图像可以用于在站点的小部件区域或帖子摘要列表中显示。这样一个职位。这适用于“单一”和“存档”内容:在“单一”上下文中,(唯一)帖子的第一个图像或iframe不会延迟加载,而在“存档”上下文中则是第一查询中的帖子没有延迟加载。

自定义行为

不延迟加载的方法第一内容图像或iframe可以正确增强大多数主题的LCP性能,这些主题使用单列布局来发布内容。对于具有多列等替代布局的主题wp_omit_loading_attr_threshold上限 滤波器过滤器 过滤器是两种挂钩之一https://codex.wordpress.org/Plugin_API/挂钩。它们为函数修改其他函数的数据提供了一种方法。它们与Actions相对应。与Actions不同,过滤器是以孤立的方式工作的,不应该有副作用,例如影响全局变量和输出。现在可用,可用于更改方式许多的在第一个图像/iframe中,应该跳过延迟加载-根据上述,默认值为1。如果根据布局,主题作者可能在初始视口中有多个内容图像/iframe,建议使用此过滤器。

例如,一个主题在其档案中使用三列帖子网格,可以利用过滤器覆盖阈值在存档页面上,这将导致第一个内容图像/iframe未延迟加载。以下代码片段说明了这可能是什么样子:

函数skip_lazyloading_on_first_three_archive_images($omit_threshold){if(is_home()||is_archive()){返回3;}返回$omit_threshold;}add_filter('wp_omit_loading_attr_threshold','skip_lazyloading_on_first_three_archive_images');

对延迟加载实现的改进应该会显著提高大多数依赖它的站点的LCP性能,同时不会对上面描述的默认启发式不适用的站点产生不利影响。但这只是一个坚实的起点。未来,特别是使用更加语义化的内容规范 块是一个抽象术语,用于描述使用WordPress编辑器组合在一起形成网页内容或布局的标记单元。这个想法结合了过去可能通过短代码、自定义HTML实现的概念,并将发现嵌入到单一一致的API和用户体验中。-基于主题将有助于,我们将能够使用可用的块信息进一步微调延迟加载实现。

有关上述更改的更多背景信息,请参阅#53675.

道具到@阿达姆西尔弗斯坦@audrasjb公司用于审核和校对。

#5-9,#开发说明,#特征-酶负荷,#性能

优化WordPress核心的延迟加载实现

自从图像延迟加载功能最初是在5.5中添加到WordPress核心中的,默认情况下,每个帖子内容图像以及使用wp_get_attachment_image()功能(其中包括特色图片)加载缓慢。此优化遵循其他项目中该功能的典型实现,而不考虑图像是否出现在折叠上方或下方。由于当时可用的度量标准,决定保留细粒度控制,以避免将某些图像延迟加载给主题作者,因为图像的位置在很大程度上取决于当前的主题布局。另请参阅原始公告栏:

建议主题开发人员细粒度地处理加载图像所依赖的任何时间的属性wp_get_attachment_image()或基于它的其他函数(例如post_thumbnail()获取自定义日志()),取决于它们在模板中的使用位置。例如,如果图像放置在页眉模板,并且很可能位于初始视口中,建议跳过加载该图像的属性。

那是最近的事发现当前WordPress的延迟加载核心实现还有改进的空间因为它可以回归最大含量油漆指标(LCP)当折叠上方的英雄图像被懒散地加载时。因此,应该对现有延迟加载实现的默认行为进行细化,以便更好地考虑到这一细微差别。

省略加载某些元素的属性

如前所述,WordPress核心核心 核心是运行WordPress所需的一组软件。核心开发团队构建WordPress。无法可靠地评估图像是否会出现在折叠上方或下方,因为这取决于当前活动的主题。此外加载属性是在服务器端添加的,它不知道影响客户端的因素,如视口大小。由于这些原因,对延迟加载图像(和iframe)的细粒度控制仍然由主题作者负责。然而,我们可以微调WordPress核心的延迟加载实现,以改善绝大多数情况下的情况,实现更好的现成LCP值。

现在,有人可能会争辩说,应该再次完全消除惰性负载,以避免对LCP产生任何负面影响。然而,这也将消除延迟加载带来的所有好处,即减少带宽和浪费更少网络网络 (与网站、博客相比)资源,其本身可以影响核心网络生命值(CWV)指标。这里最好的默认行为是在这些权衡之间找到一个坚实的中间地带。这导致WordPress核心实现的目标如下:

默认情况下,第一个“x”内容图像不应延迟加载,“x”应尽可能高,以便几乎没有LCP回归,回归回归,回归 破坏或降级以前工作过的东西的软件错误。回归通常被视为关键错误或拦截器最近的回归可能会得到更高的优先级。“3.6回归”是3.6中的一个缺陷,它在3.5中起到了预期的作用。并且尽可能低,以便加载的总字节中几乎没有回归。

(请注意,这也包括iframe,但它们很少用作英雄元素,因此为了简单起见,本文主要提到图像。)

为了确定“x”的正确值(即默认情况下从延迟加载中省略的图像/iframe的数量),我使用一个小原型的两个版本进行了分析插件插件 插件是一个包含一组功能的软件,可以添加到WordPress网站。他们可以扩展功能或为WordPress网站添加新功能。WordPress插件是用PHP编程语言编写的,并与WordPress无缝集成。这些可以在WordPress.org插件目录中免费https://wordpress.org/插件/或者可以是第三方基于成本的插件这样可以防止加载=“惰性”属性分别添加到前1或2个内容图像。分析基于以下方法:

  • 测试整个50个最受欢迎的主题根据wordpress.org网站WordPress.org网站 用户创建和共享WordPress代码的社区网站。您可以在这里下载WordPress核心、插件和主题的源代码,以及社区对话和组织的中心位置。https://wordpress.org/热门主题搜索
  • 在没有任何插件激活的演示站点上进行测试(除了懒惰加载的原型插件),以获得一个包含5个帖子的存档视图(其中每个帖子都有一个特色图片并被选为亮点论文 特色图片是博客存档页面上使用的主图片,当帖子或页面在社交媒体上共享时,会被提取。该图像可以用于在站点的小部件区域或帖子摘要列表中显示。)对于单个帖子视图(其中帖子有一个特色图片以及其内容中的5个图片),即。2种不同类型的URL
  • 测试2个视口、“移动”和“桌面”
  • 使用网页测试对于单个场景(总共200个),每个场景运行9次测试,以抵消差异并依赖中间结果

该分析得出以下结果:

  • 省略第一个内容图像惰性负荷导致无导线心脏起搏器的中值改善7%(与当前核心行为的2020ms相比,1877ms),图像字节中值增加了0%(368KB与当前核心行为的369KB相比)。省略第一个内容图像显然会导致LCP改进,而不会明显地对保存的图像字节进行倒退。
  • 省略前两个内容图像由于懒惰,LCP平均改善了5%(1927ms,与当前核心行为的2020ms相比),图像字节中值增加了2%(378KB与当前核心行为的369KB相比)。忽略前两个内容图像对这两个指标产生的结果都比只忽略前一个指标的结果差,即最好只跳过第一个内容图像的延迟加载,因此不需要对数量更多的图像进行额外的测试。
  • 与完全禁用延迟加载的结果相比,这两个修复实际上在LCP中执行得更好。这证实了完全禁用延迟加载并不是问题的解决方案。
  • 进一步深入研究省略第一个内容图像,42%的情景导致LCP的中位改善超过10%,最大改善为33%。5%的情景导致LCP中位数恶化10%以上,最大值为21%。虽然所有主题的LCP改进中值仅为7%,但大量主题都有较大的显著胜利,而显著的损失最小。
与所有测试场景中的当前行为相比,修复的相对LCP更改

根据延迟加载对LCP回归的发现以及对潜在修复的分析,正在为WordPress 5.9提出以下对核心延迟加载实现的改进:

  • 默认情况下,不是延迟加载所有图像和iframe,而是第一个内容图像(也考虑特色图像)或内容iframe公司iframe公司 iFrame是内联框架的缩写。iFrame用于在网页中加载另一个HTML文档并呈现它。该HTML文档还可能包含JavaScript和/或CSS,在用户浏览器解析iFrame标记时加载。不应延迟加载。
  • 这是一个比当前实现使用的更敏感的默认值,平均而言,在规模上,这将带来更好的LCP开箱即用性能,同时保持必要的低带宽。
  • 尽管默认行为发生了这种变化,但对哪些元素应该延迟加载的细粒度控制仍由主题作者负责。作为主题作者,仍然建议您指定加载主题所呈现图像的属性值。如果你的主题依赖于不太标准的布局,比如帖子的网格或滑块视图,或者帖子内容只出现在页面的下方,请特别注意。

A类Trac公司Trac公司 Edgewall Software的一个开源项目,用作WordPress的错误跟踪和项目管理工具。 为bug报告和bug跟踪器上的功能开发创建。用于添加此增强增强 增强是对WordPress的简单改进,例如添加挂钩、新功能或对现有功能的改进。至核心已在中打开#53675供进一步审查和讨论。

道具到@阿多约斯马尼,@亚当西尔弗斯坦,@德斯罗什用于审核和校对。

#特征-酶负荷

5.7中的延迟加载iframes

在WordPress 5.7中,iframe默认为惰性加载,使用浏览器级别加载属性这将为iframes带来相同的性能优势延迟加载图像引入WordPress 5.5.

与影响图像的方式类似,WordPress将添加加载=“惰性”只有那些iframe公司同时具有这两者的标记宽度高度属性,以避免对布局转换产生任何感知到的负面影响。使用wp_filter_content_tags()在WordPress 5.5中引入的函数,特别考虑到了可扩展性,现在允许重用它来实现这个新的性能特性。由于延迟加载iframe的考虑事项与延迟加载图像的考虑事项类似,请参阅原始图像延迟加载公告帖子以及这篇关于浏览器级延迟加载的文章有关该主题的背景信息。

另请参见#50756对于 为bug报告和bug跟踪器上的功能开发创建。此功能的使用位置。

对oEmbed内容的影响

默认情况下,WordPress将添加加载=“惰性”属性设置为以下iframes:

  • 帖子内容中的iframes(_内容)
  • 文章摘录中的iframes(Exchange(_E))
  • 文本小部件中的iframe(小部件文本内容)

WordPress网站上使用的大多数iframe通常来自o嵌入式集成,它将自动转换统一资源定位地址统一资源定位地址 互联网上网站或网页的特定网址,例如网站的URL www.wordpress.org当粘贴到编辑器中时,将某些网络平台资源(如推特或YouTube视频)粘贴到引用的嵌入式媒体中。

这些的标记iframe公司标记由各自的web服务控制,只有其中一些web服务遵循提供的最佳实践宽度高度属性。由于WordPress无法猜测嵌入资源的维度加载=“惰性”只有在oEmbediframe公司 标签标签 Subversion中的目录。WordPress使用标签来存储版本(3.6、3.6.1等)的单个快照,这是版本控制系统中标签的常见约定。(不要与帖子标签混淆。)提供了两个维度属性。

自定义延迟加载iframe

开发人员可以自定义iframe是否以及如何延迟加载,其方式与图像加载方式类似滤波器过滤器 过滤器是两种挂钩之一https://codex.wordpress.org/Plugin_API/挂钩。它们为函数修改其他函数的数据提供了一种方法。它们与Actions相对应。与Actions不同,过滤器是以孤立的方式工作的,不应该有副作用,例如影响全局变量和输出。是现有的wp_lazy_loading_enabled,向前将返回真的对于iframe公司标签。

例如,如果您希望默认情况下关闭post内容中iframe的延迟加载,可以使用以下代码段:

函数disable_post_content_iframe_lazi_loading($default、$tag_name、$context){if(“iframe”===$tag_name&&“thecontent”===$context){返回false;}return$default;}添加筛选器(“wp_lazy_loading_enabled”,'禁用post_content_iframe_lazy_loading',10,);

此外,还有一个新的wp_iframe_tag_add_loading_attr允许自定义特定iframe公司标签。例如,您可以使用此筛选器跳过加载属性iframe公司iframe公司 iFrame是内联框架的缩写。iFrame用于在网页中加载另一个HTML文档并呈现它。该HTML文档还可能包含JavaScript和/或CSS,在用户浏览器解析iFrame标记时加载。可能会出现在最初可见的视口中避免影响“最大内容绘画”指标。筛选器与相关的具有相同的签名wp_img_tag_add_loading_attr图像过滤器。

下面是一个示例代码片段,它将禁用在帖子内容中嵌入YouTube视频的延迟加载iframe:

函数skip_loading_lazy_youtube_iframes($value,$iframe,$context){if('thecontent'===$context&&false!==strpos($iframe,'youtube.com')){返回false;}返回$value;}添加筛选器('wp_iframe_tag_add_loading_attr','skip_loading_lazy_youtube_iframes',10,);

请参阅图片延迟加载公告帖子的“定制延迟加载”部分以获取更多指导。

道具@audrasjb公司用于校对。

#5-7,#开发说明,#特征Lazyloding

在5.5中延迟加载图像

在WordPress 5.5中,默认情况下图像将延迟加载,使用本机HTML加载属性哪一个2020年初成为网络标准这将大大节省服务器和用户代理的带宽,因为在这些站点上,图像通常会在页面下方立即加载,即使用户可能永远不会向它们滚动。

默认情况下,WordPress将添加加载=“惰性”致所有人国际货币基金组织具有宽度高度属性存在。从技术上讲,这是在页面输出中处理的,类似于WordPress中通过添加src设置尺寸属性。为了提高这两个功能的服务器端性能wp_filter_content_tags()引入了函数,以便国际货币基金组织标签只需要解析一次,然后将修改推迟到与功能相关的更具体的函数。

请参见#44427对于整体而言Trac公司Trac公司 Edgewall Software的一个开源项目,用作WordPress的错误跟踪和项目管理工具。 为bug报告和bug跟踪器上的功能开发创建。.

减少布局变化是前提

现代网站中一个常见的用户体验问题是布局移动,通常是由图像等媒体资源加载缓慢引起的:默认情况下,只有在加载图像后,浏览器才能正确布局页面,从而导致图像下方的内容发生偏移。这个问题可以是通过提供宽度高度上的属性国际货币基金组织标签,因为浏览器将使用它们来确定图像的纵横比,以便推断页面布局向前地实际加载图像。

虽然这在没有延迟加载图像的情况下已经是一个主要问题,但随着延迟加载的出现,它变得更加重要。因此WordPress只会添加loading=“懒惰”国际货币基金组织具有两个维度属性的标记。同时,解决潜在问题对于减少总体布局变化同样重要,这就是为什么WordPress 5.5版将开始反填充宽度高度上的属性国际货币基金组织标签,如果它们还不存在。为此,它重用已建立的逻辑来确定src设置尺寸属性。与那些属性一样,宽度高度只能确定图像是否用于WordPress附件,以及国际货币基金组织 标签标签 Subversion中的目录。WordPress使用标签来存储版本(3.6、3.6.1等)的单个快照,这是版本控制系统中标签的常见约定。(不要与帖子标签混淆。)包括相关的wp-image-$id类。

WordPress主要遵循这一最佳实践,并且正在进行工作以确保编辑器中的所有图像都具有宽度高度。只要主题的CSS公司CSS公司 级联样式表。与经典编辑器内容配合使用。,应该是:如果图像宽度高度通过CSS修改,相应的其他属性应设置为汽车,以避免图像被拉伸。

请参见#50367有关此更改的更多背景信息。

自定义延迟加载

默认情况下,WordPress会添加加载=“惰性”属性设置为以下图像:

  • 帖子内容中的图像(_内容)
  • 文章摘录中的图像(Exchange(_E))
  • 文本小部件中的图像(小部件文本内容)
  • 化身阿凡达 化身是一种图像或插图,专门指代表在线用户的角色。它通常是出现在用户名旁边的方框。图像(获取增值税)
  • 模板图像使用wp_get_attachment_image()(wp_get_attachment_image(获取附件图像))

开发人员可以通过各种过滤器自定义此行为,最基本的是wp_lazy_loading_enabled(已启用wp_lazy_loading_enabled),它接收以下参数:

  • $违约:的布尔默认值真的滤波器过滤器 过滤器是两种挂钩之一https://codex.wordpress.org/Plugin_API/挂钩。它们为函数修改其他函数的数据提供了一种方法。它们与Actions相对应。与Actions不同,过滤器是以孤立的方式工作的,不应该有副作用,例如影响全局变量和输出。.
  • $标记名:一个HTML格式HTML格式 超文本标记语言。主要用于在web浏览器中输出内容的语义脚本语言。标记名称。而根据当前WordPress的行为,这将永远是国际货币基金组织,应该注意的是这个加载属性是通用属性并且可以在将来扩展以支持更多元素,例如iframe。
  • $上下文:作为附加参数的上下文字符串,指示图像的技术来源,通常是WordPress挂钩名称。基于WordPress本身如何使用惰性加载,上下文可以是上面列表中括号中的五个值之一.

例如,如果您希望默认情况下关闭模板图像的延迟加载,可以使用以下代码段:

函数disable_template_image_lazy_loading($default、$tag_name、$context){if('img'===$tag_name&&'wp_get_attachment_image'===$context){返回false;}return$default;}添加筛选器(“wp_lazy_loading_enabled”,'禁用模板图像加载',10,);

为了修改特定图像的加载属性,根据图像的类型,有两种不同的方法:

对于出现在内容blob中的图像(例如。_内容,Exchange(_E),小工具_文本_内容),另一个新过滤器wp_img_tag_add_loading_attr可以使用,它接收以下参数:

  • 价值$:加载属性值,可以是“lazy”(默认)、“eager”或。如果要禁用图像的延迟加载,强烈建议指定这样属性就完全被省略了。
  • $图像:整个图像HTML标记及其属性。
  • $上下文:上下文,与上面另一个筛选器的描述类似。

例如,如果要在帖子内容中禁用ID为42、大小为“大”的特定附件图像的延迟加载,可以使用以下代码段:

函数skip_loading_lazy_image_42_large($value、$image、$context){if('thecontent'===$context){$image_url=wp_get_attachment_image_url(42,“大”);if(false!==strpos($image,'src=“'.$image_url.'”'){返回false;}}返回$value;}添加筛选器('wp_img_tag_add_loading_attr',“skip_loading_lazy_image_42_large”,10,);

对于通过输出的图像wp_get_attachment_image(),可以通过函数的$属性参数,可以是与价值$上述过滤器的参数。为了不延迟加载图像,属性值为应该指定,这将导致省略属性。例如:

回显wp_get_attachment_image(42,“大”,错误,数组(“加载”=>false),);

建议主题开发人员细粒度地处理加载图像所依赖的任何时间的属性wp_get_attachment_image()或基于它的其他函数(例如post_thumbnail()获取自定义日志()),取决于它们在模板中的使用位置。例如,如果图像放置在页眉模板,并且很可能位于初始视口中,建议跳过加载属性。

标记为等待延迟加载的图像需要浏览器解析图像在页面上的位置,它依赖于交叉口观察员可用因此,到今天为止,他们的抓取稍有延迟。在Android上使用Chrome的实验表明加载=“惰性”上的初始视口中的图像含量最高的油漆度量值相当小回归,回归回归,回归 破坏或降级以前工作过的东西的软件错误。回归通常被视为关键错误或拦截器最近的回归可能会得到更高的优先级。“3.6回归”是3.6中的一个缺陷,它在3.5中起到了预期的作用。与未加载的图像相比,在第75和99百分位上小于1%,但主题开发人员可以应用一些微调以获得更好的用户体验,这是一个考虑因素。

请参见#50425有关此更改的更多背景信息。

浏览器兼容性

这个加载现代浏览器广泛支持属性,有增加的趋势:例如,虽然在发布时Safari支持还不可用,该功能也正在开发中,并且已经被合并到基础WebKit引擎中.

然而,即使是目前不支持加载属性不会因WordPress在图像上提供属性而产生任何负面影响,因为本机的延迟加载机制是作为一个完整的进步的增强增强 增强是对WordPress的简单改进,例如添加挂钩、新功能或对现有功能的改进。:对于这些浏览器,该属性将被忽略。这也意味着,无论何时浏览器实现对该功能的支持,其用户在浏览WordPress支持的网站时都会立即获得好处。

道具@阿佐兹感谢你帮我写这篇文章。

#5-5,#开发说明,#特征-酶负荷

图像的延迟加载在内核中

按照计划补丁补丁 一种特殊的文本文件,通过标识添加、删除和更改的文件和行来描述代码的更改。它也可以称为差异。补丁可以是应用到代码库进行测试。用于添加加载属性到国际货币基金组织标记现在已提交给核心核心 核心是运行WordPress所需的一组软件。核心开发团队构建WordPress。(请参见#44427).

根据初步测试,似乎与大多数插件实现图像的延迟加载。尽管如此,强烈建议这些插件的作者在大旅行箱大旅行箱 Subversion中的一个目录,包含为下一个主要发布周期做准备的最新开发代码。如果您运行的是“trunk”,那么您使用的是最新版本。(WordPress 5.5-alpha)并确认其插件按预期工作。

如果实现延迟加载的插件更新以利用新的核心功能和过滤器,并使用新的加载 HTML格式HTML格式 超文本标记语言。主要用于在web浏览器中输出内容的语义脚本语言。属性。请参阅https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img加载https://html.spec.whatwg.org/multipage/urls-and-fetching.html懒惰-加载-属性.

A类开发说明开发说明 WordPress Core中的每个重要更改都记录在开发人员备注中(通常称为开发备注)。好的开发注释通常包括对更改的描述、导致此更改的决策,以及对开发人员应该如何处理此更改的描述。在WordPress发布周期的测试阶段,开发人员的笔记会发布在Make/Core博客上。当插件/主题作者和WordPress开发人员需要了解这些更改时,发布开发注释尤其重要。通常,所有开发注释都在候选发布阶段开始时编译到Field Guide中。有关实现和如何自定义行为的更多详细信息,将在WordPress 5.5版本发布。

#特征-酶负荷

开发人员聊天摘要–2020年3月25日

@弗朗西纳促进了聊天这个议程.

Slack上的完整会议记录

这个设备标志着5.4发布周期.

公告

WordPress 5.4候选版本4发布2020年3月24日星期二,一切进展顺利。

@audrasjb公司共享了WP自动更新的更新功能插件功能插件 一个插件,其创建目的是最终被提议包含在WordPress Core中。请参见作为插件的功能.:这是从他的个人githubgithub GitHub是一个提供git存储库在线实现的网站,其他开发人员可以轻松地共享、复制和修改这些存储库。公共存储库可以免费托管,私有存储库需要付费订阅。GitHub引入了“拉请求”的概念,在将贡献者在分支中所做的代码更改合并为存储库所有者之前,可以对其进行审查和讨论。https://github.com/解释到WordPress/wp-autoupdates这是该项目新的官方GitHub存储库。这个#核心自动更新该团队将尝试在WP5.4发布之前发布版本0.4。这个新版本旨在处理主题的自动更新。

@非洲裔要求审查一些Trac门票这些都与主题兼容性检查相关,并且可能与自动更新功能交互。想法是运送它们早期的在WordPress 5.5中。

@为什么是杰克指出他非常喜欢正在进行的工作#核心自动更新 松弛(Slack)松弛(Slack) Slack是一个协作群聊平台https://slack.com网站/WordPress社区在https://make.wordpress.org/chat/.频道,并认为尝试在接下来的几个版本中登陆会很好。相关的,他很想看看#核心密码(双因素认证–2FA)土地核心核心 核心是运行WordPress所需的一组软件。核心开发团队构建WordPress。也是。在他看来插件插件 插件是一个包含一组功能的软件,可以添加到WordPress网站。他们可以扩展功能或为WordPress网站添加新功能。WordPress插件是用PHP编程语言编写的,并与WordPress无缝集成。这些可以在WordPress.org插件目录中免费https://wordpress.org/插件/或者可以是第三方基于成本的插件在这一点上,它是如此成熟,以至于忽略它几乎就像是一个疏忽。@为什么是杰克正在处理合并建议。

@阴毛提出有必要确保2FA提案也强调了如何解决用户锁定自己的问题(这是之前的主要阻碍)。

@阿佐兹宣布图像延迟加载属性的补丁已准备好进行测试.

即将发布的版本

当前专业为5.4,计划于2020年3月31日毕业;请继续测试所有的错误!

有两种方法:

行李箱大旅行箱 Subversion中的一个目录,包含为下一个主要发布周期做准备的最新开发代码。如果您运行的是“trunk”,那么您使用的是最新版本。已于3月初增至5.5。这意味着5.5正式进入Alpha。

@弗朗西纳宣布为5.6工作–这将是一个全女子释放–已开始向表示感兴趣的女性发送首轮信息。@安格拉斯金 @弗朗西纳克洛伊·布林曼正在联系他们,询问他们是否仍感兴趣,他们有什么技能,以及他们的期望是什么。

组件签入

@弗朗西纳分享了更改组件签入的建议。这总是在聊天结束时进行,感觉很匆忙。从来没有时间深入研究他们可能提出的话题。Francesca分享了两个想法:

  1. 安排每周发布一篇帖子,让他们可以留下状态更新,比如社区代表.
  2. 采用一个Slack Bot,每周会要求维护人员更新一次状态:可能是在新的组件维护器松弛通道。Core正忙于Trac公司Trac公司 Edgewall Software的一个开源项目,用作WordPress的错误跟踪和项目管理工具。Travis机器人和RSS。

@约十亿美元补充道,尝试每周发布一篇帖子可能是个好主意。也许每周二都有,这样就可以在周三进行开发聊天了,以防出现任何问题。

@弗朗西纳提议与#元设置并试驾8周。

开放式地板

@isabel_监狱建议创建一套Internet Explorer支持指南。这个CSS公司CSS公司 级联样式表。团队有点决定开始反对它,而“优雅降级”似乎是一种前进的好方法,这意味着Core可以使用不受支持的技术进行非必要的增强。Isabel想就这里的“关键”达成一致,并创建了一个Trac 为bug报告和bug跟踪器上的功能开发创建。开始讨论:#49696

@帕尔约阿希姆建议平底船平底船 投稿人在谈论门票时有时会使用动词“punt”。这意味着它将被推出到未来的版本中。这种情况通常发生在发行周期即将结束时优先级较低、没有“晋级”的票证上。在这个词的口语用法中,它的意思是延迟或模棱两可。(它还描述了美式足球中的一场比赛,一支球队基本上放弃了一个机会,希望以后能把自己放在一个更好的位置上再试一次。)默认全屏模式为5.5古腾堡项目GitHub存储库上有一个拉请求,以提供一种替代方法.

@audrasjb公司他指出,这项请求中的提议将比目前的实施更好。

@为什么是杰克补充道,这对于WP5.4来说不是一个现实的改变,它只是一个概念验证,并不是一个经过充分测试的功能。

@弗朗西纳证实了@哑光决定在WordPress 5.4中提供此功能。马特也在Accessibility Team声明帖子中发表了评论.

@高兴地表示当担忧被忽视时,很难做出贡献。@圣沙波恩她回答说,她能理解他们是如何被忽视的。很多研究都是单独完成的,通常很难记住要重述自己的研究。为了在年底前实现完整的网站编辑,这项工作可以开始带来渐进的变化。这一变化让人感到非常不安,但更令人担忧的是,在这里和完整站点编辑之间没有任何中间点。

@彼得威尔逊公司,@阴毛@audrasjb公司同意自RC4发布以来,恢复此更改是不现实的。讨论可以在验尸后发布在Make/Core上。

#5-4,#5-5,#5-6,#开发聊天,#功能-自动更新,#特征-酶负荷,#双因素

延迟加载更新

由于通过本机延迟加载图像加载属性为建议添加到WordPress核心,有不少更新。随着WordPress 5.4发布周期的进入贝塔贝塔 一种预先发布的软件,分发给大量用户在真实条件下进行试用。Beta版已经在内部进行了alpha测试,在外观、感觉和功能上与最终产品相当接近;然而,设计变更经常作为过程的一部分发生。大约两周前,没有多少时间测试功能插件并创建适当的核心核心 核心是运行WordPress所需的一组软件。核心开发团队构建WordPress。 补丁补丁 一种特殊的文本文件,通过标识添加、删除和更改的文件和行来描述代码的更改。它也可以称为差异。补丁可以是应用到代码库进行测试。该功能现在旨在作为WordPress 5.5的一部分发布,在发布周期的早期进行合并,以便在与平台完全集成的同时进行进一步测试。这篇文章是对最初公告的后续,提供了有关最新更新的信息。

标准化加载属性

这个WHATWG规范拉动请求用于添加加载属性到国际货币基金组织最近合并了可能值为“eager”和“lazy”的元素,因此它现在是HTML格式HTML格式 超文本标记语言。主要用于在web浏览器中输出内容的语义脚本语言。生活水平(见总则关于延迟加载属性的段落和更具体的有关的信息国际货币基金组织 加载属性). 这是WordPress提供该功能支持的一个要求。虽然还不清楚这是否会在WordPress 5.4发行版(现在已经有了)的时候发生,但5.5时间表确实适用,因为现在该功能可以在初始测试版之前合并。

浏览器支持

在本次发布时,Chrome(76+)、Edge(79+)和Opera(64+)已经支持加载属性。Firefox支持最近被合并,并打算在版本75中登陆。WebKit支持正在积极进行,所以在Safari中看到特色土地也在望。我们将监控浏览器供应商如何采用该标准,但随着最近的发展,该标准看起来很有前景。所有主要浏览器都将支持加载按时间属性WordPress 5.5发布(目前为2020年8月11日)。请参阅caniuse.com网站用于当前更新。

的状态功能插件功能插件 一个插件,其创建目的是最终被提议包含在WordPress Core中。请参见作为插件的功能.

这个WordPress核心中用于延迟加载图像的功能插件(GitHub存储库)状态良好,可以使用。确切的实现正在经历一些变化,主要集中在优化机制以添加加载属性到帖子内容中的图像以供性能将其与现有正则表达式组合在核心中添加src设置尺寸属性。这些更改可能会影响原始帖子中概述的新API开发说明开发说明 WordPress Core中的每个重要更改都记录在开发人员备注中(通常称为开发备注)。好的开发注释通常包括对更改的描述、导致此更改的决策,以及对开发人员应该如何处理此更改的描述。在WordPress发布周期的测试阶段,开发人员的笔记会发布在Make/Core博客上。当插件/主题作者和WordPress开发人员需要了解这些更改时,发布开发注释尤其重要。通常,所有开发注释都在候选发布阶段开始时编译到Field Guide中。关于确定状态的信息将在WordPress 5.5版本发布时发布。

这个插件插件 插件是一个包含一组功能的软件,可以添加到WordPress网站。他们可以扩展功能或为WordPress网站添加新功能。WordPress插件是用PHP编程语言编写的,并与WordPress无缝集成。这些可以在WordPress.org插件目录中免费https://wordpress.org/插件/或者可以是第三方基于成本的插件准备接受广泛测试。它已经经历了一些测试,但我们正在寻找更多的测试人员!我们也希望收到关于实施的任何类型的反馈。

#特征-酶负荷

在WordPress核心中延迟加载图像

几年来,延迟加载图像一直是显著提高页面加载性能的常用机制。仅WordPress生态系统就有支持延迟加载的无数插件.

虽然历史上加载懒惰的图像需要自定义JavaScript脚本JavaScript脚本 JavaScript或JS是一种面向对象的计算机编程语言,常用于在web浏览器中创建交互效果。WordPress广泛使用JS以获得更好的用户体验。当PHP在服务器上执行时,JS在用户浏览器中执行。https://www.javascript.com/.-基于的方法,现在有一个本地web解决方案,它完全依赖于新的加载上的属性国际货币基金组织标记并提供标准化的用户体验,而不会改变内容。这个加载属性的HTML规范即将完成和是已经被多个浏览器支持,包括Chrome和Edge.

启用WordPress内容中图像的延迟加载大约两年前首次提出,但当时的JavaScript实现可能会引入许多边缘情况和失败。使用新的加载属性消除了这些顾虑。本文描述了建议的解决方案。

性能影响

根据HTTPArchive,图像是大多数网站最需要的资产类型,通常比任何其他资源占用更多带宽。在第90百分位,网站在桌面和手机上发送约4.7MB的图像。

web的本机延迟加载,web.dev

如果没有延迟加载,网页上的所有图像都会立即加载。这会严重影响性能,尤其是在包含许多图像的页面上。如果这些图像中有几个位于“折叠下方”,即用户无法立即看到的页面部分,则无需立即加载这些图像,甚至可能会浪费网络网络 (与网站、博客相比)资源:如果用户从未滚动到这些图像,那么它们将被加载。

由于延迟加载已成为一项必不可少的性能改进,新的加载属性规范旨在标准化行为,使其更快,并集成到web平台中。

由于WordPress默认启用本地延迟加载,这将显著影响数百万网站的性能和用户体验,而无需任何技术知识,甚至不需要知道延迟加载的概念。采用新的加载属性对WordPress来说是一个很好的机会,可以引领整个web更快的发展。

技术解决方案

这个加载属性当前支持两个可能的值:

  • 渴望的,在页面加载时立即加载图像
  • 懒惰的,仅当图像与视口相关时才加载图像

该实现寻求在默认情况下启用延迟加载图像,提供加载具有值的属性懒惰的在以下方面国际货币基金组织标签:

  • 帖子内容中的图像
  • 文章摘录中的图像
  • 评论中的图像
  • 文本中的图像小装置小装置 WordPress小工具是一个执行特定功能的小程序块。您可以在侧边栏中添加这些小部件,也称为网页上的小部件就绪区域。WordPress小部件最初是为了提供一种简单易用的方式,为用户提供WordPres主题的设计和结构控制。内容
  • 通过渲染的单个图像wp_get_attachment_image()
  • 阿凡达阿凡达 化身是一种图像或插图,专门指代表在线用户的角色。它通常是出现在用户名旁边的方框。通过渲染的图像获取增值税(_avatar)

请注意加载=“惰性”仅当相应的标签标签 Subversion中的目录。WordPress使用标签来存储版本(3.6、3.6.1等)的单个快照,这是版本控制系统中标签的常见约定。(不要与帖子标签混淆。)尚未包含加载属性。换句话说,为了防止延迟加载图像,建议指定加载=“急切”.

为开发人员定制

请注意,下面概述的定制功能及其具体工作方式可能会发生变化。

虽然上面列出的图像在默认情况下是延迟加载的,但开发人员将能够在全局和每个图像的基础上覆盖此行为。

一个新的滤波器过滤器 过滤器是两种挂钩之一https://codex.wordpress.org/Plugin_API/挂钩。它们为函数修改其他函数的数据提供了一种方法。它们与Actions相对应。与Actions不同,过滤器是以孤立的方式工作的,不应该有副作用,例如影响全局变量和输出。 wp_lazy_loading_enabled将允许打开和关闭该功能。例如,可以使用以下代码段完全禁用延迟加载:

add_filter(“wp_lazy_loading_enabled”,“__return_false”);

此筛选器还传递一个辅助参数$标记名,它是用于启用或禁用延迟加载的特定标记名,以及$上下文,通常是正在运行的当前筛选器的名称。目前,国际货币基金组织是唯一受支持的值,但由于向其他标记添加加载支持即将到来(例如,一些浏览器已经支持加载上的属性iframe公司标记),此参数存在是为了将来兼容。例如,如果您想更具体地说,并且只对图像禁用延迟加载(以便将来支持的标记默认情况下启用它),可以使用以下代码段:

添加筛选器(“wp_lazy_loading_enabled”,函数($result,$tag_name){if(“img”===$tag_name){返回false;}返回$result;},10,2);

除了允许跨整个站点进行自定义的此筛选器之外,还有另一个筛选器wp_img_tag_add_loading_attr为每个图像的单个控件过滤加载属性的值。过滤器通过国际货币基金组织标记标记包括作为第二个参数的所有属性,以及上下文,通常是当前运行的过滤器。wp_img_tag_add_loading_attr(wp_img_tag_add_loading_attr)例如,可以由当前使用替代机制延迟加载的插件用于互操作性,例如类或数据属性。但是,建议只将此作为一个过渡来完成,并且从长远来看,更新这些插件以指定加载=“急切”,在这种情况下核心核心 核心是运行WordPress所需的一组软件。核心开发团队构建WordPress。如前所述,将保持原样。

请参阅插件插件 插件是一个包含一组功能的软件,可以添加到WordPress网站。他们可以扩展功能或为WordPress网站添加新功能。WordPress插件是用PHP编程语言编写的,并与WordPress无缝集成。这些可以在WordPress.org插件目录中免费https://wordpress.org/插件/或者可以是第三方基于成本的插件有关如何自定义延迟加载行为的更多详细信息。

要求测试

建议的解决方案可用作功能插件WP插件库中的延迟加载. The插件正在GitHub上开发。非常感谢您的测试和反馈。尤其是测试与各种内容创建机制(例如块、短代码)和现有的延迟加载插件的互操作性将很有帮助。目前的目标是在未来两周内将此功能作为WordPress 5.4的一部分发布并合并。

请在插件的评论中分享您的想法、问题和想法支持论坛支持论坛 WordPress支持论坛是一个使用WordPres获取帮助和对话的地方。也是报告WordPress代码和实现错误导致的问题的地方。wordpress.org网站WordPress.org网站 用户创建和共享WordPress代码的社区网站。您可以在这里下载WordPress核心、插件和主题的源代码,以及社区对话和组织的中心位置。https://wordpress.org/,或在githubgithub GitHub是一个提供git存储库在线实现的网站,其他开发人员可以轻松地共享、复制和修改这些存储库。公共存储库可以免费托管,私有存储库需要付费订阅。GitHub引入了“拉请求”的概念,在将贡献者在分支中所做的代码更改合并为存储库所有者之前,可以对其进行审查和讨论。https://github.com/存储库。

#特征-酶负荷