skills.rest
sonyho2715
sonyho2715COMMUNITY
Explore all skills by this author →
GitHub

performance-optimizer

Optimize Next.js web app performance and Core Web Vitals metrics.

Updated Aug 27, 2026
Search Tags:#performance#caching#next.js#lighthouse#prisma#core web vitals#bundle optimization
One-click install
npx skills add https://github.com/sonyho2715/lee-meadows-saas --skill performance-optimizer-sonyho2715
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-optimizer
Source: https://github.com/sonyho2715/lee-meadows-saas/tree/main/.claude/skills/performance-optimizer
Command: npx skills add https://github.com/sonyho2715/lee-meadows-saas --skill performance-optimizer-sonyho2715

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines diagnosing and fixing web performance regressions and slow user experiences by providing actionable guidance to improve Core Web Vitals, reduce bundle bloat, speed up server responses, and implement effective caching strategies.

Core Features & Use Cases

  • Performance Audits & Prioritization: Interpret Lighthouse and Web Vitals reports, identify high-impact regressions, and set performance budgets.
  • Frontend Optimizations: Bundle analysis, code splitting, dynamic imports, image and font optimization, and lazy loading to reduce Time to Interactive and LCP.
  • Backend & Database Tuning: Query optimization patterns (Prisma examples), connection pooling, indexing, and API pagination to lower TTFB and API latency.
  • Caching & Network: Multi-layer caching strategies (CDN, edge, Redis, in-memory), compression, and cache invalidation patterns to improve hit rates and reduce load.
  • Monitoring & CI: Integrate Lighthouse, Web Vitals, and APM tooling to track regressions and automate alerts.
  • Use Case: For a Next.js app with poor LCP and large bundles, use this Skill to produce a prioritized plan that reduces bundle size, optimizes hero images, and configures CDN caching to meet LCP < 2.5s.

Quick Start

Audit the Next.js site for Core Web Vitals, list the top three bottlenecks by impact, and provide step-by-step fixes prioritized by effort and user-visible improvement.

Frequently Asked Questions about performance-optimizer

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

FAQPage Schema
How do I improve Core Web Vitals and reduce bundle size in a Next.js app?▼

To improve Core Web Vitals and reduce Next.js bundle size, you can analyze bundle bloat, implement code splitting and dynamic imports, optimize images and fonts, and configure CDN caching to lower LCP and Time to Interactive.

What's the best way to optimize Prisma database queries for lower API latency?▼

Optimizing Prisma database queries for lower API latency involves applying query optimization patterns, connection pooling, database indexing, and API pagination to reduce Time to First Byte and server response times.

How do I set up multi-layer caching strategies using Redis and CDN for web applications?▼

Setting up multi-layer caching strategies involves configuring CDN, edge, Redis, and in-memory caching to improve hit rates, applying compression, and implementing cache invalidation patterns to reduce server load.

Can I use Lighthouse and APM tooling to monitor web performance regressions in CI?▼

Yes, you can integrate Lighthouse, Web Vitals, and APM tooling into your CI pipeline to track Core Web Vitals regressions, set performance budgets, and automate alerts for slow user experiences.

Why does my web application have a poor LCP and how do I fix it?▼

A poor LCP often stems from large bundles and unoptimized hero images. You can fix it by producing a prioritized plan that reduces bundle size, optimizes hero images, and configures CDN caching to meet LCP under 2.5s.

When should I apply lazy loading and image optimization for frontend performance?▼

You should apply lazy loading and image optimization when frontend performance audits reveal large bundle sizes and slow Time to Interactive, ensuring assets are sized correctly and loaded dynamically to reduce initial page weight.

Related Skills

Explore More Software Engineering Skills→
YeomanYeYeomanYe

performance

Identify web performance bottlenecks and apply optimization techniques using Lighthouse metrics.

Community
Advanced
hopeoverturehopeoverture
6

performance-budget-enforcer

Enforce performance budgets on bundle sizes, Lighthouse scores, and Web Vitals in CI/CD pipelines.

Community
Advanced
sgcarstrendssgcarstrends
21

bundle-analysis

Analyze JavaScript bundle sizes and identify optimization opportunities for Next.js apps.

Official
Advanced
roanbrasilroanbrasil
5

web-performance

Diagnose slow page loads and Core Web Vitals issues in frontend workflows.

Community
Advanced