/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.
license: MIT
metadata:
  author: Joan Leon | @nucliweb
  version: 2.6.3
  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.

Running a script

1. Run the script with `mcp__chrome-devtools__evaluate_script`, passing the file instead of its code: `sourcePath` with the absolute path of `scripts/<Name>.js` in this skill, and `format: "script"`, since a script runs by itself and is not a function. Read the object it returns. The scripts have no console output, so the returned object is the result: `script`, `status` and the metric data (`value`, `rating`, `details`, `items`, `issues`), as described in `references/schema.md`. 2. When `status` is `"tracking"`, the script keeps observing the page. After the interactions, call the function named in `getDataFn` with another `mcp__chrome-devtools__evaluate_script` call, as an arrow function in `function`, for example `() => getINP()`, and read the object it returns. 3. When `status` is `"error"` or `"unsupported"`, read `error`: the page may not have loaded yet, or the browser lacks the API.

`sourcePath` and `format` need Chrome DevTools MCP 1.11.0 or later, and the server only reads files inside its workspace roots: the project, the temp folder and each `--workspace=<folder>` in its arguments. When it answers `Access denied`, as it does for a skill installed outside the project, such as in `~/.claude/skills/`, read the file and pass its code in `function`, still with `format: "script"`. A `--workspace` with the real folder of the skills makes the path work; the server follows symlinks, so a link to the folder is not enough.

Without Chrome DevTools MCP, run the same snippet with the [webperf-snippets CLI](https://webperf-snippets.net/CLI), which loads the page in headless Chromium and prints the same result objects: `npx webperf-snippets <url> --snippet <Name> --json`, where `<Name>` is the script name without `.js`. It needs Playwright and Chromium (`npm install --save-dev webperf-snippets playwright`, then `npx playwright install chromium`), and tracking snippets take `--interact-script <file>` to drive the interactions.

Scripts

• `scripts/Image-Element-Audit.js` — Image element audit
• `scripts/Oversized-Images.js` — Oversized images
• `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")

Oversized Images Audit

When the user asks about images larger than needed, wasted bytes, blurry images, or `srcset`/`sizes` problems:

1. **Oversized-Images.js** - Compare each image file with the pixels drawn (oversized and undersized) 2. **Image-Element-Audit.js** - Check format, lazy loading and `srcset` usage of the flagged images 3. Cross-reference with **webperf-core-web-vitals** skill:

• LCP.js (check whether an oversized image is the LCP element)

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-Sh