{"slug":"webperf-media-2","title":"webperf-media","summary":"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 o","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-10-19T21:17:34.75081Z","repo":{"url":"https://github.com/nucliweb/webperf-snippets","stars":1454,"forks":90,"license":"MIT","updatedAt":"2026-10-19T11:21:09Z"},"bodyHtml":"
\n

name: webperf-media\ndescription: 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.\ncontext: fork\nlicense: MIT\nmetadata:\nauthor: Joan Leon | @nucliweb\nversion: 2.0.1\nmcp-server: chrome-devtools\ncategory: web-performance\nrepository: https://github.com/nucliweb/webperf-snippets

\n

WebPerf: Media Performance

\n

JavaScript snippets for measuring web performance in Chrome DevTools.

\n

Running a script

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

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.

\n

Scripts

\n\n

Common Workflows

\n

Complete Media Audit

\n

When the user asks for media optimization or \"audit images and videos\":

\n
    \n
  1. Image-Element-Audit.js - Analyze all images (format, lazy loading, sizing, fetchpriority)
    2. \n
  2. Video-Element-Audit.js - Analyze all videos (poster, preload, formats, autoplay)
    3. \n
  3. SVG-Embedded-Bitmap-Analysis.js - Detect inefficient bitmap images embedded in SVGs
    4. \n
\n

Image Optimization Workflow

\n

When the user asks \"optimize images\" or \"check image performance\":

\n
    \n
  1. Image-Element-Audit.js - Full image audit
    2. \n
  2. Cross-reference with webperf-loading skill:\n\n
    3. \n
\n

Oversized Images Audit

\n

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

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

Video Performance Audit

\n

When the user asks \"optimize videos\" or \"check video performance\":

\n
    \n
  1. Video-Element-Audit.js - Full video audit
    2. \n
  2. Cross-reference with webperf-core-web-vitals skill:\n\n
    3. \n
  3. Cross-reference with webperf-loading skill:\n\n
    4. \n
\n

LCP Image Investigation

\n

When LCP is an image and needs optimization:

\n
    \n
  1. Cross-reference with webperf-core-web-vitals skill:\n\n
    2. \n
  2. Image-Element-Audit.js - Check format, dimensions, lazy loading
    3. \n
  3. Cross-reference with webperf-loading skill:\n\n
    4. \n
\n

Layout Shift from Images

\n

When CLS is caused by images without dimensions:

\n
    \n
  1. Image-Element-Audit.js - Check for missing width/height attributes
    2. \n
  2. Cross-reference with webperf-core-web-vitals skill:\n\n
    3. \n
  3. Cross-reference with webperf-interaction skill:\n\n
    4. \n
\n

SVG Optimization Audit

\n

When the user asks about SVG performance or file sizes are large:

\n
    \n
  1. SVG-Embedded-Bitmap-Analysis.js - Detect raster images embedded in vector SVGs
    2. \n
  2. Recommend SVGO optimization for SVGs without embedded bitmaps
    3. \n
  3. Recommend extracting bitmaps to separate image files with proper formats
    4. \n
\n

Decision Tree

\n

Use this decision tree to automatically run follow-up snippets based on results:

\n

After Image-Element-Audit.js

\n\n

After Oversized-Images.js

\n\n

After Video-Element-Audit.js

\n\n

After SVG-Embedded-Bitmap-Analysis.js

\n\n

Performance Budget Thresholds

\n

Use these thresholds to trigger recommendations:

\n

Image File Sizes:

\n\n

Image Formats:

\n\n

Image Dimensions:

\n\n

Video File Sizes:

\n\n

Lazy Loading:

\n\n

Priority Hints:

\n\n

References

\n\n","files":[{"path":"references/schema.md","sizeBytes":49186,"isText":true},{"path":"references/snippets.md","sizeBytes":1172,"isText":true},{"path":"scripts/Image-Element-Audit.js","sizeBytes":6250,"isText":true},{"path":"scripts/Oversized-Images.js","sizeBytes":3839,"isText":true},{"path":"scripts/SVG-Embedded-Bitmap-Analysis.js","sizeBytes":2838,"isText":true},{"path":"scripts/Video-Element-Audit.js","sizeBytes":3820,"isText":true},{"path":"SKILL.md","sizeBytes":11759,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-10-19T21:18:41.542747Z","sha256":"86BA4C526952A13E407E42FAC262390A525BE1A3C26D70DFDFCBE89CF9A5DF17","sizeBytes":27527},"review":null,"source":{"repositoryUrl":"https://github.com/nucliweb/webperf-snippets","path":".claude/skills/webperf-media","license":"MIT","commit":"d2f9739cda7363daab6ade96ad2b2198e9b44e8e","subtreeSha":"A2C102C1598A7280B4EA2D6A501CB833B977518F7DED3AE320C5153AB0075FC9","lastSyncedAt":"2026-10-19T21:17:31.667373Z"},"reviewedAt":"2026-10-19T21:21:00.423288Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/nucliweb/webperf-snippets/tree/main/.claude/skills/webperf-media"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install nucliweb-webperf-snippets@llmmart"},{"target":"git","command":"git clone https://github.com/nucliweb/webperf-snippets.git"}]}