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

•

分析と監視

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.

主な機能

Automated Core Web Vitals monitoring for LCP, CLS, and INP
Advanced image optimization with responsive picture sets and lazy loading
Server-side compression and Webpack bundle optimization configurations
React component lazy loading and route-based code splitting
Service Worker implementation for robust offline caching
11 GitHub stars

ユースケース

Improving Google Lighthouse scores and Core Web Vitals for production websites
Implementing resilient caching and performance monitoring in high-traffic web apps
Reducing JavaScript bundle sizes and minimizing render-blocking resources

概要

主な機能

Automated Core Web Vitals monitoring for LCP, CLS, and INP
Advanced image optimization with responsive picture sets and lazy loading
Server-side compression and Webpack bundle optimization configurations
React component lazy loading and route-based code splitting
Service Worker implementation for robust offline caching
11 GitHub stars

ユースケース

Improving Google Lighthouse scores and Core Web Vitals for production websites
Implementing resilient caching and performance monitoring in high-traffic web apps
Reducing JavaScript bundle sizes and minimizing render-blocking resources