How does this skill help with Core Web Vitals?

It provides specific implementation patterns for Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP) to monitor and improve your site's health.

What tools are recommended alongside this skill?

This skill is designed to complement tools like Google Lighthouse, PageSpeed Insights, WebPageTest, and Chrome DevTools.

Does it support the latest 2024 web standards?

Yes, it specifically includes support for INP (Interaction to Next Paint), which replaced FID as a Core Web Vital in March 2024.

Can I use this for non-React projects?

While it includes React-specific code splitting, many features like Nginx compression, image optimization, and Service Worker strategies are framework-agnostic.

Web Performance Optimization

Name: Web Performance Optimization
Author: secondsky

bysecondsky

•

Analytics & Monitoring

Optimizes web application performance through code splitting, lazy loading, caching strategies, and Core Web Vitals monitoring.

This skill equips Claude with production-ready patterns to enhance web application speed and user experience. It provides specialized guidance on implementing advanced techniques such as React code splitting, Webpack bundle optimization, and responsive image strategies using modern HTML standards. Beyond code structure, it includes implementations for service worker caching, server-side compression configurations, and real-time Core Web Vitals monitoring (LCP, CLS, and INP) to ensure your application meets high-performance benchmarks across all devices.

Key Features

01Automated Core Web Vitals monitoring for LCP, CLS, and INP

02Advanced image optimization with responsive picture sets and lazy loading

03Server-side compression and Webpack bundle optimization configurations

04React component lazy loading and route-based code splitting

05Service Worker implementation for robust offline caching

0611 GitHub stars

Use Cases

01Improving Google Lighthouse scores and Core Web Vitals for production websites

02Implementing resilient caching and performance monitoring in high-traffic web apps

03Reducing JavaScript bundle sizes and minimizing render-blocking resources

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add secondsky/claude-skills web-performance-optimization

For use in Claude.ai and ChatGPT

Download Skill