How does this skill help with Core Web Vitals?

It provides systematic diagnostic steps to identify what is triggering high LCP, FID, or CLS scores and offers specific code implementations to fix them, such as fetchpriority for images or aspect-ratio CSS for layout stability.

How do I measure the impact of the optimizations?

The skill outlines a verification process using Lighthouse audits, network waterfall analysis, and comparing before-and-after metrics to ensure every change results in a measurable performance gain.

Does it provide tools for image compression?

It provides guidance and scripts for using modern tools like Sharp to convert assets to WebP and AVIF formats while implementing responsive image sets via the element.

Can I use this for React or Next.js applications?

Yes, the skill includes patterns for modern frameworks, including dynamic imports for code splitting and utilizing framework-specific components like Next.js Image for automated optimization.

Web Performance Optimization

Name: Web Performance Optimization
Author: claudiodearaujo

byclaudiodearaujo

0•

Analytics & Monitoring

Optimizes website speed, Core Web Vitals, and resource delivery to enhance user experience and search engine rankings.

This skill provides a comprehensive framework for diagnosing and fixing performance bottlenecks in web applications. It guides developers through the entire optimization lifecycle—from measuring baseline Core Web Vitals and Lighthouse scores to implementing high-impact changes like code splitting, modern image compression, and critical rendering path improvements. By focusing on metrics like Largest Contentful Paint (LCP) and First Input Delay (FID), it ensures applications are not only fast but also highly responsive and SEO-friendly.

Key Features

01JavaScript bundle size reduction via code splitting and tree-shaking

02Critical rendering path optimization to reduce Time to Interactive (TTI)

030 GitHub stars

04Comprehensive Core Web Vitals analysis and remediation strategies

05Strategic caching and asset delivery optimization techniques

06Modern image optimization workflows using WebP, AVIF, and responsive sets

Use Cases

01Improving Google Search rankings by achieving 'Green' Core Web Vitals scores

02Identifying and replacing heavy dependencies that bloat application bundles

03Reducing mobile bounce rates by optimizing asset loading on slow networks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

Key Features

01JavaScript bundle size reduction via code splitting and tree-shaking

02Critical rendering path optimization to reduce Time to Interactive (TTI)

030 GitHub stars

04Comprehensive Core Web Vitals analysis and remediation strategies

05Strategic caching and asset delivery optimization techniques

06Modern image optimization workflows using WebP, AVIF, and responsive sets

Use Cases

01Improving Google Search rankings by achieving 'Green' Core Web Vitals scores

02Identifying and replacing heavy dependencies that bloat application bundles

03Reducing mobile bounce rates by optimizing asset loading on slow networks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT