Webperf Media

A fork of Joan Leon's webperf-snippets that runs Chrome DevTools audits for images, videos, and SVGs. You get three core scripts: image element audit (format, lazy loading, sizing), video element audit (poster, preload, formats), and SVG bitmap detection. The real value is in the decision trees. It detects LCP images and triggers format analysis, spots layout shift risks from missing dimensions, and flags lazy loading mistakes like above-the-fold lazy or below-the-fold eager. Integrates with the webperf-core-web-vitals and webperf-loading skills to cross-reference LCP impact and resource priority. Use this when you need to audit media systematically rather than manually checking DevTools. The workflows are opinionated but sensible.

skills.sh installs: 266
GitHub stars: 1.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nucliweb/webperf-snippets --skill webperf-media --agent claude-code

Installs into .claude/skills of the current project.

Files

WebPerf: Media Performance

JavaScript snippets for measuring web performance in Chrome DevTools.

Running a script

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.
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.
When status is "error" or "unsupported", read error: the page may not have loaded yet, or the browser lacks the API.