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":

Image-Element-Audit.js - Analyze all images (format, lazy loading, sizing, fetchpriority)
Video-Element-Audit.js - Analyze all videos (poster, preload, formats, autoplay)
SVG-Embedded-Bitmap-Analysis.js - Detect inefficient bitmap images embedded in SVGs

当用户询问媒体优化或“审计图片和视频”时：

Image-Element-Audit.js - 分析所有图片（格式、懒加载、尺寸、fetchpriority）
Video-Element-Audit.js - 分析所有视频（海报图、预加载、格式、自动播放）
SVG-Embedded-Bitmap-Analysis.js - 检测SVG中嵌入的低效位图

Image Optimization Workflow

图片优化工作流

When the user asks "optimize images" or "check image performance":

Image-Element-Audit.js - Full image audit
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")

当用户询问“优化图片”或“检查图片性能”时：

Image-Element-Audit.js - 完整图片审计
与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":

Video-Element-Audit.js - Full video audit
Cross-reference with webperf-core-web-vitals skill:
- LCP-Video-Candidate.js (check if video/poster is LCP)
Cross-reference with webperf-loading skill:
- Priority-Hints-Audit.js (video poster priority)
- Resource-Hints-Validation.js (video preload)

当用户询问“优化视频”或“检查视频性能”时：

Video-Element-Audit.js - 完整视频审计
与webperf-core-web-vitals技能交叉引用：
- LCP-Video-Candidate.js（检查视频/海报图是否为LCP）
与webperf-loading技能交叉引用：
- Priority-Hints-Audit.js（视频海报图优先级）
- Resource-Hints-Validation.js（视频预加载）

LCP Image Investigation

LCP图片排查

When LCP is an image and needs optimization:

Cross-reference with webperf-core-web-vitals skill:
- LCP.js (measure LCP)
- LCP-Image-Entropy.js (analyze image complexity)
Image-Element-Audit.js - Check format, dimensions, lazy loading
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为图片且需要优化时：

与webperf-core-web-vitals技能交叉引用：
- LCP.js（测量LCP）
- LCP-Image-Entropy.js（分析图片复杂度）
Image-Element-Audit.js - 检查格式、尺寸、懒加载
与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:

Image-Element-Audit.js - Check for missing width/height attributes
Cross-reference with webperf-core-web-vitals skill:
- CLS.js (measure total CLS)
Cross-reference with webperf-interaction skill:
- Layout-Shift-Loading-and-Interaction.js (when shifts occur)

当CLS由缺失尺寸的图片导致时：

Image-Element-Audit.js - 检查是否缺失width/height属性
与webperf-core-web-vitals技能交叉引用：
- CLS.js（测量总CLS）
与webperf-interaction技能交叉引用：
- Layout-Shift-Loading-and-Interaction.js（偏移发生的时机）

SVG Optimization Audit

SVG优化审计

When the user asks about SVG performance or file sizes are large:

SVG-Embedded-Bitmap-Analysis.js - Detect raster images embedded in vector SVGs
Recommend SVGO optimization for SVGs without embedded bitmaps
Recommend extracting bitmaps to separate image files with proper formats

当用户询问SVG性能或文件过大时：

SVG-Embedded-Bitmap-Analysis.js - 检测矢量SVG中嵌入的光栅图片
对于无内嵌位图的SVG，推荐使用SVGO优化
推荐将位图提取为单独文件并使用合适格式

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