Web Performance Optimization

Web-performance-optimization helps developers measure and improve website performance across loading speed, Core Web Vitals metrics, bundle size, caching, and runtime efficiency. It guides users through a systematic five-step process: establishing baseline metrics with Lighthouse audits, identifying bottlenecks like unoptimized images and render-blocking resources, prioritizing high-impact optimizations, implementing improvements such as code splitting and asset optimization, and verifying results through before/after comparisons. This skill solves the problem of slow-loading websites and applications that negatively impact user experience and SEO rankings.

skills.sh installs: 2.4K
GitHub stars: 43.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add sickn33/antigravity-awesome-skills --skill web-performance-optimization --agent claude-code

Installs into .claude/skills of the current project.

Files

Web Performance Optimization

Detailed Guide

Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

When to Use This Skill

Use when website or app is loading slowly
Use when optimizing for Core Web Vitals (LCP, INP, CLS)
Use when reducing JavaScript bundle size
Use when reducing main-thread blocking and slow interactions (INP)
Use when optimizing images and assets
Use when implementing caching strategies
Use when debugging performance bottlenecks
Use when preparing for performance audits

Examples below are hypothetical teaching scenarios, not measured results or guaranteed savings. Measure comparable builds/devices/networks and field distributions; do not infer INP from bundle bytes alone. Pin project-compatible tools before installs; preserve originals and review dependency/API changes.