webperf-media

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

Try your first task

Check image loading and sizing

Start a fresh conversation.

Use webperf-media to run Image-Element-Audit.js on <url>. Summarize the image format, lazy-loading, sizing, and fetchpriority findings, and identify the most useful fixes supported by the results.

Required inputs

Replace <url> with the page URL to inspect.
Configure Chrome DevTools MCP, or install the documented CLI with Playwright and Chromium.

Suggested template by Skill Leaderboard, grounded in the linked source. Task evidence ↗

Inside SKILL.md

249 lines

Section content has not been verified for this skill yet.

Full source remains withheld under the current source-display policy. Read the author’s source ↗