Does it support modern image formats?

Absolutely. It provides strategies and code snippets for converting images to AVIF and WebP, implementing responsive picture tags, and using native lazy loading.

Is this skill compatible with React and Next.js?

Yes, it includes specific optimization patterns for modern frameworks, such as using the Next.js Image component and dynamic imports for lazy loading components.

Can it help reduce my JavaScript bundle size?

Yes, it identifies heavy dependencies, suggests lightweight alternatives like date-fns, and helps implement tree shaking and route-based code splitting.

How does this skill help with Core Web Vitals?

It provides step-by-step guidance to measure and fix issues affecting Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) through systematic code audits.

How do I measure the impact of my performance changes?

The skill guides you through establishing baseline metrics using Lighthouse and comparing them after implementation to verify real-world speed improvements.

Web Performance Optimization

Name: Web Performance Optimization
Author: claudiodearaujo

byclaudiodearaujo

分析と監視

Optimizes web application speed and user experience by auditing Core Web Vitals, reducing bundle sizes, and implementing advanced caching strategies.

概要

The Web Performance Optimization skill empowers developers to systematically diagnose and resolve performance bottlenecks in modern web applications. It provides detailed workflows for measuring Core Web Vitals, analyzing network waterfalls, and implementing high-impact fixes such as code splitting, image modernization (AVIF/WebP), and critical rendering path optimization. Whether you are preparing for a performance audit or aiming to improve SEO rankings and conversion rates, this skill offers the specific technical patterns needed to deliver lightning-fast digital experiences.

主な機能

Advanced image optimization including responsive sets and modern format conversion
0 GitHub stars
JavaScript bundle size reduction via tree shaking and dependency replacement
Implementation of robust caching headers and CDN delivery strategies
Comprehensive Core Web Vitals auditing and remediation for LCP, FID, and CLS
Critical rendering path analysis to eliminate render-blocking resources

ユースケース

Modernizing legacy frontends by replacing heavy libraries with high-performance alternatives
Reducing mobile bounce rates by optimizing asset delivery for slow 3G/4G networks
Improving search engine rankings by meeting Google's PageSpeed and Core Web Vitals requirements

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter web-performance-optimization

For use in Claude.ai and ChatGPT

Download Skill

GitHub

概要