skills.rest
YeomanYe
YeomanYeCOMMUNITY
Explore all skills by this author →
GitHub

webperf-media

Audit images, videos, and SVGs to optimize load performance and visual stability.

Updated May 12, 2026
Search Tags:#optimization#media#svg#lazy-loading#lcp#webperf
One-click install
npx skills add https://github.com/YeomanYe/skills --skill webperf-media
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webperf-media
Source: https://github.com/YeomanYe/skills/tree/main/webperf-media
Command: npx skills add https://github.com/YeomanYe/skills --skill webperf-media

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates media optimization and auditing to improve load performance and visual stability by analyzing images, videos, and SVGs, detecting LCP candidates, layout-shift risks, and lazy-loading misconfigurations.

Core Features & Use Cases

  • Complete media audit: analyzes images, videos, and SVGs to identify formats, loading strategies, and dimensions.
  • LCP investigation and video poster optimization: identifies potential LCP elements and improves posters.
  • SVG embedded bitmap detection: flags embedded bitmaps and recommends extraction or optimization.
  • Cross-skill integration with Core Web Vitals and Loading: budgets, fetch priority hints, and preloading recommendations.
  • Use cases: diagnosing media-related performance bottlenecks and implementing format upgrades (WebP/AVIF).

Quick Start

Run a full audit on the current page to identify media assets issues and generate actionable optimization recommendations.

Frequently Asked Questions about webperf-media

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize media assets to improve LCP and web performance?▼

A complete media audit analyzes images, videos, and SVGs to identify format issues, loading strategies, and dimensions, then provides actionable guidance to improve load performance and visual stability across your web pages.

What is the best way to audit lazy-loading misconfigurations and layout-shift risks?▼

The best way to audit lazy-loading misconfigurations is to analyze media assets across real-world page scenarios, detecting layout-shift risks and generating structured results with actionable optimization guidance.

Can I use this media audit to investigate video poster optimization?▼

Yes, the media audit investigates video poster optimization by identifying potential LCP elements and providing actionable recommendations to improve poster loading performance.

Do I need specific dependencies to detect LCP candidates and format modernization opportunities?▼

No dependencies are required. The audit directly analyzes real-world page scenarios to detect LCP candidates, identify layout-shift risks, and recommend format modernization like WebP or AVIF upgrades.

How does cross-skill integration work with Core Web Vitals and loading budgets?▼

Cross-skill integration works by connecting media audit results with Core Web Vitals and Loading skills, utilizing fetch priority hints, preloading recommendations, and loading budgets to optimize overall page performance.

Related Skills

Explore More Software Engineering Skills→
BURHANDEV-ENTERPRISEBURHANDEV-ENTERPRISE

mop-ui-clone

Extract HTML structure, CSS design tokens, and 3D assets from websites.

Official
Advanced
rmjamesrmjames
1

image-processor

Resize and crop raster and SVG images with ImageMagick and SVGO.

Community
Advanced
pixels-and-codepixels-and-code

Core Web Vitals optimisation

Optimize LCP, INP, and CLS metrics with targeted code examples.

Official
Advanced
PatternsDevPatternsDev
235

compression

Apply Gzip and Brotli compression to JavaScript assets in build pipelines.

Official
Advanced