Skip to content
OpenSmartRoute
Skillv1.0.0

web-performance-optimization

Optimize web performance using Core Web Vitals, modern patterns (View Transitions, Speculation Rules), and framework-specific techniques

by bobmatnyc(0) 0 installs
Free
Sign in to install

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Imported from bobmatnyc/claude-mpm-skills (universal/web/web-performance-optimization/SKILL.md) via skills.sh. Install upstream with npx skills add bobmatnyc/claude-mpm-skills --skill web-performance-optimization. Copyright stays with the author.

Web Performance Optimization

Optimize web performance through Core Web Vitals, modern browser APIs (View Transitions, Speculation Rules), and framework-specific techniques.

When to Use This Skill

  • Improving Lighthouse scores (target: 90+)
  • Reducing page load times (target: <2.5s LCP)
  • Optimizing Core Web Vitals for SEO rankings
  • Implementing modern performance patterns (2025)
  • Debugging performance bottlenecks
  • Setting up continuous performance monitoring

Business Impact: 1 second delay = 7% conversion loss. 0.1s improvement = 8% increase in conversions.

Start Here: Quick Wins

High-ROI optimizations by time investment:

1 Hour Quick Wins (⭐⭐⭐⭐⭐ ROI):

  • Add loading="lazy" to below-fold images (40-60% weight reduction)
  • Enable compression (gzip/brotli) (70-80% transfer size reduction)
  • Add rel="preconnect" for critical origins (100-500ms savings)

1 Day Investments (⭐⭐⭐⭐ ROI):

  • Implement code splitting (30-50% bundle reduction)
  • Optimize LCP image with fetchpriority="high" (200-400ms improvement)
  • Add basic service worker (instant repeat visits)

1 Week Comprehensive (⭐⭐⭐⭐⭐ ROI):

  • Full caching strategy (HTTP headers + service workers)
  • Bundle optimization (tree shaking, 40-60% reduction)
  • Performance monitoring (Lighthouse CI + RUM)

→ See quick-wins.md for complete implementation details

Core Web Vitals at a Glance

Metric Target Weight Key Optimization
LCP (Largest Contentful Paint) <2.5s 25% Optimize images, preload critical resources
INP (Interaction to Next Paint) <200ms 30% Reduce JavaScript, break up long tasks
CLS (Cumulative Layout Shift) <0.1 25% Reserve space, optimize fonts
TBT (Total Blocking Time) <200ms 30% Code splitting, defer non-critical JS
FCP (First Contentful Paint) <1.8s 10% Eliminate render-blocking resources

→ See core-web-vitals.md for deep dive on each metric

Modern Patterns (2025)

View Transitions API - Smooth page transitions without JavaScript

@view-transition { navigation: auto; }

Speculation Rules API - Prerender pages for instant navigation
React Server Components - Zero-bundle server components
Priority Hints - fetchpriority="high" for LCP optimization
Content Visibility - CSS-based rendering optimization

→ See modern-patterns-2025.md for cutting-edge techniques

Navigation

Quick Start (Load First)

  • ⚡ Quick Wins - Time-boxed optimizations (1hr/1day/1week) with ROI ratings. Load FIRST for immediate impact.

Deep Dives

  • 📊 Core Web Vitals - LCP, INP, CLS optimization strategies with debugging workflows. Load when targeting specific metrics.
  • 🔧 Optimization Techniques - Image, JavaScript, CSS, resource loading, caching patterns. Load when implementing specific optimizations.

Modern Features

  • ✨ Modern Patterns 2025 - View Transitions, Speculation Rules, RSC, Islands Architecture. Load when adopting cutting-edge patterns.

Framework-Specific

Measurement & Monitoring

  • 📈 Monitoring - Lighthouse CI, RUM setup, performance budgets, debugging tools. Load when setting up continuous monitoring.

Key Reminders

  • Measure first, optimize second - Always baseline with Lighthouse/WebPageTest before changes
  • Focus on user-centric metrics - Core Web Vitals > vanity metrics
  • Test on real devices - 53% of mobile users abandon after 3 seconds
  • Monitor continuously - Performance degrades over time without vigilance
  • Prioritize by ROI - Start with Quick Wins (high impact, low effort)

Red Flags

Stop and reconsider if:

  • Optimizing without baseline measurement
  • Focusing only on Lighthouse score (ignoring field data)
  • Ignoring mobile performance (53% abandon rate after 3s)
  • Loading all resources eagerly (no lazy loading)
  • No caching strategy implemented
  • Third-party scripts loaded synchronously
  • Missing performance monitoring/budgets

Integration with Other Skills

  • nextjs-core - Next.js Image component, font optimization, static generation
  • react - Component optimization, memoization, code splitting
  • vite - Build optimization, chunk splitting
  • typescript-core - Type-safe performance patterns

Real-World Impact

Conversion Impact:

  • Pinterest: 40% faster perceived wait = 15% more sign-ups + 15% more SEO traffic
  • Zalando: 0.1s improvement = 0.7% revenue increase
  • AutoAnything: 50% faster load = 12-13% sales increase

SEO Impact:

  • Core Web Vitals are ranking factors (June 2021+)
  • 75% of users passing Core Web Vitals = ranking boost
  • Mobile-first indexing prioritizes mobile performance

Remember: Performance is a feature, not an afterthought. Every millisecond counts. Start with Quick Wins for immediate impact.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml
targets:
  - https://api.opensmartroute.ai/api/v1/registry/bobmatnyc-claude-mpm-skills-web-performance-optimization/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

bobmatnyc-claude-mpm-skills-web-performance-optimization.ocm.jsonjson
{
  "ocm": "1",
  "id": "bobmatnyc-claude-mpm-skills-web-performance-optimization",
  "kind": "skill",
  "name": "web-performance-optimization",
  "description": "Optimize web performance using Core Web Vitals, modern patterns (View Transitions, Speculation Rules), and framework-specific techniques",
  "publisher": "bobmatnyc",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "performance",
      "optimization",
      "lighthouse",
      "core-web-vitals",
      "frontend",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Optimize web performance using Core Web Vitals, modern patterns (View Transitions, Speculation Rules), and framework-specific techniques"
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/bobmatnyc/claude-mpm-skills",
      "path": "universal/web/web-performance-optimization/SKILL.md",
      "ref": "HEAD",
      "url": "https://www.skills.sh/bobmatnyc/claude-mpm-skills/web-performance-optimization",
      "key": "bobmatnyc/claude-mpm-skills/universal/web/web-performance-optimization/SKILL.md"
    }
  },
  "instructions": "# Web Performance Optimization\n\nOptimize web performance through Core Web Vitals, modern browser APIs (View Transitions, Speculation Rules), and framework-specific techniques.\n\n## When to Use This Skill\n\n- Improving Lighthouse scores (target: 90+)\n- Reducing page load times (target: <2.5s LCP)\n- Optimizing Core Web Vitals for SEO rankings\n- Implementing modern performance patterns (2025)\n- Debugging performance bottlenecks\n- Setting up continuous performance monitoring\n\n**Business Impact:** 1 second delay = 7% conversion loss. 0.1s improvement = 8% increase in conversions.\n\n## Start Here: Quic",
  "cost": {
    "context_tokens": 1328
  }
}

Fetch it by URL: GET /api/v1/registry/bobmatnyc-claude-mpm-skills-web-performance-optimization/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.