SuperAPI AI 工具集

web-performance

通用与其它

查看项目

更新于 10-15 19:48

技能介绍

用途:用于诊断和改善 Web 应用性能,覆盖测量、资源交付、渲染、缓存与监控。

主要能力:

  1. Core Web Vitals。LCP 衡量最大可见内容渲染完成时间,良好≤2.5s、需改进≤4.0s、差>4.0s;INP 自 2024 年 3 月取代 FID,衡量点击、轻触、键盘交互延迟,良好≤200ms、需改进≤500ms、差>500ms;CLS 衡量意外布局偏移,良好≤0.1、需改进≤0.25、差>0.25。
  2. 测量工具。Lighthouse 可在 Chrome DevTools、CLI(npx lighthouse URL)或 Node API 运行;PageSpeed Insights 结合实验室与 CrUX 实测数据,评分权重为 LCP 25%、TBT 30%、CLS 25%、FCP 10%、Speed Index 10%;WebPageTest 支持多地点真机与脚本化测试。
  3. 优化方向。图片使用 WebP、AVIF、srcset/sizes、loading="lazy",LCP 图片用 fetchpriority="high";JS 采用代码分割、tree shaking、Web Worker、延迟加载;CSS 内联关键样式、异步加载其余样式、使用 content-visibility;字体用 font-display: swap/optional 并预加载;缓存使用 Cache-Control、ETag、Service Worker;CDN 边缘分发与 Brotli 压缩;预加载与预取;SSR、SSG、CSR、流式渲染等策略。
  4. 分析与监控。webpack-bundle-analyzer、source-map-explorer 分析包体积;web-vitals 库与 PerformanceObserver 做 RUM;慢查询、索引、N+1、Redis/Memcached 缓存影响 TTFB;性能预算涵盖 JS<200KB、CSS<50KB、图片<500KB、字体<100KB、LCP<2.5s、INP<200ms、CLS<0.1、页面总重<1MB;并用 bundlesize、size-limit、Lighthouse CI 等在 CI 中执行。

使用方式与适用场景:按审计清单逐项测量、设定预算、优化 LCP/INP/CLS、启用压缩与缓存、实现代码分割、内联关键 CSS、预加载字体、经由 CDN 交付静态资源,并对第三方脚本做体积与主线程影响审计。适用于前端与全栈性能调优的日常排查。

限制:资料未提供具体的收费、价格、平台或效果保证信息;部分浏览器支持情况(如 zstd)以资料所列版本为准。