不做“网站性能预案”,便是英雄也枉然!

发布日期:2021-07-09

性能是影响用户体验的业务指标的重要组成部分。 人们通常会认为,一个优秀的技术公司会做出一个性能良好的站点。但实际上这二者并无太大关系。即使哥很厉害,也要花很多精力和努力才能把性能做到优秀。凡事预则立,不预则废。哥要想提高性能,首先需要制定一个可以执行的方案计划才行。

啥是网站性能预案呢?

网站性能预案是对影响站点性能的指标设定一系列底线。要树立底线思维,一旦触碰了这些底线,人就是烂人,站就是烂站。这些指标根据实际情况可能不同。但一般都包括页面的总大小、在移动网络上加载所需的时间,有时甚至是发送的HTTP请求的数量。建立一个性能预案对于网站性能改进是一个非常好的开始。它可以作为设计、技术和新功能决策的重要参考信息。也是产品讨论会议时大家沟通的重要基准。

有了网站性能语言,设计师不能再为所欲为,他们就需要考虑高分辨率图像的个数和他们选择的网络字体的数量。它还可以帮助开发人员比较解决需求时的不同技术路线,并根据框架和库的大小来评估它们性能成本。

选择指标

传统指标️

这些指标在开发的早期阶段非常有用,因为它们强调了包含大量图像和脚本的影响。它们也易于与设计人员和开发人员进行沟通。比如:

  • 图像最大尺寸
  • web字体的最大数量
  • 脚本的最大大小,包括框架
  • 外部资源(如第三方脚本)总数

燃鹅,这些数字并不能告诉你更多关于用户体验的信息。请求数量相同的两个页面可能根据请求资源的顺序而在呈现效果上大相径庭。如果一个关键资源(例如:一个头部的CSS样式文件)在加载过程中被卡住了,用户将等待很长的时间才能看到有用的东西。而且感觉上页面加载的更慢。如果在另一个页面上,先显示一些东西,他们甚至不会注意到页面的其他部分还没有加载。

基于关键路径的渐进页面呈现的图像

这就是为什么要引入下面这些指标。

里程碑时间

里程碑时间记录页面加载期间发生的重要里程碑事件的时间。这些事件之所以被称之为里程碑,不是因为他们长得帅,而是因为他们是以用户体验为中心的性能事件。例如:DOMContentLoaded或OnLoad事件;首次渲染事件(FCP)记录了浏览器何时显示来自DOM的第一部分内容,如文本或图像;可交互时间(TTI)度量页面变为完全可交互和可靠地响应用户输入所需的时间。如果您希望在页面上进行任何类型的用户交互,如点击链接、按钮、输入或使用表单元素,那么它就是一个非常重要的指标。

建立一个测试基线

真正知道哪种办法让你的网站飞起来的方法就是不断尝试然后研究,然后测试你的改进。如果你没有时间做这些,这里有一些不错的默认数字可以帮助你开始:这些数字是基于真实世界的基线设备和3 g网络速度超过一半的互联网流量所以你应该以3G网速作为起点。(国内其实都是4G了。国外有些地方还是3G较多)

跟踪性能

快是一回事,持续的快是另外一个故事。为了确保你的网站一直都够快,就意味着你必须在发布后能够对网站性能进行持续跟踪。长期监视这些指标,并从真实用户访问中获取性能数据,将向您展示性能变化如何影响关键业务指标。

小结

建立网站性能预案的目的是确保所有银在整个项目中都知道还有性能这么回事。不要在发布之后再疯狂优化。