Can it help reduce my JavaScript bundle size?

Yes, it identifies heavy dependencies and suggests modern techniques like tree shaking, lazy loading, and dynamic imports to decrease initial load times.

Is this skill specific to a certain framework?

No, it covers general web standards as well as framework-specific optimizations for platforms like Next.js, React, and Vue.

How does this skill improve Core Web Vitals?

It provides specific code implementations to resolve Largest Contentful Paint (LCP) issues, minimize First Input Delay (FID), and eliminate Cumulative Layout Shift (CLS) by optimizing the critical rendering path.

How do I measure the impact of these optimizations?

The skill guides you through re-running Lighthouse audits and comparing 'before and after' metrics to verify performance gains across different network conditions.

Does it support modern image formats like WebP and AVIF?

The skill provides patterns for implementing high-performance responsive images with modern format fallbacks to significantly reduce asset weight.

Web Performance Optimization

Name: Web Performance Optimization
Author: claudiodearaujo

byclaudiodearaujo

•

分析と監視

Optimizes website loading speed, Core Web Vitals, and asset delivery to improve user experience and SEO rankings.

The Web Performance Optimization skill provides a systematic framework for developers to analyze and resolve critical performance bottlenecks. It guides users through a comprehensive workflow including Core Web Vitals measurement (LCP, FID, CLS), JavaScript bundle analysis, and the implementation of advanced caching and asset delivery strategies. By identifying render-blocking resources and offering actionable code patterns for lazy loading and image optimization, this skill helps developers achieve higher Lighthouse scores and smoother runtime performance.

主な機能

011 GitHub stars

02Implementation of advanced caching headers and CDN strategies

03Critical rendering path optimization and render-blocking resource removal

04Automated image optimization strategies using WebP and AVIF formats

05JavaScript bundle size reduction via tree shaking and code splitting

06Core Web Vitals auditing and optimization for LCP, FID, and CLS

ユースケース

01Improving Google Search rankings by optimizing Core Web Vitals metrics

02Debugging and fixing long-task execution that blocks the main thread

03Reducing mobile page load times by implementing responsive image strategies

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro web-performance-optimization

For use in Claude.ai and ChatGPT

Download Skill

主な機能

011 GitHub stars

02Implementation of advanced caching headers and CDN strategies

03Critical rendering path optimization and render-blocking resource removal

04Automated image optimization strategies using WebP and AVIF formats

05JavaScript bundle size reduction via tree shaking and code splitting

06Core Web Vitals auditing and optimization for LCP, FID, and CLS

ユースケース

01Improving Google Search rankings by optimizing Core Web Vitals metrics

02Debugging and fixing long-task execution that blocks the main thread

03Reducing mobile page load times by implementing responsive image strategies

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro web-performance-optimization

For use in Claude.ai and ChatGPT

Download Skill