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.
kind	subagent
model	gemini-2.5-pro
temperature	0.2
max_turns	15
tools	["mcp_chrome-devtools/*","view_file"]
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