使用这些 WordPress 开发技术通过所有 CWV 和 PageSpeed Insights 测试

2021 年，在总部位于英国的全栈数字代理机构 StrategiQ，我们的目标是开始开发我们开发和启动的每个网站，以超越 Google 的核心 Web Vitals (CWV) 和 PageSpeed Insights (PSI) 性能报告。

Core Web Vitals 显示您的网站如何以各种方式运行。 这包括在页面上加载第一个内容的速度（第一个和最大的内容绘制），用户必须等待多长时间才能与之交互的速度（交互时间）和布局转换（累积布局转换） .

测试您的 CWV 非常简单——只需前往 https://pagespeed.web.dev/ 并输入您的地址。 顶部区域显示过去 28 天的最新真实世界数据，而下部区域（移动和桌面得分 100 分）是实验室生成的数据。

为什么这很重要？ 好吧，因为谷歌是这么说的。

2018 年 7 月，谷歌宣布速度是网站在搜索结果中出现的一个因素，尤其是在移动设备上。 来源。

2020 年，他们还宣布，用户体验指标（构成 Core Web Vitals / CVW）现在用于对网站进行排名。 来源。

这很简单：一个网站运行得越快越好，它的排名可能就越高。

因此，StrategiQ 的开发团队决定轮到我们帮助 SEO 部门了。 搜索引擎优化专家可以尽可能地努力工作，但一个表现糟糕的网站弊大于利。 但是，通过 CWV 和 PSI 的站点将确保他们的出色工作拥有出色的跳板。

值得注意的是，CWV 和 PSI 是出了名的难以通过。 绝大多数网站都没有，即使是世界上许多最知名的网站。 想想 YouTube、BBC，甚至 WP Engine 自己都很难在移动设备和桌面设备上获得通行证（对不起，伙计们）。

那么我们做了什么来确保我们看到那些令人愉快的绿色甜甜圈呢？

我们剥离了所有东西，并致力于一个简单的口头禅：

尽可能快地加载尽可能少。

虽然我不会深入细节，但我将通过我们的主要方法来尽可能简化我们定制的 WordPress 主题。

首先，让我们谈谈硬件。 如果不先讨论 WP Engine，我们就无法继续。 毫无疑问，它们是最好的 WordPress 特定托管供应商之一，如果不是的话。 我们对令人印象深刻的支持、正常运行时间、每次安装的环境、备份以及 SSL 证书和域管理的便捷性以及许多其他功能感到高兴。 此外，它们的缓存和严格的速度优化可确保站点在服务器级别上尽可能快地运行。

以高性能服务器为核心，我们知道现在由我们来决定让网站尽可能快地运行。

像大多数代理商一样，我们有自己的手工制作的基本模板，我们将其用作所有定制网站的起点。 我们创建的每个网站都是在内部设计和编码的——而不是预先构建的主题。

我们的基本模板包含我们的速度优化方法，以及许多我们发现自己在每个项目中都需要的巧妙功能和可重用组件。 从长远来看，拥有这个起点可以节省我们的时间，并确保每个站点都能在开发人员所需的很少开销的情况下发挥最佳性能。

我知道你在想什么——找到好东西！

我不会费心列出您在每篇博客文章中看到的通常无聊的内容，例如“延迟加载图像”。 但是，如果您不这样做，那确实是必须的——我们有一个图像功能，可以打印出我们延迟加载的带有 srcset 和尺寸标签的图像（称为响应式图像）。

让我们开始吧。

方法一：分块和入队

这种情况经常发生：一个项目只有一个 css 文件和一个 js 文件，它们最终会膨胀到一个小星球的大小。 接下来是什么？ 谷歌问你“为什么你在这个页面上加载样式和 JavaScript 没有被使用？”。 为什么？ 为什么？！

这是一个有效的观点。 当每个页面只需要一小部分时，为什么要为整个网站加载大量的 css 和 javascript？

我们所有的网站都是完全用古腾堡积木建造的。 这意味着对于每个块，您都可以利用排队 css 和 js 文件的强大功能。

对于每个块，我们仅为该文件创建一个单独的 css 和 js 文件（如果需要）。 然后将它们缩小（有关更多信息，请参阅下一点）并逐块排队。

结果？ 我们只加载每个页面上实际存在的内容。

方法2：使用gulp之类的任务运行器来合并和缩小你的资产

生成的所有资产都由 gulp 函数缩小（其他可用，例如 grunt）。 值得注意的是，很多个月前，Google 会更喜欢串联而不是缩小（一个大请求比 5 个小请求更可取），但自从 HTTP/2（一次多路复用多个请求）的兴起以来，这不再是一个问题。

同样，我们这样做是为了使文件尽可能小。 所以现在我们不仅只加载页面上的资产，而且它们的大小也很小。

方法3：停止渲染阻塞资产

我们确保所有这些排队的资产都在页面底部，因此不会出现渲染阻塞。

我们甚至将 WordPress 附带的 jQuery 出列，并将新版本（没有安全漏洞的版本）入列，也在页面底部。

但是我听到你说的 FOUC（无样式内容的 Flash）呢？

方法4：折叠css之上

当页面最初加载时没有任何样式，因为样式表位于页面底部，所以会出现 Flash of Unstyled Content。 加载样式表后，应用样式，站点闪烁，最终看起来正确。

为了解决这个问题，我们拆分了上述折叠样式并将其作为内联 <style> 标记添加到头部。 它不是渲染阻塞资产，我们也没有 FOUC。

方法5：WP火箭

最后一块拼图是一流的性能插件 WP Rocket。 它与 WP Engine 工程师一起构建，是其托管平台上唯一允许的缓存插件。

结果？

好吧，分数不言自明。

SportsAidEastern 是一个支持英国运动员的慈善机构。 根据 PSI 的说法，我们为他们开发的网站在移动设备上的得分高达 97/100，在桌面设备上得分高达 100/100。

Calligo 提供变革性的数据服务，其网站评分甚至优于 SportsAid； 在移动设备上接近完美的 99/100，在桌面设备上达到 100/100。

结论

希望这是从所有其他相同的“相同的”“如何加快您的 WordPress”网站发布的新鲜空气，如果您正在努力获得通行证，那么也许我们已经强调了你可以试试。

StrategiQ 是战略第一的营销机构。 通过发现有价值的市场洞察、揭示击败竞争对手的机会、定义和提供有效的营销策略，我们的团队通过咨询、创意、营销和技术帮助雄心勃勃的品牌超越其目标。
无论您需要战略、建议、资源还是专业知识，都请迈出第一步。 告诉我们您自己，我们会看看如何提供帮助。