/webperf-media

name: webperf-media
description: Intelligent media optimization with automated workflows for images, videos, and SVGs. Includes decision trees that detect LCP images (triggers format/lazy-loading/priority analysis), identify layout shift risks (missing dimensions), and flag lazy loading issues (above-fold lazy or below-fold eager). Features workflows for complete media audit, LCP image investigation, video performance (poster optimization), and SVG embedded bitmap detection. Cross-skill integration with Core Web Vitals (LCP/CLS impact) and Loading (priority hints, resource preloading). Provides performance budgets and format recommendations based on content type. Use when the user asks about image optimization, LCP is an image/video, layout shifts from media, or media loading strategy. Compatible with Chrome DevTools MCP.
context: fork
license: MIT
metadata:
  author: Joan Leon | @nucliweb
  version: 1.2.0
  mcp-server: chrome-devtools
  category: web-performance
  repository: https://github.com/nucliweb/webperf-snippets

WebPerf: Media Performance

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`.

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

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

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

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)

LCP Image Investigation

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)

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)

SVG Optimization Audit

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

Decision Tree

Use this decision tree to automatically run follow-up snippets based on results:

After 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