juntingl / web-metrics-collection

web 指标采集器

Web 性能指标采集 SDK

我是一只勤劳的工蚁🐜，收集网站各项 Web 指标参数。

各项指标

• NavigationTime
• NetworkInfo
• FP
• FCP
• FID
• TBT
• LCP
• CLS
• TTI
• FMP

学习路线

资料: web.dev

资料：MDN

Web 性能是构建一个优秀网站的衡量指标之一。

学习线路

• 前置学习
  • 理解各项 Web 指标 资料
    • 健康网站的关键指标
      • Largest Contentful Paint (LCP, 最大内容绘制)
      • First Input Delay (FID，首次输入延迟)
      • Cumulative Layout Shift (CLS，累积布局偏移)
    • 衡量性能和用户体验的指标
      • Time to First Byte(TTFB)
      • First Contentful Paint（FCP，首次内容绘制）
      • Largest Contentful Paint (LCP, 最大内容绘制)
      • First Input Delay (FID，首次输入延迟)
      • Time to Interactive (TTI，可交互时间)
      • Total Blocking Time (TBT，总阻塞时间)
      • Cumulative Layout Shift (CLS，累积布局偏移)
  • 掌握核心 Web 指标的测量工具 资料
    • Lighthouse 灯塔，网站全面测评工具
    • PageSpeed Insights（PSI） 网页速度测量工具
    • Performance API
    • web-vitals 工具库
  • 提升网站性能优化技术 资料
    • 设置性能预算
    • 优化图片
    • 延迟加载图片和视频
    • 优化 JavaScript
    • 优化资源交付
    • 优化 CSS
    • 优化第三方资源
    • 优化网络字体
    • 针对网络质量优化
    • 对性能进行实测
    • 建立性能文化
• 实践
  • Web 指标采集 SDK
• 资料
  • 前端监控SDK