# Webperf Media

Intelligent media optimization with automated workflows for images, videos, and SVGs.

- Repository: https://github.com/nucliweb/webperf-snippets (1458 stars)
- Category: AI and agents
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add nucliweb/webperf-snippets --skill webperf-media -g -a claude-code -y`
Codex: `npx skills add nucliweb/webperf-snippets --skill webperf-media -g -a codex -y`
Cursor: `npx skills add nucliweb/webperf-snippets --skill webperf-media -g -a cursor -y`
Gemini CLI: `npx skills add nucliweb/webperf-snippets --skill webperf-media -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add nucliweb/webperf-snippets`

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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` and 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, 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.

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

The rest: https://github.com/nucliweb/webperf-snippets/blob/HEAD/.claude/skills/webperf-media/SKILL.md