速度审计员：找出阻碍 WordPress 发展的因素

有些 WordPress 网站管理员痴迷于 PageSpeed Insights 或 GTmetrix。我和许多对此了解更多的人的建议是，你不应该给予这些指标更多的重视。

如果认为加载速度不错，就没有必要把所有东西都 "绿色"。在很多情况下，这样做甚至会适得其反，因为你可能会陷入过度优化，或者更糟的是，你可能会为了解决一件事而毁掉不同的东西。

不过，无论你是WPO爱好者、优化爱好者，还是只想提高网站的响应速度，这些工具几乎都是必不可少的。问题是，它们提供的 "静态图片 "来自外部服务器。但是，当作为管理员的您浏览网站时，那些加载较晚的广告或在您准备点击时跳转的菜单会发生什么情况呢？

起源

Speed Auditor的诞生是为了满足个人对几个简单但功能强大的本地诊断工具的需求。它不是一个优化插件（它不会改变您代码中的任何内容），而是一个实时审计插件。

如果你正在为 WPO 寻找一款优秀的、可能是最好的付费插件，用来进行更改和微调，那么请看看Perfmatters。另一方面，如果你正在寻找一款免费且简单的插件，不需要为设置和调整而头疼，但又有很多可能性，你可以试试费尔南多-特拉多（Fernando Tellado）的WPO Rocket Tweaks，它可以在 WordPress 软件仓库中找到。

如果您不知道DOM节点或延迟指标是什么，不用担心。Speed Auditor 旨在帮助您一目了然地了解自己的网站：

• 智能指示器：管理栏中会出现一个变色图标。如果它是绿色的，说明你的 LCP（查看最重要内容所需的时间）处于最佳状态。如果变为橙色或红色，则表示有事情需要您注意。

• 在浏览的同时进行审计：您无需进行任何复杂的配置。激活插件后，当您查看文章时，插件会在后台分析图片是否过多或服务器是否响应迟缓。
• 更多人工报告：只需单击一下，即可下载 .txt 文件，您可以将其发送给开发人员或保存起来，以便在应用更改后比较结果。

引擎盖下

1.1.8 版尝试提供一定深度的诊断功能，以节省在浏览器控制台中操作的时间。

• 精确的 LCP 识别：插件能准确检测出是哪个元素（图像或文本块）触发了最大内容涂抹。
• DOM 深度分析：对于避免 "DOM 尺寸过大 "至关重要。Speed Auditor 按区域（页眉、内容、页脚）分解节点数量，并在嵌套超过 15-20 层时发出警告。
• 媒体延迟监控器：测量图像的实际传输时间（资源定时 API）。如果图片下载需要 500 毫秒，插件就会将其标记为 "关键"。
• 对服务器的影响为零：所有处理都在客户端（浏览器）进行。没有会导致网站运行速度减慢的繁重数据库查询或 PHP 进程。

大飞跃即将推出：速度审计器 1.1.9（带 "雷达 CLS "功能）

在此之前，累积布局偏移（CLS）只是报告中的一个抽象数字。你知道有东西在移动，但不一定知道是什么。很快，在 1.1.9 版本中，这种情况就会改变。

应引入雷达或可视 CLS "高亮"按钮。

想象一下激活 "雷达 "模式，在滚动时在任何移动的元素上画红框。一些扩展程序已经这样做了，或多或少都取得了一些成功，这始终是一个非常有用的视觉辅助工具，可以尝试捕捉那些有时会逃过视线的 "溢出"。

• 是 AdSense 广告条幅在推送您的内容吗？你会看到一个红框。您可以在这里深入了解这个问题。
• 是没有确定尺寸的图像吗？雷达会捕捉到它。
• 完全持久：您可以在打开雷达的情况下浏览整个网站；插件会记住您希望对每个角落进行可视化审核。

这次更新还将包括一个简短的技术词汇表，该词汇表将扩展到包括提示和教程，并将集成到 WordPress 的仪表板中，这样，ins、iframe 或 figure 等术语将不再神秘。

我的想法是，在不同的情况下进行测试时，如果收到任何改进建议或错误警告，我就会改进分析的响应和生成的报告。

1.1.8 版现已推出，可用于整理您的度量指标，很快，1.1.9 版将使修复 WordPress 的视觉稳定性变得更加容易。如果您现在安装，很快就会收到更新。

它是如何工作的？

代码遵循这三个步骤：

1.性能观测器

浏览器（Chrome、Edge、Opera）有一个名为Performance API 的本地 API。该插件会注册一个名为PerformanceObserver的 "观察者"，专门为布局变换输入类型进行配置。

初始绘制完成后，每当屏幕上有东西移动，浏览器就会生成一个事件。插件会捕获该事件并提取两个关键数据：

• 偏移值：（该数字为 0.0145）。
• 罪魁祸首元素：浏览器会告诉插件移动了哪个 HTML 节点。

2.最近互动 "过滤器

这就是插件试图耍小聪明的地方。并非所有动作都是 "坏 "的。如果点击下拉菜单，内容向下滚动，这是用户预期的动作。

插件会检查名为 hadRecentInput 的属性。如果您在过去 500 毫秒内触摸过按键或点击过鼠标，浏览器会将该动作标记为 "预期 "动作，插件会忽略它，以避免误报。插件只检测意外发生的移动（如突然出现的广告）。

3.视觉效果（红色方框）

一旦插件获取了被移动的元素，可视化部分就开始发挥作用了：

1. 坐标计算：使用名为 getBoundingClientRect() 的函数，找出该元素在屏幕上的精确位置（像素向上、像素向左）。
2. 框架注入：创建一个具有绝对位置、2px 红色边框和极高z-index的div，并将其置于所有内容之上。
3. 标签：在红框左上方添加一个小方框，标注标签名称（ins、img、div）和累计 CLS 值。

为什么这比外部报告更好？

PageSpeed 等工具有时无法检测到 CLS，因为它们不会滚动到底部或不会等待某些广告加载。

通过使用持久性，该插件可以测量用户实际浏览会话期间累积的 CLS。如果某个元素在开始时移动了一点，在滚动时又移动了一点，插件就会将其累加并突出显示，从而得出最接近真实的数字，而 Google 最终会在其"Chrome 浏览器用户体验"（CrUX）报告中看到这个数字。