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

　　网站内容优化方案(

如何对页面进行监控分析及性能评判？(组图)

)

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

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

　　前者重“检测”，后者重“监督”。

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

　　❝

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

　　如何采集页面性能数据

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

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

　　灯塔的工作原理

　　以下是 Lighthouse 的组件：

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

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

　　区别于 Lighthouse 的功能

　　(1）使用傀儡师

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

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

　　const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto('https://example.com');

const dimensions = await page.evaluate(() => {

return {

width: document.documentElement.clientWidth,

height: document.documentElement.clientHeight

};

});

console.log('Dimensions:', dimensions);

await browser.close();

})();

　　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，是因为这一项不能被前端优化，需要服务器推送来改进。

　　计算页面评分

　　提供优化建议和趋势

　　优化建议

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

　　页面性能趋势变化图

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

　　总结

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

　　后续，我们还将对“百策系统”进行一系列分享。欢迎关注微信公众号“正财云前端团队”，或关注掘金“正财云前端团队”，第一时间获取最新资讯。

　　职业生涯

　　ZooTeam是一支年轻、充满*敏*感*词*、富有创造力的前端团队，隶属于正彩云产品研发部，基地位于风景如画的杭州。团队目前有50多名前端合伙人，平均年龄27岁，其中近30%是全栈工程师，妥妥的青年风暴群。成员由来自阿里、网易的“老兵”，以及浙江大学、中科大、航电大学等学校的新生组成。除了日常业务对接，团队还在材料系统、工程平台、搭建平台、性能体验、云应用、数据分析与可视化等领域进行技术探索和实战，并推广实施了一系列内部科技产品。探索前端技术系统的新前沿。

　　如果你想改变，你已经被东西折腾了，希望开始折腾东西；如果你想改变，你被告知你需要更多的想法，但你不能打破游戏；如果你想改变，你有能力做到那个结果，但你不需要你；如果你想改变你想要完成的事情，你需要一个团队来支持，但没有地方让你带领人；如果要改变既定的节奏，那就是“5年工作时间，3年工作经验”；如果你想改变原来的感悟是好的，但总有那层窗纸的模糊……如果你相信信仰的力量，相信平凡的人可以成就不平凡的事情，相信他们可以遇见更好的自己。如果你想参与到业务腾飞的过程中，亲自推动一个业务理解深入、技术体系完善、技术创造价值、外溢影响力的前端团队的成长，我觉得应该讲话。随时，等你写东西，发给