How does this skill help with Core Web Vitals?

It identifies specific issues affecting LCP, FID, and CLS, then provides code changes such as preloading hero images or adding aspect ratios to prevent layout shifts.

Does it support modern image formats like WebP and AVIF?

Absolutely. It provides implementation strategies for converting assets and using the HTML element for responsive, high-compression images.

Can it help reduce my JavaScript bundle size?

Yes, it analyzes dependencies to find heavy packages, suggests lighter alternatives (like date-fns for Moment.js), and guides you through tree-shaking and code-splitting.

Is this compatible with modern frameworks like React and Next.js?

Yes, it includes patterns for dynamic imports, Next/Image optimization, and route-based code splitting tailored for modern frontend frameworks.

How do I verify the improvements after optimization?

The skill includes a 'Verify Improvements' phase where it helps you re-run Lighthouse audits and compare real user metrics against your initial baseline.

Web Performance Optimizer

Name: Web Performance Optimizer
Author: sickn33

bysickn33

•

31,432

•

Analytics & Monitoring

Optimizes website loading speeds, Core Web Vitals, and runtime performance through systematic audits and implementation of best practices.

This skill empowers developers to transform slow-loading web applications into high-performance experiences by addressing critical bottlenecks. It provides a structured methodology for measuring performance baselines using Lighthouse, analyzing Core Web Vitals (LCP, FID, CLS), and implementing advanced techniques such as code splitting, modern image optimization, and caching strategies to improve SEO rankings and user retention. Whether you are debugging a slow TTI or preparing for a performance audit, this skill provides the agentic guidance needed to deliver production-grade optimization.

Key Features

01Critical rendering path and lazy loading implementation

02Automated Core Web Vitals analysis (LCP, FID, CLS)

03Advanced image optimization and modern format conversion

0431,432 GitHub stars

05JavaScript bundle size reduction and tree-shaking

06Performance audit and verification workflows

Use Cases

01Fixing Cumulative Layout Shift (CLS) to improve Google search rankings

02Optimizing large React or Next.js bundle sizes for faster interactivity

03Reducing mobile page load times on slow 3G/4G networks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sickn33/antigravity-awesome-skills web-performance-optimization

For use in Claude.ai and ChatGPT

Key Features

01Critical rendering path and lazy loading implementation

02Automated Core Web Vitals analysis (LCP, FID, CLS)

03Advanced image optimization and modern format conversion

0431,432 GitHub stars

05JavaScript bundle size reduction and tree-shaking

06Performance audit and verification workflows

Use Cases

01Fixing Cumulative Layout Shift (CLS) to improve Google search rankings

02Optimizing large React or Next.js bundle sizes for faster interactivity

03Reducing mobile page load times on slow 3G/4G networks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sickn33/antigravity-awesome-skills web-performance-optimization

For use in Claude.ai and ChatGPT