1. 首页
  2. css

CSS构建网站性能监视器

几个月前,我写了一篇关于使用WebPageTest,更确切地说是它的RESTfulAPI来监控网站性能的文章。毫无疑问,它提供的数据可以转化为宝贵的信息,让工程师调整系统的各个部分,使其性能更好。

但是这个工具在您的开发工作流中到底是如何使用的呢?你应该什么时候运行测试?你对测试结果做了什么?你如何想象它们?既然我们已经能够通过restfulapi以编程方式获得性能指标,那么我们应该研究如何持久化该数据并跟踪其进度。这意味着能够看到特定页面的加载时间如何受到新功能、资产或基础结构更改的影响,我想用一种让别人也能做的方式来构建它。

我的想法。大概。

愿望列表

我希望这个工具能够:手动运行测试或由第三方触发测试,就像GitHub发布提交后触发的webhook一样,以可配置的时间间隔运行重复测试

  • 测试多个url,能够配置不同的测试位置、设备和连接类型
  • 将任意数量的性能指标分组并显示在图表上
  • 定义任何性能指标的预算并在图表上可视化这些指标,以及结果
  • 配置指标超过时要发送的警报(电子邮件和时差)他们的预算
  • 在进一步讨论之前,我必须指出,市场上已经有了实现上述所有功能的既定解决方案。像SpeedCurve或Calibre这样的公司提供专业的监控工具,作为一项服务,如果你在经营一家企业,你应该认真考虑。它们使用webgetest的私有实例,不依赖公共实例,这意味着没有使用限制,也没有不可预知的可用性。

    我创建的工具,我将在本文中介绍给您,它是这些服务的一个温和而免费的替代品。我之所以建立它,是因为我的预算不允许我每月支付一次性能监控服务的费用,而且我确信其他个人、非营利组织和开源项目也在同一条船上。我的目标是将这种类型的工具带给那些可能无法访问它的人。

    这个想法

    我想到的系统必须有三个关键组件:

    1. 一个监听测试请求并与webgetest API通信的应用程序
    2. 一个保存测试结果的数据存储
    3. A可视化层来显示它们,用一系列的图表来显示各种指标随着时间的推移所取得的进展,我真的很想建立一个能够让所有专业水平的人都能免费设置和使用的东西,这对我做出的关于平台架构和基础设施的决定产生了很大的影响可能看起来是一种不寻常的方法,但是GitHub实际上是一个非常有趣的选择来实现#2和#3。有了GitHub的API,您可以轻松地从存储库中读写文件,因此可以有效地将其用作持久数据存储。除此之外,GitHub页面使同一存储库成为一个很好的网站服务场所。你得到了一个快速和安全的托管服务,可以选择使用自定义域。所有这些都是免费的,如果你不介意使用公共存储库的话节点.js接收测试请求的应用程序,将它们发送到WebPageTest,检索结果并将它们作为数据文件推送到GitHub存储库,然后由可视化层接收。我以前在构建Staticman时使用过这种方法,效果非常好。

      下图显示了这个想法的要点。

      系统架构

      哦,在某个时候我需要一个名称。我称之为SpeedTracker。

      您可以在这里看到它的实际应用,或者通过以下链接直接使用它。如果你想知道更多关于如何在引擎盖下工作,它是什么样的建设和我看到它去哪里,那么请继续阅读。

      建设仪表板

      我是一个杰基尔的超级粉丝。对于不熟悉它的人来说,Jekyll是一个程序,它从各种格式(Markdown、JSON、YAML甚至CSV)的文件中获取结构化内容,并生成HTML页面。它是一个更大的静态站点生成器家族的一部分。

      它与这个项目特别相关,因为它与GitHub页面的本机集成,使得任何存储库在每次接收到新的或更新的内容时都能自动构建一个Jekyll站点并立即提供服务

      CSS构建网站性能监视器 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%9e%84%e5%bb%ba%e7%bd%91%e7%ab%99%e6%80%a7%e8%83%bd%e7%9b%91%e8%a7%86%e5%99%a8/

    发表评论

    您的电子邮箱地址不会被公开。