Webperf Media
Intelligent media optimization with automated workflows for images, videos, and SVGs.
Install
npx skills add nucliweb/webperf-snippets --skill webperf-media -g -a claude-code -y- Repository
- nucliweb/webperf-snippets1.5k
- Category
- AI and agents
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 2,656 tokens
- Runs scripts
- Yes, review before use
What it does
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.
WebPerf: Media Performance
JavaScript snippets for measuring web performance in Chrome DevTools.
Running a script
- Run the script with
mcp__chrome-devtools__evaluate_scriptand read the object it returns. The scripts have no console output, so the returned object is the result:script,statusand the metric data (value,rating,details,items,issues), as described inreferences/schema.md. - When
statusis"tracking", the script keeps observing the page. After the interactions, call the function named ingetDataFnwith anothermcp__chrome-devtools__evaluate_scriptcall, for examplegetINP(), and read the object it returns. - When
statusis"error"or"unsupported", readerror: 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, 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 auditscripts/Oversized-Images.js, Oversized imagesscripts/SVG-Embedded-Bitmap-Analysis.js, SVG embedded bitmap analysisscripts/Video-Element-Audit.js, Video element audit
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
