基于lighthouse的自动化合成监控方案

1. 【第24期】线上体验保障专题

2. 【第1讲】基于Lighthouse的自动化合成监控方案分享嘉宾：刘炳男-EIC前端高级开发工程师

3. 大纲 • 背景介绍 • 合成监控方案详解 • 平台设计 • 核心实现 • 规划展望

4. 背景介绍

5. 背景介绍⻚面加载时间每减少 100毫秒，用户留存率⻚面日均pv：千万级就会增加 1.11% 分享人：余意移动端⻚面加载时间超过3秒， 53% 的访问者都会选择放弃

6. ⻚面加载时间节点 First Paint （FP） First Contentful Paint （FCP） Largest Contentful Paint Time To Interactive （LCP）（TTI）

7. 性能优化

8. 优化效果 • 首次内容绘制（FCP） 31% • 最大内容绘制（LCP） 31% • 视觉速度指数（SI）同城宝详情⻚优化前后性能对比 8 优化后 6 4 33% 2 • 可交互时间（TTI） 0 33% 优化前 FCP LCP SI TTI

9. 合成监控方案详解分享人：余意

10. 什么是合成监控？真实用户监控（Real User Monitoring）提交数据 performance API 数据分析合成监控（Synthetic Monitoring） Chrome 主动url检测检测服务数据分析产出报告

11. 合成监控的优势 • 详细的数据采集，如瀑布图等 • 定性分析，除去设备、网络等不稳定因素对⻚面进行分析、优化 • 不影响真实用户访问性能 • 可视化还原⻚面加载全过程

12. 合成监控方案选型平台名称 Lighthouse PageSpeed Insights 底层框架 Lighthouse Lighthouse WebPageTest 自有API 是否开源是是是否数据维度支持性 WebPageTest Pingdom 性能、最佳实性能、优化建议资源瀑布图等详细的性能对比践、SEO等等付费、支持用户 nodejs nodejs PHP、linux 监控

13. Lighthouse简介审核性能 PWA 可访问性最佳实践 SEO 使用方式 Chrome插件 Chrome开发者工具 Node CLI Node module

14. Lighthouse架构图

15. Driver工作原理 Driver Connection WebSocket Chrome DevTools Protocol Chrome

16. Driver工作原理 Driver Connection WebSocket Chrome DevTools Protocol Chrome

17. Gatherers工作原理

18. Gatherers工作原理

19. 平台设计分享人：余意

20. 平台现状——自有平台

21. 平台现状——自有平台

22. 平台现状

23. 平台现状——第三方平台分享人：余意

24. 平台现状——第三方平台分享人：余意

25. 平台现状分享人：余意

26. 平台设计应用层基于Performance API 服务层任务层框架层第三方平台灯塔平台数据分析回调方式过程跟踪多语言定时任务登录信息任务队列 Koa 业务反馈优化记录设备类型 …… 定期榜单网络状况分享人：余意 puppeteer运行池 lighthouse Kafka 检测目录 url过滤 bull redis

27. 遇到的一些挑战 • 待检测数量巨大 • 无效⻚面常占据高分段 • 检测任务较耗时，占用内存高分享人：余意 • 每次检测任务都需要启动puppeteer，造成频繁起停，浪费资源

28. 核心实现分享人：余意

29. 收集 Kafka Consumer 预处理 Path Hash 检测接口输出检测正则 Redis exists? Y N …… 返回结果 URL去重规则 https://luna.58.com/m/autotemplate?city=bj&ClickID=2 https://seal.58corp.com/#/admin/project?id=58 https://www.58.com/12345/ershoufang Redis set (expire)

30. 收集 Kafka Consumer Path Hash Redis exists? 正则检测接口输出检测预处理 Y Redis set (expire) response fetch url N …… 返回结果 URL去重规则登录验证 Y redirect? Y 返回 html?

31. 收集 Kafka Consumer Path Hash Redis exists? 正则检测接口输出检测预处理 Y Redis set (expire) response fetch url N …… 返回结果 URL去重规则登录验证 Y redirect? Y 返回 html?

32. 登录验证逻辑 Puppeteer Launch 是否登录过期 goto 58 login url N 是否携带用户信息 Y N Y 登录是否需要 corp登录? 输入登录信息 corp登录指定账号检 N Y 58 passport 默认账号默认用户登录测

33. 收集预处理优先级队列单条检测 H H H H H H H H H 批量检测 Kafka H H H Lighthouse 运行池 H H 输出检测 H L L L L L L L L L L L L L L L L L L L L L L E E E E E E E E E E E E E E E E E E E E E E E E E E E E Consumer Puppeteer 初始化 Create All 占用占用占用占用 chromium 实例 chromium 实例 chromium 实例 chromium 实例占用空闲空闲空闲 chromium 实例 chromium 实例 chromium 实例 chromium 实例 BrowserMax --disable -web-security --no-sandbox --no-zygote ExpireTime —disable -setuid-sandbox --disable-gpu --no-first-run Find Free Run Restart 收集 Close … 分析重试是否成功？报告

34. 收集预处理优先级队列单条检测 H H H H H H H H H 批量检测 Kafka H H H H L L L L L L L L L L L L L L L L L L L L L L E E E E E E E E E E E E E E E E E E E E E E E E E E E E Consumer Puppeteer 初始化 Create All 占用占用占用 chromium 实例 chromium 实例 chromium 实例 chromium 实例占用空闲空闲空闲 chromium 实例 chromium 实例 chromium 实例 chromium 实例 BrowserMax --disable -web-security --no-sandbox --no-zygote ExpireTime —disable -setuid-sandbox --disable-gpu --no-first-run Check Free Run Restart 收集 Close … 分析重试服务接口 MongoDB ⻓连接输出 Lighthouse 占用主动查询回调输出运行池 H H 检测渲染报告 LHR.json 是否成功？报告

35. 服务器资源对比

36. 规划展望

37. 规划展望平台化生态化智能化 • 支持更多平台 • 定期产出性能报告 • 性能自动优化 • 增加更多参数支持 • 增加排名机制 • 自动巡检、报警分享人：余意

38. Thanks～分享人：余意

39.