skills.rest
MarcoAntolini
MarcoAntoliniCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-react-performance

Optimize React and Next.js performance using core web vitals and bundle size techniques.

1|Updated May 14, 2026
Search Tags:#react#web vitals#next.js#performance optimization#performance audit
One-click install
npx skills add https://github.com/MarcoAntolini/cursor-sync --skill web-react-performance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-react-performance
Source: https://github.com/MarcoAntolini/cursor-sync/tree/main/cursor-skills/web-react-performance
Command: npx skills add https://github.com/MarcoAntolini/cursor-sync --skill web-react-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of optimizing web, React, and Next.js performance, focusing on core web vitals, critical rendering path, bundle size, and runtime performance.

Core Features & Use Cases

  • Performance Optimization: Core Web Vitals (LCP, CLS, INP, TBT), critical rendering path, bundle size, waterfall elimination, Suspense streaming, cache components, and third-party script management.
  • Use Case: Use this Skill to audit and improve your website's performance, reduce load times, and enhance the user experience. Ideal for developers working on React/Next.js applications or seeking to optimize web applications.

Quick Start

Run the 'web-react-performance' skill to begin the performance audit for your React/Next.js app.

Frequently Asked Questions about web-react-performance

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

FAQPage Schema
How do I optimize Core Web Vitals like LCP, CLS, and INP in a React application?▼

You can improve Core Web Vitals by addressing the critical rendering path, reducing bundle size, and managing third-party scripts. Optimizing these areas enhances LCP, CLS, INP, and TBT metrics for faster load times and better user experience.

What is the best way to reduce bundle size in Next.js?▼

Reducing bundle size requires applying critical rendering path strategies and efficient third-party script handling. These techniques eliminate resource waterfalls and streamline code delivery in your Next.js application for faster runtime performance.

How do I audit React performance and eliminate resource waterfalls?▼

You audit React performance by running a comprehensive analysis of your Core Web Vitals and critical rendering path. This identifies bottlenecks like resource waterfalls, allowing you to implement bundle reduction and Suspense streaming for optimization.

Does this performance optimization approach work with Next.js Suspense streaming?▼

Yes, this performance optimization works with Next.js by implementing Suspense streaming and cache components. It targets runtime performance improvements specifically within React and Next.js frameworks, requiring foundational knowledge of web performance principles.

Why does my React app have poor runtime performance and high TBT scores?▼

Poor runtime performance and high Total Blocking Time scores often stem from large bundle sizes and unmanaged third-party scripts. You can resolve these by applying critical rendering path strategies and efficient script handling to reduce execution delays.

Related Skills

Explore More Software Engineering Skills→
FlorianBruniauxFlorianBruniaux
77

core-web-vitals

Identify and optimize LCP, INP, and CLS metrics in Next.js and React projects.

Community
Advanced
Itinerant18Itinerant18

web-performance-optimization

Analyze Core Web Vitals and optimize frontend loading performance.

Community
Advanced
irizqiirizqi

react-vite-best-practices

Optimize React application builds with Vite configuration for bundle size reduction.

Community
Advanced
hellobanorahellobanora

performance

Optimize Astro website performance for Core Web Vitals and static rendering.

Community
Advanced