Web Performance Optimization

Covers the essentials for speeding up modern web apps: React code splitting with lazy loading, webpack bundle optimization, service worker caching strategies, and Core Web Vitals monitoring with the Performance Observer API. Includes practical configs for nginx compression and image optimization with responsive srcsets. The monitoring code is updated for INP instead of the deprecated FID metric, which matters if you're tracking against current standards. Good reference when you're trying to get LCP under 2.5s or need to explain to stakeholders why bundle sizes matter. The checklist format makes it easy to audit what you've already done versus what's still dragging down your Lighthouse score.

skills.sh installs: 576
GitHub stars: 248
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add secondsky/claude-skills --skill web-performance-optimization --agent claude-code

Installs into .claude/skills of the current project.

Files

Web Performance Optimization

Overview

Implement performance optimization strategies including lazy loading, code splitting, caching, compression, and monitoring to improve Core Web Vitals and user experience.

When to Use

Slow page load times
High Largest Contentful Paint (LCP)
Large bundle sizes
Frequent Cumulative Layout Shift (CLS)
Mobile performance issues

Code Splitting (React)

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}