performance-engineering

Implement Core Web Vitals monitoring, bundle analysis, and load testing for web applications.

88|22|Updated Dec 17, 2025

Search Tags:#performance #caching #web vitals #optimization #javascript #lighthouse #load testing

Ready to run

npx skills add https://github.com/travisjneuman/.claude --skill performance-engineering-travisjneuman

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: performance-engineering
Source: https://github.com/travisjneuman/.claude/tree/main/skills/performance-engineering
Command: npx skills add https://github.com/travisjneuman/.claude --skill performance-engineering-travisjneuman

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses slow website loading times and poor user experience by providing tools and strategies to measure, optimize, and maintain web application performance.

Core Features & Use Cases

Core Web Vitals Monitoring: Implement RUM and Lighthouse CI to track LCP, INP, CLS.
Bundle Optimization: Reduce JavaScript payload size through code splitting and tree-shaking.
Image Optimization: Serve optimized images in modern formats (WebP, AVIF) with responsive sizing.
Caching Strategies: Configure effective HTTP and server-side caching.
Load Testing: Simulate user traffic with k6 to identify performance bottlenecks.
Use Case: A marketing website is experiencing high bounce rates due to slow load times. This Skill can be used to analyze the performance, identify large unoptimized images and JavaScript bundles, and implement caching strategies to significantly improve page speed and user engagement.

Quick Start

Use the performance-engineering skill to analyze the current Core Web Vitals for the website at 'example.com'.

Frequently Asked Questions about performance-engineering

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I optimize Core Web Vitals like LCP and CLS for my web application?▼

Optimize Core Web Vitals by implementing RUM and Lighthouse CI to track LCP, INP, and CLS. Address slow load times through bundle analysis, code splitting, and image optimization to improve page speed and user engagement metrics.

What's the best way to reduce large JavaScript bundle sizes in Next.js?▼

Reduce JavaScript payload size using webpack-bundle-analyzer to inspect assets and Next.js dynamic imports for code splitting. Tree-shaking unused modules further decreases bundle sizes and improves overall web performance.

How do I implement caching strategies to improve website load speed?▼

Implement caching strategies by configuring effective HTTP and server-side caching using Redis. Caching reduces server load and repeat request latency, significantly improving website load speed and user experience across the full stack.

Can I use k6 for load testing to identify web performance bottlenecks?▼

Yes, use k6 for load testing to simulate user traffic and identify performance bottlenecks. Simulating traffic helps detect slow load times and large asset size issues before they impact real users under high concurrency.

Does this approach support image optimization for modern formats like WebP and AVIF?▼

Yes, image optimization serves modern formats like WebP and AVIF with responsive sizing. Using the Next.js Image component and Sharp, it processes and delivers optimized images, reducing large asset sizes that cause poor user experience.

Why are high bounce rates occurring and how do I fix slow website loading times?▼

High bounce rates often occur due to slow website loading times and poor user experience. Fix them by measuring Core Web Vitals, identifying large unoptimized images and JavaScript bundles, and implementing caching strategies to improve page speed.