AI 为我构建了 WordPress 主题，却搞砸了我的性能表现
我是一名 SEO 专家。我喜欢测试新工具。
最近，我让 AI 从零开始构建一个自定义的 WordPress 主题。我描述了布局并提供了内容。
起初，结果看起来很棒。该网站在 Lighthouse 的移动端和桌面端得分均为 100/100。代码看起来也很整洁。
然后我进行了一些微调。移动端得分从 100 降到了 89，而桌面端仍保持在 100。
问题出在一个图像属性上。这个错误说明了为什么你必须审查 AI 生成的代码。
快速的桌面端连接会掩盖瓶颈，而移动设备则会暴露它们。得分下降意味着某个资源正在占用它并不需要的带宽。
移动端报告指向了最大内容绘制 (LCP) 路径中的一张图像。那是一张旧游戏的截图。
在桌面端，这张图片没问题。但在移动端，一个巨大的数据表格占据了整个屏幕。这个表格将图片推到了页面的很下方。当页面加载时，这张图片是不可见的。
AI 写了如下代码：
代码是有效的，但逻辑是错误的。AI 假设代码中的第一张图片就是 Hero Image。它缺乏视觉感知能力，强迫移动端浏览器立即下载一张隐藏的图片。
我将代码修改为：
起初得分并没有变化。我以为自己疯了，花了二十分钟寻找 Bug。然后我才意识到，我的服务器缓存仍在提供旧代码。
我清理了缓存。移动端得分回到了 100。
AI 并没有失败，它只是根据代码顺序做出了逻辑推测。但它看不见布局，也不理解表格是如何改变视口 (viewport) 的。
如果你使用 AI 来构建组件，请遵循以下步骤：
- 审计 fetchpriority 和 loading="lazy"。根据实际布局进行检查，不要盲目信任代码的顺序。
- 寻找隐藏在表格或轮播图下的图像。
- 隔离你的测试。测试前务必清理缓存，不要审计过时的代码。
AI 生成的代码足够干净，可以使用。但你仍然需要人工检查代码是否符合页面的实际情况。
Optional learning community: https://t.me/GyaanSetuAi