skills.rest
Tgoldi
TgoldiCOMMUNITY
Explore all skills by this author →
GitHub

performance-optimization

Diagnose and optimize web application performance across React rendering, bundles, images, and database queries.

1|Updated May 10, 2026
Search Tags:#performance#caching#react#optimization#lighthouse#code-splitting#web-vitals
One-click install
npx skills add https://github.com/Tgoldi/claude-skills --skill performance-optimization-tgoldi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/Tgoldi/claude-skills/tree/main/performance-optimization
Command: npx skills add https://github.com/Tgoldi/claude-skills --skill performance-optimization-tgoldi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Slow page loads, bloated JavaScript bundles, unnecessary React re-renders, and N+1 database queries degrade user experience and hurt Core Web Vitals scores. This Skill provides a structured, measure-first workflow to find and fix these bottlenecks. ## Core Features & Use Cases - Measurement-first profiling: Run Lighthouse audits and capture Web Vitals (LCP, FID, CLS, FCP, TTFB) before changing any code. - React optimization: Apply React.memo, useMemo, useCallback, lazy loading, and route-based code splitting to cut wasted renders and initial bundle size. - Backend and asset optimization: Fix N+1 queries with includes, add database indexes, cache with Redis, and serve optimized WebP images via Next.js Image. - Use Case: Your dashboard page has a Lighthouse score of 62. Use this Skill to profile it, lazy-load the heavy chart component, add an index on the slow orders query, and cache user profiles in Redis to reach a 90+ score. ## Quick Start Ask the AI to analyze your slow page and apply the performance optimization checklist covering React rendering, bundle size, images, and database queries.

Frequently Asked Questions about performance-optimization

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

FAQPage Schema
How do I improve my Lighthouse performance score?▼

Run Lighthouse via CLI or Chrome DevTools to identify bottlenecks, then address the largest issues first: lazy-load heavy components, split code by route, optimize images to WebP, and reduce bundle size with tree shaking. Re-measure after each change to confirm improvement.

How to stop unnecessary re-renders in React components?▼

Wrap expensive components in React.memo so they only re-render when props change. Memoize computed values with useMemo and event handlers with useCallback, passing stable references to child components.

How do I fix N+1 query problems in my database?▼

Replace per-record queries with a single query using include or JOIN, such as Prisma's findMany with include: { author: true }. Verify the fix by checking query counts, and add indexes on frequently filtered columns.

Does lazy loading help with Core Web Vitals?▼

Yes, route-based and component-based lazy loading with React.lazy and Suspense reduces initial JavaScript, improving LCP and FID. Mark the LCP image with priority in Next.js Image rather than lazy-loading it.

When should I not optimize performance?▼

Avoid premature optimization when there is no measured bottleneck. Profile first with Lighthouse and Web Vitals, optimize one thing at a time, and never sacrifice code readability for marginal gains.

Related Skills

Explore More Software Engineering Skills→
MisonLMisonL
8

performance-profiling

Collect Core Web Vitals and Lighthouse scores to measure web performance.

Community
Intermediate
PatternsDevPatternsDev
235

compression

Apply Gzip and Brotli compression to JavaScript assets in build pipelines.

Official
Advanced
HouseGarofaloHouseGarofalo
3

database-architect-agent

Guide database architecture, data modeling, schema optimization, and query performance tuning.

Official
Advanced
jcsoftdevjcsoftdev

server-side-rendering

Render React components on the server to deliver HTML.

Community
Intermediate