skills.rest
fratilanico
fratilanicoCOMMUNITY
Explore all skills by this author →
Website𝕏@nicofratilaGitHub

performance-optimization

Profile and optimize React/Next.js web apps to improve Core Web Vitals.

7|1|Updated Feb 14, 2026
Search Tags:#react#optimize#web-performance#bundle-analysis#lcp#cls#fid
One-click install
npx skills add https://github.com/fratilanico/apex-os-bad-boy --skill performance-optimization-fratilanico
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/fratilanico/apex-os-bad-boy/tree/main/performance-optimization
Command: npx skills add https://github.com/fratilanico/apex-os-bad-boy --skill performance-optimization-fratilanico

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web application performance degradation (slow load times, jank, and bloated bundles) drains user satisfaction and increases costs. This skill provides practical patterns for profiling, bundle analysis, and optimization to meet Core Web Vitals targets.

Core Features & Use Cases

  • Profile Core Web Vitals (LCP, CLS, FID/INP) to locate bottlenecks in React/Next.js apps.
  • Optimize bundles and rendering with dynamic imports, code splitting, image optimizations, and font tuning.
  • Apply end-to-end performance improvements in production through monitoring, guardrails, and iterative refinements.

Quick Start

Run a profiling pass on your Next.js app, analyze bundle composition, and apply recommended optimization patterns.

Frequently Asked Questions about performance-optimization

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

FAQPage Schema
How do I improve Core Web Vitals like LCP and CLS in a Next.js app?▼

To improve Core Web Vitals in a Next.js app, you profile bottlenecks affecting LCP, CLS, and FID/INP, then apply image and font optimizations. This skill provides patterns to locate and fix these specific rendering and load speed issues.

What's the best way to reduce bundle size in a React application?▼

The best way to reduce bundle size in a React application is through bundle analysis and code splitting. This skill guides you in analyzing bundle composition and applying dynamic imports to eliminate bloat and improve render speed.

How do I profile a React app to find render speed bottlenecks?▼

You profile a React app by running profiling tools to locate render speed bottlenecks. This skill applies profiling passes to production-grade web apps, identifying slow load times and jank for iterative performance refinements.

Can I use this skill to optimize font loading and image rendering?▼

Yes, you can optimize font loading and image rendering. This skill provides practical patterns for font tuning and image optimizations to meet Core Web Vitals targets and improve overall web application performance.

Do I need specific dependencies to analyze my web app's bundle composition?▼

No specific dependencies are required to analyze your web app's bundle composition. This skill operates dependency-free, guiding you through bundle analysis and code-splitting strategies directly within your React or Next.js codebase.

How does bundle analysis help fix slow load times in production web apps?▼

Bundle analysis helps fix slow load times by identifying bloated code contributing to poor performance. This skill applies end-to-end optimizations through monitoring and guardrails to improve load speed across deployment environments.

Related Skills

Explore More Software Engineering Skills→
botPhUbotPhU

react-performance

Profile React applications with DevTools Profiler and apply memoization, code-splitting, and virtualization.

Community
Advanced
Oscar-Ivan-SalasOscar-Ivan-Salas

performance-profiling

Profile web application performance with Lighthouse and DevTools workflows.

Community
Advanced
jovermierjovermier
2

nextjs-performance

Optimize Next.js apps for Core Web Vitals using next/image, next/font, and next/dynamic.

Community
Advanced
lucasfdigitallucasfdigital

performance-profiling

Profile web performance using Lighthouse and browser DevTools.

Community
Intermediate