Weston Ruter谈解锁WordPress性能

性能优化的重要性

在WP Tavern的Jukebox播客中，Nathan Wrigley采访了长期WordPress用户和贡献者Weston Ruter。Weston作为核心提交者已有10年经验，曾共同领导WordPress 4.9发布，并在WordPress机构领域工作，同时获得赞助在核心性能团队工作。

我们开始讨论大局：为什么网站速度现在比以往任何时候都更重要，以及WordPress开箱即用的表现如何。Weston分享了衡量真实性能的细节，例如，实现完美的Lighthouse分数并不是最终目标，真正的用户体验指标如Core Web Vitals和最大内容绘制(LCP)应该塑造开发人员和网站所有者对优化的思考方式。

WordPress性能团队的进展

在整个节目中，您将了解WordPress性能团队取得的进展，从延迟加载和新图像格式，到推测性加载，这些都能从页面转换中节省宝贵的毫秒时间。Weston解释了许多性能改进如何设计为自动工作，民主化速度，即使是不懂技术的普通WordPress用户也能受益。

对话还涉及在添加功能和避免插件臃肿之间的平衡，浏览器和设备差异的隐藏影响，以及像Google这样的大公司如何与WordPress携手提高速度和可用性的标准。

实际性能测量

Weston分享了关于测量真实性能的细节，揭示实现完美的Lighthouse分数并不是最终目标。真正重要的是通过Chrome用户体验报告(CrUX)从实际用户那里收集的数据，这些数据通过Core Web Vitals指标（如Largest Contentful Paint）告诉您网站的实际表现。

良好的LCP值被认为是0到2.5秒。即使在2.5秒内，用户体验也有很大范围。如果刚好低于2.5秒，被认为是好的，但这并不意味着1.5秒的页面加载实际上要好得多，而0.5秒的页面加载更好，0.05秒的页面加载是完美的。

核心性能团队的工作历程

性能团队大约成立于四年前，从图像的延迟加载开始。通过这项工作，团队发现如果延迟加载初始视口中的图像，实际上会损害LCP指标，因为浏览器直到知道它们在视口中才开始下载这些图像。

由此产生了不延迟加载初始视口中图像的工作，以及添加称为fetch priority的属性，例如可以具有high值。因此，在WordPress核心中进行了大量工作来添加合理的默认值，例如，文章的特色图像获得fetch priority high，以便优先加载可能成为LCP的图像。

还修复了文章中的表情符号问题，在每个页面加载时，有一些JavaScript在页面头部运行，计算浏览器是否支持所有表情符号。如果浏览器不支持所有表情符号，则加载Twitter表情符号库来渲染它们。该JavaScript在性能较低的浏览器或设备中导致长任务，也损害了LCP。

还增加了对新图像格式（如AVIF和WebP）的支持，以便网站所有者可以上传这些图像格式而不是需要更长时间下载的JPEG。

推测性加载的突破

推测性加载在6.8中落地，默认情况下，当您在链接上按下鼠标或点击时，将开始预取页面的HTML，给浏览器一点先机。然后API允许您更积极地开始这个过程，例如当您悬停在链接上时，不仅预取HTML，而且实际渲染整个页面。

在演讲中，Weston展示了无推测性加载、WordPress核心当前的默认推测性加载、适度预取和最后适度预渲染之间的区别。

使用适度预取，浏览器可以在后台完全加载页面。然后在这种情况下，首次字节时间变为零，因为整个页面已经在浏览器的缓存中。使用适度预渲染，当您悬停在该链接上时，浏览器不仅下载HTML，还下载所有图像，构建布局，运行JavaScript。然后当您点击该链接时，页面可以瞬时加载。

生态系统挑战与解决方案

WordPress生态系统有一个"厨房水槽"问题，具有更多功能的插件某种程度上比只做一件事并做得非常好的插件更受重视。在性能实验室插件中，团队的目标是一个插件应该做一件事并做得非常好。

WordPress应该民主化性能，再次使用户不必担心这一点。在核心中，团队正在做的正是这一点，WordPress的核心哲学之一是决策而非选项，事情应该开箱即用。

未来发展方向

在改进Web性能方面，这是一个自上而下和自下而上的问题。浏览器正在努力变得更快。它们相互竞争，试图尽可能快。但通常浏览器不可能知道在加载页面时优先处理什么。

这就是为什么当Weston在Google工作时，他们优先通过WordPress大规模改进Web，在WordPress构建页面的方式中实施最佳实践，以便Chrome不必从自上而下弄清楚一切，因为Chrome不可能从自上而下弄清楚这一点。

块主题的性能优势

使用块主题肯定有性能好处，这是因为经典主题加载的方式是渐进的，它们会在页面中打印出head标签，然后在渲染任何模板之前，它们基本上锁定了页面将需要的脚本和样式，即使实际上不确定页面中会有什么。它可以做一些猜测，但不确定。

对于经典主题，您将在头部有这些巨大的样式表，您将有一堆可能使用也可能不使用的脚本。这些脚本可能会阻塞渲染并导致各种性能问题。

但对于块主题，模板渲染的方式完全不同，它实际上会首先渲染内容中的所有块，然后才继续渲染HTML头部的链接、样式表和脚本。因此，块主题能够选择性地加载仅与该特定页面上的块相关的样式和脚本。因此，页面上的CSS和JavaScript数量可以大大减少，从而大大提高性能。

持续的性能优化工作

性能团队最近一直在核心性能团队中致力于这些响应式图像的相关工作。响应式图像具有所有可用的不同中间图像尺寸。当您上传图像时，它将在源集属性中引用所有这些不同的图像尺寸。然后sizes属性说明应为页面中的该图像加载哪些中间图像尺寸。但由于WordPress在经典主题中传统上不知道元素有多大，它默认使用视口宽度的图像。

因此在移动设备上，这通常没问题，因为图像通常是内容的整个宽度。但在桌面上，您通常有一个带有两侧边距的中心列，图像可能在一列中或向右浮动。因此通常在桌面上，您将下载比页面上该容器相关图像大得多的图像。

因此，性能实验室中的一个插件称为增强响应式图像。它做的是利用块主题中的块结构来找出给定图像容器的宽度。然后它可以比默认的sizes属性更准确地制作该sizes属性。在演讲中，Weston展示了仅此增强功能的性能收益是您可以拥有的最大收益之一，比仅使用AVIF或现代图像格式大得多。

资源与学习

为了了解更多信息，Weston推荐订阅WordPress新闻通讯，如The Repository和Remkus de Vries的Within WP，以及Jono Alderson的性能博客。这些资源为跟踪WordPress性能优化的最新发展提供了宝贵的信息。