Web Performance Optimization

This is your comprehensive toolkit for fixing slow web apps. It covers the standard performance playbook: code splitting and lazy loading for React, image optimization, HTTP caching with service workers, compression, and monitoring setup. The skill gives you working examples for each area, from lazy route loading to Core Web Vitals tracking. It's most useful when you're staring at red Lighthouse scores or poor LCP/CLS metrics and need proven patterns to methodically improve them. The reference guides break down each optimization strategy into implementable chunks, so you're not piecing together blog posts at 2am trying to figure out why your bundle is still 3MB.

skills.sh installs: 487
GitHub stars: 379
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aj-geddes/useful-ai-prompts --skill web-performance-optimization --agent claude-code

Installs into .claude/skills of the current project.

Files

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

Quick Start

Minimal working example:

// utils/lazyLoad.ts
import React from 'react';

export const lazyLoad = (importStatement: Promise<any>) => {
  return React.lazy(() =>
    importStatement.then(module => ({
      default: module.default
    }))
  );
};

// routes.tsx
import { lazyLoad } from './utils/lazyLoad';

export const routes = [
  {
    path: '/',
    component: () => import('./pages/Home'),
    lazy: lazyLoad(import('./pages/Home'))
  },
  {
    path: '/dashboard',
    lazy: lazyLoad(import('./pages/Dashboard'))
  },
  {
// ... (see reference guides for full implementation)

SKILL.md on GitHub