Back to Details

webperf-media

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

WebPerf: Media Performance

WebPerf：媒体性能

JavaScript snippets for measuring web performance in Chrome DevTools. Execute with 
mcp__chrome-devtools__evaluate_script
, capture output with 
mcp__chrome-devtools__get_console_message
.
用于在Chrome DevTools中测量Web性能的JavaScript代码片段。通过
mcp__chrome-devtools__evaluate_script
执行，使用
mcp__chrome-devtools__get_console_message
捕获输出。

Scripts

脚本

  • scripts/Image-Element-Audit.js
    — Image Element Audit
  • scripts/SVG-Embedded-Bitmap-Analysis.js
    — SVG Embedded Bitmap Analysis
  • scripts/Video-Element-Audit.js
    — Video Element Audit
  • scripts/Image-Element-Audit.js
    — 图片元素审计
  • scripts/SVG-Embedded-Bitmap-Analysis.js
    — SVG内嵌位图分析
  • scripts/Video-Element-Audit.js
    — 视频元素审计

Common Workflows

常见工作流

Complete Media Audit

完整媒体审计

When the user asks for media optimization or "audit images and videos":
  1. Image-Element-Audit.js - Analyze all images (format, lazy loading, sizing, fetchpriority)
  2. Video-Element-Audit.js - Analyze all videos (poster, preload, formats, autoplay)
  3. SVG-Embedded-Bitmap-Analysis.js - Detect inefficient bitmap images embedded in SVGs
当用户询问媒体优化或“审计图片和视频”时：
  1. Image-Element-Audit.js - 分析所有图片（格式、懒加载、尺寸、fetchpriority）
  2. Video-Element-Audit.js - 分析所有视频（海报图、预加载、格式、自动播放）
  3. SVG-Embedded-Bitmap-Analysis.js - 检测SVG中嵌入的低效位图

Image Optimization Workflow

图片优化工作流

When the user asks "optimize images" or "check image performance":
  1. Image-Element-Audit.js - Full image audit
  2. Cross-reference with webperf-loading skill:
    • Find-Above-The-Fold-Lazy-Loaded-Images.js (incorrectly lazy-loaded images)
    • Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js (missing lazy loading)
    • Find-Images-With-Lazy-and-Fetchpriority.js (contradictory attributes)
    • Priority-Hints-Audit.js (LCP image should have fetchpriority="high")
当用户询问“优化图片”或“检查图片性能”时：
  1. Image-Element-Audit.js - 完整图片审计
  2. 与webperf-loading技能交叉引用：
    • Find-Above-The-Fold-Lazy-Loaded-Images.js（错误设置懒加载的图片）
    • Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js（缺失懒加载的图片）
    • Find-Images-With-Lazy-and-Fetchpriority.js（属性冲突）
    • Priority-Hints-Audit.js（LCP图片应设置fetchpriority="high"）

Video Performance Audit

视频性能审计

When the user asks "optimize videos" or "check video performance":
  1. Video-Element-Audit.js - Full video audit
  2. Cross-reference with webperf-core-web-vitals skill:
    • LCP-Video-Candidate.js (check if video/poster is LCP)
  3. Cross-reference with webperf-loading skill:
    • Priority-Hints-Audit.js (video poster priority)
    • Resource-Hints-Validation.js (video preload)
当用户询问“优化视频”或“检查视频性能”时：
  1. Video-Element-Audit.js - 完整视频审计
  2. 与webperf-core-web-vitals技能交叉引用：
    • LCP-Video-Candidate.js（检查视频/海报图是否为LCP）
  3. 与webperf-loading技能交叉引用：
    • Priority-Hints-Audit.js（视频海报图优先级）
    • Resource-Hints-Validation.js（视频预加载）

LCP Image Investigation

LCP图片排查

When LCP is an image and needs optimization:
  1. Cross-reference with webperf-core-web-vitals skill:
    • LCP.js (measure LCP)
    • LCP-Image-Entropy.js (analyze image complexity)
  2. Image-Element-Audit.js - Check format, dimensions, lazy loading
  3. Cross-reference with webperf-loading skill:
    • Find-Above-The-Fold-Lazy-Loaded-Images.js (should NOT be lazy)
    • Priority-Hints-Audit.js (should have fetchpriority="high")
    • Resource-Hints-Validation.js (consider preload)
当LCP为图片且需要优化时：
  1. 与webperf-core-web-vitals技能交叉引用：
    • LCP.js（测量LCP）
    • LCP-Image-Entropy.js（分析图片复杂度）
  2. Image-Element-Audit.js - 检查格式、尺寸、懒加载
  3. 与webperf-loading技能交叉引用：
    • Find-Above-The-Fold-Lazy-Loaded-Images.js（不应设置懒加载）
    • Priority-Hints-Audit.js（应设置fetchpriority="high"）
    • Resource-Hints-Validation.js（考虑预加载）

Layout Shift from Images

图片导致的布局偏移

When CLS is caused by images without dimensions:
  1. Image-Element-Audit.js - Check for missing width/height attributes
  2. Cross-reference with webperf-core-web-vitals skill:
    • CLS.js (measure total CLS)
  3. Cross-reference with webperf-interaction skill:
    • Layout-Shift-Loading-and-Interaction.js (when shifts occur)
当CLS由缺失尺寸的图片导致时：
  1. Image-Element-Audit.js - 检查是否缺失width/height属性
  2. 与webperf-core-web-vitals技能交叉引用：
    • CLS.js（测量总CLS）
  3. 与webperf-interaction技能交叉引用：
    • Layout-Shift-Loading-and-Interaction.js（偏移发生的时机）

SVG Optimization Audit

SVG优化审计

When the user asks about SVG performance or file sizes are large:
  1. SVG-Embedded-Bitmap-Analysis.js - Detect raster images embedded in vector SVGs
  2. Recommend SVGO optimization for SVGs without embedded bitmaps
  3. Recommend extracting bitmaps to separate image files with proper formats
当用户询问SVG性能或文件过大时：
  1. SVG-Embedded-Bitmap-Analysis.js - 检测矢量SVG中嵌入的光栅图片
  2. 对于无内嵌位图的SVG，推荐使用SVGO优化
  3. 推荐将位图提取为单独文件并使用合适格式

Decision Tree

决策树

Use this decision tree to automatically run follow-up snippets based on results:
根据结果自动运行后续代码片段的决策树：

After Image-Element-Audit.js

执行Image-Element-Audit.js后

  • If images missing width/height attributes → Layout shift risk, run:
    1. webperf-core-web-vitals:CLS.js (measure CLS impact)
    2. webperf-interaction:Layout-Shift-Loading-and-Interaction.js (timing of shifts)
    3. Recommend adding explicit dimensions to all images
  • If images using wrong format (JPEG for graphics, PNG for photos) → Recommend:
    • Modern formats: WebP, AVIF
    • Appropriate format for content type
    • Format-specific compression settings
  • If images much larger than display size → Recommend:
    • Responsive images with srcset
    • Appropriate image CDN sizing
    • srcset with multiple sizes for different viewports
  • If above-the-fold images are lazy-loaded → Run:
    1. webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js (confirm)
    2. webperf-core-web-vitals:LCP.js (measure LCP impact)
    3. Recommend removing loading="lazy" from above-fold images
  • If LCP image lacks fetchpriority="high" → Run:
    1. webperf-core-web-vitals:LCP.js (measure current LCP)
    2. webperf-loading:Priority-Hints-Audit.js (full priority audit)
    3. Recommend adding fetchpriority="high" to LCP image
  • If below-the-fold images are NOT lazy-loaded → Run:
    1. webperf-loading:Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js (confirm)
    2. Recommend adding loading="lazy" to offscreen images
  • If images have both loading="lazy" AND fetchpriority="high" → Run:
    1. webperf-loading:Find-Images-With-Lazy-and-Fetchpriority.js (confirm contradiction)
    2. Recommend removing one of the conflicting attributes
  • If images competing with critical resources → Run:
    1. webperf-loading:Find-render-blocking-resources.js (resource priority conflicts)
    2. webperf-loading:TTFB-Resources.js (identify slow image CDN)
  • If images missing alt text → Accessibility issue, recommend adding descriptive alt text
  • 若图片缺失width/height属性 → 存在布局偏移风险，执行：
    1. webperf-core-web-vitals:CLS.js（测量CLS影响）
    2. webperf-interaction:Layout-Shift-Loading-and-Interaction.js（偏移时机）
    3. 建议为所有图片添加明确的尺寸属性
  • 若图片使用错误格式（图形用JPEG，照片用PNG） → 建议：
    • 使用现代格式：WebP、AVIF
    • 根据内容类型选择合适格式
    • 针对特定格式设置压缩参数
  • 若图片实际尺寸远大于显示尺寸 → 建议：
    • 使用带srcset的响应式图片
    • 利用图片CDN进行合适尺寸调整
    • 为不同视口提供多尺寸的srcset
  • 若首屏图片设置了懒加载 → 执行：
    1. webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js（确认问题）
    2. webperf-core-web-vitals:LCP.js（测量对LCP的影响）
    3. 建议移除首屏图片的loading="lazy"属性
  • 若LCP图片未设置fetchpriority="high" → 执行：
    1. webperf-core-web-vitals:LCP.js（测量当前LCP）
    2. webperf-loading:Priority-Hints-Audit.js（完整优先级审计）
    3. 建议为LCP图片添加fetchpriority="high"属性
  • 若非首屏图片未设置懒加载 → 执行：
    1. webperf-loading:Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js（确认问题）
    2. 建议为屏幕外图片添加loading="lazy"属性
  • 若图片同时设置loading="lazy"和fetchpriority="high" → 执行：
    1. webperf-loading:Find-Images-With-Lazy-and-Fetchpriority.js（确认属性冲突）
    2. 建议移除其中一个冲突属性
  • 若图片与关键资源竞争 → 执行：
    1. webperf-loading:Find-render-blocking-resources.js（资源优先级冲突）
    2. webperf-loading:TTFB-Resources.js（识别慢速图片CDN）
  • 若图片缺失alt文本 → 可访问性问题，建议添加描述性alt文本

After Video-Element-Audit.js

执行Video-Element-Audit.js后

  • If video is LCP candidate → Run:
    1. webperf-core-web-vitals:LCP-Video-Candidate.js (confirm)
    2. webperf-core-web-vitals:LCP.js (measure LCP)
    3. webperf-core-web-vitals:LCP-Sub-Parts.js (break down timing)
    4. Optimize video poster image or consider image alternative
  • If video missing poster → Recommend:
    • Adding poster image for better perceived performance
    • Using first frame or custom thumbnail
    • Optimizing poster as you would an image
  • If video uses preload="auto" → Bandwidth concern, evaluate:
    • Is video above-the-fold? Keep preload="auto"
    • Is video below-the-fold? Change to preload="metadata" or "none"
    • Is autoplay intended? Verify preload matches intent
  • If autoplay video without muted → Browser will block, recommend:
    • Adding muted attribute
    • Or removing autoplay
  • If video missing multiple formats → Recommend:
    • WebM for Chrome/Firefox
    • MP4 as fallback for Safari
    • Order sources by efficiency (WebM first)
  • If large video files (>5MB) → Recommend:
    • Compression/transcoding
    • Adaptive bitrate streaming (HLS, DASH)
    • Loading strategy optimization
  • 若视频为LCP候选元素 → 执行：
    1. webperf-core-web-vitals:LCP-Video-Candidate.js（确认）
    2. webperf-core-web-vitals:LCP.js（测量LCP）
    3. webperf-core-web-vitals:LCP-Sub-Parts.js（分解时间）
    4. 优化视频海报图或考虑替换为图片
  • 若视频缺失海报图 → 建议：
    • 添加海报图以提升感知性能
    • 使用第一帧或自定义缩略图
    • 像优化图片一样优化海报图
  • 若视频设置preload="auto" → 带宽问题，评估：
    • 视频是否在首屏？保留preload="auto"
    • 视频是否在非首屏？改为preload="metadata"或"none"
    • 是否需要自动播放？验证preload设置是否符合预期
  • 若非静音自动播放视频 → 浏览器会阻止，建议：
    • 添加muted属性
    • 或移除autoplay属性
  • 若视频缺失多种格式 → 建议：
    • Chrome/Firefox使用WebM
    • Safari使用MP4作为 fallback
    • 按效率排序资源（WebM优先）
  • 若视频文件过大(>5MB) → 建议：
    • 压缩/转码
    • 自适应比特率流（HLS、DASH）
    • 优化加载策略

After SVG-Embedded-Bitmap-Analysis.js

执行SVG-Embedded-Bitmap-Analysis.js后

  • If bitmap images found in SVGs → Recommend:
    1. Extract bitmaps to separate files
    2. Use WebP/AVIF format for extracted images
    3. Reference images from SVG with <image> element
    4. Or convert to pure vector if possible
  • If large embedded bitmaps (>100KB) → Critical inefficiency:
    • SVG parsing overhead + large bitmap = worst of both worlds
    • Urgently recommend extraction
  • If multiple small bitmaps in SVG → Consider:
    • CSS sprites for small icons
    • SVG symbols for reusable graphics
    • Extracting to individual optimized images
  • 若SVG中存在位图 → 建议：
    1. 将位图提取为单独文件
    2. 提取的图片使用WebP/AVIF格式
    3. 在SVG中通过<image>元素引用图片
    4. 若可能，转换为纯矢量图
  • 若内嵌位图过大(>100KB) → 严重低效：
    • SVG解析开销 + 大位图 = 双重弊端
    • 强烈建议立即提取
  • 若SVG中包含多个小位图 → 考虑：
    • 小图标使用CSS精灵图
    • 可复用图形使用SVG symbols
    • 提取为独立的优化图片

Performance Budget Thresholds

性能预算阈值

Use these thresholds to trigger recommendations:
Image File Sizes:
  • Warning: Individual image > 500KB → Check format and compression
  • Critical: Individual image > 1MB → Urgent optimization needed
  • Total images: > 5MB on initial load → Implement lazy loading
Image Formats:
  • JPEG for graphics/icons → Recommend PNG or SVG
  • PNG for photos → Recommend JPEG, WebP, or AVIF
  • GIF for animations → Recommend video (MP4/WebM) or animated WebP
  • No modern formats (WebP/AVIF) → Recommend upgrading
Image Dimensions:
  • Intrinsic size > 2x display size → Recommend responsive images
  • Intrinsic size < display size → Upscaling = blurry, provide larger source
Video File Sizes:
  • Warning: Video > 10MB → Consider compression or streaming
  • Critical: Video > 50MB → Urgent optimization or streaming needed
Lazy Loading:
  • Above-fold images lazy-loaded → Critical LCP impact, fix immediately
  • Below-fold images NOT lazy-loaded → Wasted bandwidth, implement lazy loading
  • >10 images eager-loaded → Excessive, implement lazy loading
Priority Hints:
  • LCP image without fetchpriority="high" → Add for 10-30% LCP improvement
  • Non-LCP images with fetchpriority="high" → Remove, wasting browser hints
  • Lazy + fetchpriority="high" conflict → Fix contradiction
使用以下阈值触发建议：
图片文件大小：
  • 警告：单张图片>500KB → 检查格式和压缩
  • 严重：单张图片>1MB → 急需优化
  • 总图片大小：初始加载时总大小>5MB → 实现懒加载
图片格式：
  • 图形/图标使用JPEG → 建议使用PNG或SVG
  • 照片使用PNG → 建议使用JPEG、WebP或AVIF
  • 动画使用GIF → 建议使用视频（MP4/WebM）或动画WebP
  • 未使用现代格式（WebP/AVIF） → 建议升级
图片尺寸：
  • 原始尺寸>显示尺寸的2倍 → 建议使用响应式图片
  • 原始尺寸<显示尺寸 → 拉伸会导致模糊，提供更大尺寸的源图
视频文件大小：
  • 警告：视频>10MB → 考虑压缩或流式传输
  • 严重：视频>50MB → 急需优化或使用流式传输
懒加载：
  • 首屏图片设置懒加载 → 严重影响LCP，立即修复
  • 非首屏图片未设置懒加载 → 浪费带宽，实现懒加载
  • 10张图片立即加载 → 数量过多，实现懒加载
优先级提示：
  • LCP图片未设置fetchpriority="high" → 添加后可提升10-30%的LCP性能
  • 非LCP图片设置fetchpriority="high" → 移除，避免浪费浏览器提示资源
  • lazy与fetchpriority="high"冲突 → 修复矛盾设置

References

参考资料

  • references/snippets.md
    — Descriptions and thresholds for each script
  • references/schema.md
    — Return value schema for interpreting script output
  • references/snippets.md
    — 各脚本的说明和阈值
  • references/schema.md
    — 用于解析脚本输出的返回值 schema