Skills
.Work. You
Rest

webperf-media

Community

Automate media optimization for images and video.

Software Engineering#optimization#media#svg#lazy-loading#lcp#webperf
AuthorYeomanYe
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: webperf-media
Download link: https://github.com/YeomanYe/skills/archive/main.zip#webperf-media

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.