网站内容优化方案(如何对页面进行监控分析及性能评判？(组图))

　　网站内容优化方案(如何对页面进行监控分析及性能评判？(组图))

　　在网站建设过程中，任何细节都会影响网站的访问速度。如果开发者不了解前端性能的知识，很多影响网站访问速度的因素会在网上积累，严重影响网站的性能，导致访问速度变慢网站 和用户的糟糕体验最终会导致用户流失。页面性能对于网页来说非常重要。因此，检测和分析页面的性能是开发者不能忽视的问题。那么我们如何监控、分析和评估页面的性能呢？评估绩效的规则是什么？

　　从技术角度来看，前端性能监控主要分为两种方式，一种叫做综合监控（SYN），另一种是真实用户监控（RUM）。

　　前者侧重于“检测”，而后者侧重于“监控”。

　　下面从各个方面为大家介绍正财云前端ZooTeam的Web性能优化分析系统——“白策”，如何采集页面性能数据，并通过一个一系列的计算处理。报告。

　　百策以历史人物魏征命名。魏征，字宣城。唐太宗李世民的谋士，因敢直接谋事，被称为批评。因屡次指出唐太宗李世民的过失，能提出有效的政策，被称为“魏百策”。如何采集页面性能数据

　　百测系统采用上述“综合监控”方案，获取一组与宿主环境无关的性能数据。说到综合监控解决方案，那就是 Lighthouse，一款由 Google Chrome 团队出品的开源自动化分析工具。

　　Lighthouse 的工作流程有几个主要步骤。一些步骤发生在浏览器中，其余的由 Lighthouse 运行器执行。

　　灯塔的工作原理

　　以下是 Lighthouse 的组件：

　　简单来说，流程就是：建立连接->采集日志->分析->生成报告。

　　而且我们的百测系统是基于Lighthouse的，部分功能进行了定制和创新。

　　区别于 Lighthouse 的功能

　　1）使用 Puppeteer

　　Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。与 Selenium 或 PhantomJs 相比，它最大的特点是它的 DOM 操作可以完全在内存中模拟，即在 V8 引擎中处理，无需打开浏览器，而 V8 引擎 Chrome 团队正在维护它，将具有更好的兼容性和前景。

　　运行以下代码获取视口可视区域的宽高：

　　Lighthouse 的解决方案是使用较低级别的 DevTools 协议与浏览器进行交互。我们选择 Puppeteer 是因为它比较简单，封装了一些常用的接口就足以满足我们的需求。

　　2）访问页面前模拟登录

　　我们不仅需要检测可以匿名访问的前台页面，还需要检测登录后才能操作的后台页面。所以在检测之前，我们需要添加一个登录操作。当然，用户名和密码也是可选的。当检测到 URL 需要登录时，会提示用户输入用户名和密码。

　　3）采集到的数据存入数据库

　　我们将每一个测试数据保存到数据库中，对数据进行整理，获取页面性能变化趋势，为支持后续的统计分析提供数据保障。

　　改造后的流程为：连接建立->登录检测->日志采集->数据存储->分析->报表生成如何分析页面性能

　　自定义指标

　　在系统设计初期，我们为一系列性能指标制定了权重和阈值：

　　Lighthouse 还开发了许多性能指标，例如：

　　另外，我们定制了更多的特征指标，比如：OSS镜像是否使用了压缩后缀。

　　既然公司的图片都是放在阿里云OSS上的，阿里云OSS提供了一个非常方便的优化图片大小的方法，就是在图片的末尾加上类似的参数？x-oss-process=image/resize,w_187/quality,Q_75/format,webp，理论上所有放在OSS上的图片都需要压缩后缀。为什么是理论上的？因为我们发现如果图片在上传到OSS之前先用其他压缩工具压缩，再加上压缩后缀，图片的体积变化不大，甚至会出现负增长。因此，我们调整了审查算法。我们不是简单的检查图片是否有OSS后缀，而是比较当前图片的体积与添加OSS压缩后缀后的体积的差异，看是否超过比例。

　　自定义检测模型

　　在对检测系统进行了一段时间的测试后，我们发现并非所有指标都适用于所有类型的页面。比如我们的首页加载了很多图片，对图片的分辨率要求很高，而后台页面的图片就比较小。我们有传统的后端渲染 + jQuery 类型的页面、客户端渲染的 React 页面和预渲染的 Vue 页面。

　　显然不适合按照同一标准检测所有类型的页面，所以我们引入检测模型的概念。我们根据页面的类型和对应的检测模型进行性能检测。一个检测模型可以关联多个指标，并且可以配置指标权重和级别。

　　权重越高，扣分越多。级别分为错误和警告。警告级别的扣除项目不计入总分。比如请求是否使用Gzip，是因为这一项不能被前端优化，需要服务器推送来改进。

　　计算页面评分

　　提供优化建议和趋势

　　优化建议

　　对于每一个扣减审核项目，我们提供了详细的扣减原因及相应的解决方案：

　　页面性能趋势变化图

　　除了开发新功能，我们还积极重构旧页面。为了分析重构前后的收益，我们还提供了查询历史数据和变化趋势的功能：

　　总结

　　百测系统提供前端页面的性能优化分析服务，结合行业解决方案和业务场景的差异，改进符合公司业务情况的最佳实践。百测系统制定了一套网页性能测试标准。模型分析，发现影响用户体验的问题，如请求时间过长、请求资源过多、页面结构不合理等，并针对这些问题提供相应的优化建议，帮助开发者产生更快的渲染和更多的资源占用。页面更少，体验更好。