SuperAPI AI 工具集

webperf-media

测试与质量

查看项目

更新于 10-16 07:23

技能介绍

用途:在 Chrome DevTools 中测量与分析网页媒体性能,覆盖图片、视频和 SVG。通过 mcp__chrome-devtools__evaluate_script 执行脚本,并用 mcp__chrome-devtools__get_console_message 获取输出。

主要能力:Image-Element-Audit.js 审计图片元素(格式、懒加载、尺寸、fetchpriority);Oversized-Images.js 对比图片文件与实际绘制像素,发现过大或过小(模糊)图片;SVG-Embedded-Bitmap-Analysis.js 检测 SVG 内嵌位图;Video-Element-Audit.js 审计视频(poster、preload、格式、autoplay)。

使用方式:按常见工作流组合脚本。例如完整媒体审计依次运行图片、视频、SVG 三个审计脚本;图片优化流程在图片审计基础上交叉引用加载类技能脚本,检查首屏懒加载、视口外未懒加载、懒加载与 fetchpriority 冲突、优先级提示;视频审计交叉引用 LCP 与加载类脚本;SVG 审计后对无内嵌位图的 SVG 建议 SVGO,对有内嵌位图的建议提取为独立图片。决策树会根据审计结果自动建议后续脚本与修复方向。

阈值与场景:资料给出参考阈值,如图片单文件 >500KB 警告、>1MB 严重;初始加载图片总量 >5MB 建议懒加载;视频 >10MB 警告、>50MB 严重;首屏图片懒加载视为关键 LCP 问题;LCP 图片缺少 fetchpriority="high" 建议补充。适用 LCP 图片排查、图片布局偏移、SVG 优化等场景。

限制:脚本运行于 Chrome DevTools 环境;部分后续脚本属其他技能(webperf-loading、webperf-core-web-vitals、webperf-interaction),需对应技能可用。参考资料为 references/snippets.md 与 references/schema.md。其余平台支持、安装方式与收费信息暂未提供。