performance-optimization

Analyze profiling data and bundle metrics to recommend performance fixes.

59|12|Updated Feb 26, 2026
One-click install
npx skills add https://github.com/etylsarin/opencastle --skill performance-optimization-etylsarin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/etylsarin/opencastle/tree/main/src/orchestrator/skills/performance-optimization
Command: npx skills add https://github.com/etylsarin/opencastle --skill performance-optimization-etylsarin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance bottlenecks across frontend and backend systems cause slow load times, poor user experience, and increased infrastructure cost. This Skill gives engineers a structured, measure-first approach to identify, prioritize, and remediate rendering issues, excessive bundle size, slow JavaScript, memory leaks, and inefficient backend operations.

Core Features & Use Cases

  • Profiling-first guidance for Chrome DevTools, Lighthouse, and Node.js profilers to find real bottlenecks.
  • Rendering optimizations including memoization guidance, stable keys, and animation best practices to reduce unnecessary re-renders.
  • Asset and bundle strategies such as modern image formats, lazy loading, code splitting, tree-shaking, and long-lived caching.
  • JavaScript and Node guidance covering debouncing, web workers, streams, async patterns, and worker threads for CPU-bound tasks.
  • Code review checklist for spotting algorithmic inefficiencies, N+1 queries, memory leaks, and missing caching or instrumentation.
  • Use Case: Review a slow React component and receive prioritized fixes, estimated impact on render time, and CI-check ideas to prevent regressions.

Quick Start

Analyze the attached component for rendering and bundle-size bottlenecks and return a prioritized list of fixes, estimated impact, and a code-review checklist.

Frequently Asked Questions about performance-optimization

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

FAQPage Schema
How do I optimize frontend rendering and reduce slow load times in a React application?

Optimize frontend rendering by applying memoization, stable keys, and animation best practices to reduce unnecessary re-renders. This Skill analyzes your components and returns a prioritized list of fixes with estimated impact on render time.

What's the best way to profile Node.js backend performance and identify bottlenecks?

Profile Node.js backend performance using a measure-first approach with Node.js profilers and Chrome DevTools to find real bottlenecks. This identifies slow JavaScript, memory leaks, and inefficient operations for targeted remediation.

How can I reduce excessive bundle size using code splitting and tree-shaking?

Reduce excessive bundle size by applying asset strategies like code splitting, tree-shaking, modern image formats, and lazy loading. This approach minimizes initial load payloads and implements long-lived caching for static assets.

Can I use this to integrate performance tests into my CI pipeline to prevent regressions?

Yes, you can integrate performance tests into CI pipelines to prevent regressions. This Skill provides CI-check ideas and a code review checklist to spot algorithmic inefficiencies, N+1 queries, and missing instrumentation.

How do I handle CPU-bound backend tasks without blocking the main thread in Node.js?

Handle CPU-bound backend tasks by implementing worker threads, streams, and async patterns in Node.js. This prevents main thread blocking and improves overall backend throughput for heavy computational operations.

What profiling data do I need to provide for a web application performance review?

Provide profiling data and bundle metrics from tools like Chrome DevTools and Lighthouse for a performance review. This data enables the Skill to recommend caching strategies, code-level changes, and prioritized fixes.