WP Rocket SaaS：幕后花絮

已发表: 2024-09-12

这篇技术文章详细介绍了使用 NodeJS、Puppeteer 和 BullMQ 每分钟处理超过 15,000 个网页的网络爬虫的开发和优化。我们解释了删除未使用的 CSS (RUCSS) 功能如何通过消除不必要的 CSS、缩短加载时间和提高关键性能指标来发挥作用并增强 Web 性能。我们还描述了如何通过利用 Puppeteer 进行资源收集、定制 JavaScript 库以及使用 BullMQ 实现排队系统来解决最初的挑战，包括低效处理和稳定性问题。最后，我们概述了我们如何实现卓越运营，以维持高质量标准、实现快速创新和高效的客户支持。

什么是 RUCSS？

删除未使用的 CSS (RUCSS) 功能旨在消除网页上未使用的所有 CSS 和样式表，仅保留每个页面所需的 CSS。应用优化后，您的网站将只为用户请求的特定页面提供所需的 CSS，从而使页面加载速度更快！

平均而言，此优化将交付的 CSS 大小减少了 76%！

RUCSS 的好处

  • 缩小页面大小：最小化网页的整体大小。
  • 更少的 HTTP 请求：减少需要加载的 CSS 样式表的数量。
  • 更快的加载时间：提高页面的加载速度。
  • 增强的核心 Web 生命体：提高关键性能指标，例如最大内容绘制 (LCP)、首次内容绘制 (FCP) 和累积布局偏移 (CLS)。
  • 消除渲染阻塞 CSS ：防止 CSS 延迟页面渲染。

识别未使用的 CSS：外科手术式打击

删除未使用的 CSS 的过程非常复杂：对于我们删除的每条 CSS 规则，我们必须确保该页面永远不需要它；否则，布局可能会被破坏！您需要考虑很多因素以确保正确识别未使用的 CSS：

  • JavaScript 交互：JavaScript 动态改变 DOM 和 CSS。例如，单击按钮后可能会出现一个弹出窗口，引入新的 DOM 元素和 CSS 规则。处理这些交互对于准确识别所使用的 CSS 至关重要，并且还有更多的滑块、画布外菜单和画廊。
  • CSS 和 HTML 变体：WordPress 主题和插件引入了无数的 CSS 规则变体。处理嵌套 CSS、边缘情况甚至语法错误至关重要。需要准确的 HTML 解析才能有效地识别和删除未使用的 CSS。
  • 视口尺寸：某些 CSS 样式在某些条件下应用于屏幕尺寸。为了确保 CSS 能够正确地服务于移动和桌面用户，我们提供了适用于各种屏幕尺寸的已用 CSS，并且每次访问时仅提供相关的 CSS。此外，特定的优化规则适用于响应式 CSS 样式。

RUCSS 作为 SaaS 解决方案

处理页面资源和生成使用的 CSS 是资源密集型的。直接在客户网站上执行这些任务可能会降低速度，并且可能不适用于所有服务器和托管。因此，WP Rocket 的一些最先进的功能（例如删除未使用的 CSS）由我们的 SaaS 提供支持。这些优化是根据 WP Rocket 插件的请求在我们的服务器上执行的，然后结果会自动应用于网站。这种方法对客户来说有一些巨大的好处：

  • 执行资源密集型优化并减少用户服务器的负载。
  • 尽快提供增强功能并快速处理反馈。
  • 主动观察并修复问题和错误，无需等待支持票证。
  • 确保所有用户受益于最新版本，无需任何客户端更新。
  • 快速迭代并部署改进，无需更新 WP Rocket 插件。

幕后情况如何？

WP Rocket SaaS 每分钟访问和优化多达 20k 页面，处理 CSS 和首屏图像！为此，我们在约 40 个不同的服务器上不断运行数千个 Web 浏览器，以便在 2 分钟内满足所有用户请求。为了实现这一目标，我们的团队正在利用最先进的技术，包括 NodeJS、Django、Redis、CockroachDB 和 Kubernetes，并与 group.One 团队一起运营它们。

关键技术挑战

1. 收集页面资源

我们广泛使用Puppeteer，这是一个 Node 库，它提供了高级 API 来控制无头 Chrome 或 Chromium 浏览器。该工具对于我们的资源收集策略至关重要，因为它能够像真实用户一样呈现网页，确保捕获所有动态元素。它提供了许多我们用来优化流程的强大功能，例如视口大小控制、请求拦截等。

2. 处理页面资源

由于 WordPress 主题和插件使用各种 CSS 和 JavaScript，因此我们需要一个强大的解决方案来处理这些文件。

在测试了许多处理页面资源的方法（例如 Webpack、PostCSS 和 CleanCSS）之后，我们最终决定分叉并维护我们自己的定制 JavaScript 库，以更好地满足我们的特定要求。这包括处理边缘情况、嵌套 CSS 规则以及在众多 WordPress 主题和插件中发现的语法问题，以确保可以为所有用户可靠地执行优化。

3. 利用我们团队的专业知识进行微调

处理 CSS 可能非常棘手，如果处理过程中不够小心，破坏页面布局的风险很高。我们的团队对流行的 WordPress 主题和页面构建器拥有广泛的了解，以及数十万用户关于与最新 WordPress 趋势的兼容性的持续反馈。因此，我们开发了一个动态安全列表系统，供我们的团队成员直接实时更新我们SaaS的CSS处理规则，以不断适应我们的优化并每天增加兼容性。

4. 管理每分钟数千页的流量

为了处理每分钟 15,000 个网页的流量，我们使用 BullMQ 实现了一个排队系统。该系统提供：

  • 异步处理将优化过程从插件卸载到异步后端。
  • 负载平衡和并发管理：跨多个服务器分配任务，使 SaaS 能够高效处理大量 URL 并轻松扩展。
  • 可靠性和容错性：所有提交的任务及其结果一旦可用就会被保存。如果我们的其中一台服务器发生故障或用户的网站无法立即检索结果，这可以提供弹性。
  • 优先级划分：BullMQ 队列可用于对任务进行优先级划分，确保首先处理更重要的任务。例如，优先考虑主页的优化，让我们的用户能够立即看到主页的改进，并立即使用 Pagespeed 进行测试！

卓越运营

为 SaaS 构建可扩展且可靠的系统对于提高客户的易用性和效率以及处理不断增长的用户数量和不断增加的页面处理请求量至关重要。以下是我们实现如此卓越成就的步骤的深入分析。

1. 可扩展架构

WP Rocket 随时在全球数百万个网站上使用。因此，我们的 SaaS 必须始终保持可用并按预期运行。该服务托管在位于不同地区的40多台物理服务器上。它们与 Kubernetes 进行编排，以简化容器生命周期的部署、扩展和管理。我们依靠活跃度探测、滚动更新和自动扩展等强大功能来为服务带来弹性并在所有情况下保持正常运行时间。此外，自定义网关服务执行作业管理并强制执行 API 安全性（速率限制、身份验证等）。

2. 监控与报警

所有这些服务和服务器都通过 Prometheus 和 Grafana 持续监控和观察技术指标以及功能指标，以确保服务稳定并为用户提供最佳性能。深入的监控使我们能够确保保持较高的成功率，同时保持较短的工作持续时间和一流的优化效率。来自 Prometheus 和 Metabase 等工具的警报使我们能够在出现异常情况时实时做出反应。

3. 可观察性帮助我们的客户

虽然我们努力使我们的 SaaS 易于客户使用，但在非常复杂的设置中可能会出现一些困难，例如防火墙、安全规则或具有许多冲突插件或主题的 WordPress 网站。借助 SaaS 方法，我们的支持团队通过 Metabase 配备了内部工具，可以访问与给定用户相关的数据，并观察他们的优化工作和结果，从而使我们能够快速识别可能的问题。然后，他们可以使用 PostMan 和 Metabase 进行重复、调整和微调并获得实时反馈。因此，他们可以有效地帮助陷入困境的客户，甚至直接调整SaaS优化规则来解锁用户。

4. 自动化测试和持续集成

对于工程师来说，在保持高交付率的同时保持高质量标准可能是一个挑战。我们通过每次代码更改都会经历的可靠自动化来解决这个问题。从自动化测试到生产中的一键部署，我们还利用镜像、影子发布机制和渐进式发布部署。所有这些强大的方法使我们的工程团队能够蓬勃发展并不断创新，而不会危及服务质量。其中大部分都是自动化的，因此我们甚至不需要考虑它并专注于重要的事情：为我们的用户构建最好的功能！

总结

总而言之，使用 NodeJS、Puppeteer 和 BullMQ 开发和优化网络爬虫已形成一种高效且可扩展的解决方案，每分钟可处理超过 15,000 个网页。通过解决最初的挑战并利用先进的工具和方法，我们创建了一个强大的系统，通过删除未使用的 CSS (RUCSS) 功能显着增强 Web 性能。持续集成、自动化测试以及对可扩展性和可靠性的关注确保我们的服务保持一流，为用户提供更快的加载时间和改进的整体网络体验。