在 HubSpot COS 上对网站性能进行基准测试

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前,正在 星球 内带小伙伴们做第一个项目:全栈前后端分离博客项目,采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 204 小节,累计 32w+ 字,讲解图:1416 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 870+ 小伙伴加入,欢迎点击围观

[本文由布伦丹·麦克阿瑟 (Brendan MacArthur) 撰写]

Yottaa 最受欢迎(和挑衅)的博客之一是 2013 年的帖子, 8 个 CMS 平台的基准性能:谁最慢? 使用 Yottaa 技术,我们测量了 8 个 CMS 平台(WordPress、WordPress VIP、Joomla、Drupal、Interwoven、Adobe CQ、Demandware 和 HubSpot)的性能,并着手分析结果。

我们希望在内容管理系统之间发现很小的差异,但事实恰恰相反。 HubSpot 脱颖而出,成为我们 2013 年研究中性能最高的内容管理系统。

HubSpot 此后(重新)推出了一个新的 CMS,即 内容优化系统 (COS) 。当然,作为性能爱好者,Yottaa 团队很好奇新 COS 是否保持了其前身的高标准。

2013 年 CMS 研究回顾

最初的研究显示 HubSpot CMS 页面在我们的样本中是 最轻和最快的 。这种 轻便性 部分反映了 CMS 比其更大、更成熟的竞争对手(Wordpress、Joomla 等)更简单。

2013 年(下图)的图形比较说明了这个故事。在某种程度上,HubSpot 的 CMS 的简单性充当了防止 性能破坏页面膨胀 的保障。请注意 HubSpot CMS 页面如何显着变轻,平均重量为 0.7 MB。这种简单性使得能够更方便地交付给最终用户。

现代用户体验

虽然 较轻的页面速度更快 ,但大型资产(如 JavaScript 和图像文件)是满足 当前用户体验标准 所必需的。 HubSpot COS 旨在成为更具活力的竞争者,具有这些现代网页设计元素和内置的响应式设计。因此,我们希望 COS 页面包含比原始 CMS 示例更多的资源。我们可以指望的就这么多。

真正的问题变成了: 这些变化会影响真实世界的 COS 网站性能吗?

测试内容优化系统

在与 HubSpot 的合作下,Yottaa 收集了 HubSpot COS 网站的随机样本数据以寻求答案。对照样本包括建立在代表 整体市场分布 的各种 CMS 平台上的比较网站。

选择了来自不同 COS 网站的 25 个 URL 进行测试;样本公司站点的范围从营销机构到软件业务。接下来,针对每个站点运行了针对北美多个位置的实时浏览器性能测试。测试包括有线互联网连接(Chrome 浏览器)以及 3G/4G iPhone 连接。

(您可以使用 Yottaa 的免费测试工具 为任何 Web 应用程序复制这些测试)

最后一步是处理一些数据。 COS 结果与 Yottaa 建立的互联网范围测试平均值进行了比较。

HubSpot COS 的综合表现

与我们的假设一致,我们发现 HubSpot COS 页面的重量增加了,从 0.7 MB 左右跃升至 2.43 MB,这是一个巨大的增长。虽然 COS 的页面权重看起来很大,但这个数据实际上符合当前的网络趋势。 Soasta 最近的一份报告证实,网页的平均 大小超过 2 MB

尽管与 2013 年 CMS 样本 相比重量增加了近 250%,但内容优化系统的性能没有明显下降。平均而言,COS 网站的表现明显优于我们的对照样本。以下是与我们的示例相比的平均 COS 显示时间和交互时间指标(以毫秒为单位)。

手机呢?

移动设备不如台式计算机强大,可能难以下载繁重的页面。因此,在实施响应式网页设计等移动策略时,必须考虑 用户体验因素 。同样,我们发现 COS 移动页面的平均资产权重相当大,大约是样本平均值的两倍。

尽管有大量资产的移动页面,但我们测试的 COS 页面具有更短的启动渲染时间和更快的显示时间。

为什么这一切很重要?

在线用户想要两件事:

  1. 丰富、动态和 引人入胜的用户体验
  2. 他们希望这种 体验是快速的

具有讽刺意味的是,提供现有在线体验的页面元素可能会导致页面变得 慢得无法忍受 。要实现这两个目标,必须采取平衡措施。因为 COS 页面要复杂得多,但仍然具有高性能,所以结论是 HubSpot 必须做一些事情才能如此有效地提供丰富的动态页面。我们向 HubSpot 的产品营销经理 Jeffrey Vocell 询问了一些额外的 COS 见解。原来我们没有 秘方 。 HubSpot 只是在构建 COS 时建立了良好的性能实践。以下是他的示例。

  • HubSpot 利用全球内容交付网络 (CDN) 为所有客户站点快速交付所有静态资产。
  • COS 的后端是使用 Java 构建的,以快速适应和扩展以适应客户站点频繁增加的流量。
  • COS 完全响应移动兼容设计。因此,无论您的设计过程如何,COS 都会自动确保您的网站针对移动设备进行了优化。
  • COS 具有自动图像压缩功能,可保持图像质量,但会显着减小文件大小,从而有助于加快页面加载时间。

性能不仅仅是一个快速的 CMS

在制定 用户体验策略 时,内容管理系统性能是一个重要且经常被忽视的考虑因素。总体而言,HubSpot 的 COS 提供了高标准的性能。该平台在性能与网页设计师创造丰富用户体验的能力之间取得了很好的平衡。

同样重要的是要注意,为最终用户提供模范体验需要一个整体战略。拥有一个快速的 CMS 只是该努力的一部分。我们在 COS 研究中衡量的许多商业网站无疑在性能方面比选择内容管理系统做得更多。它需要一种包罗万象的团队方法才能做到正确。