mcpField
W
web-performance-optimization

web-performance-optimization

github.com/bobmatnycDevelopment78461 installsUpdated 15w ago
Repository

About web-performance-optimization

A web performance optimization skill for developers, covering Core Web Vitals, modern browser APIs, and framework-specific techniques. It organizes guidance from quick fixes to continuous monitoring for diagnosing and improving page performance.

Key features

  1. 01Core Web Vitals optimization
  2. 02Time-based quick wins
  3. 03Image, JavaScript, and CSS techniques
  4. 04Modern browser performance patterns
  5. 05Framework-specific guidance
  6. 06Lighthouse CI and RUM monitoring

Use cases

  1. 01Improve Lighthouse results
  2. 02Investigate page-load bottlenecks
  3. 03Tune a Next.js or Vue project
  4. 04Set up ongoing performance monitoring

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill web-performance-optimization

After installing, type/web-performance-optimizationin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

metadata.json
references/
core-web-vitals.md
framework-specific.md
modern-patterns-2025.md
monitoring.md
optimization-techniques.md
quick-wins.md

Details

From the project README

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

MetricTargetWeightKey Optimization
LCP (Largest Contentful Paint)<2.5s25%Optimize images, preload critical resources
INP (Interaction to Next Paint)<200ms30%Reduce JavaScript, break up long tasks
CLS (Cumulative Layout Shift)<0.125%Reserve space, optimize fonts
TBT (Total Blocking Time)<200ms30%Code splitting, defer non-critical JS
FCP (First Contentful Paint)<1.8s10%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.

Comments

Markdown supported