Performance Optimization

Optimize React and Next.js web apps to improve Core Web Vitals.

Updated Jan 26, 2026

Search Tags:#performance #react #lazy-loading #code-splitting #web-vitals #image-optimization #core-web-vitals

Ready to run

npx skills add https://github.com/theofernandezz/ai-library --skill performance-optimization-theofernandezz

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Performance Optimization
Source: https://github.com/theofernandezz/ai-library/tree/main/.opencode/skills/performance
Command: npx skills add https://github.com/theofernandezz/ai-library --skill performance-optimization-theofernandezz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance is a feature. Slow load times degrade user experience and search rankings, making it harder to retain users and convert.

Core Features & Use Cases

Image optimization and responsive loading with Next.js Image
Lazy loading and streaming to minimize initial payload
Code splitting and route grouping for smaller bundles
Font and resource preloading to improve TTI
Third-party script optimization and smart loading strategies

Quick Start

Audit your current web app and implement the recommended performance patterns to improve Core Web Vitals immediately.

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 in my Next.js application?▼

Improve Core Web Vitals in Next.js by applying image optimization, lazy loading, and code splitting patterns. These techniques reduce load times and enhance user experience by minimizing the payload delivered to the browser.

What is the best way to optimize images and fonts for web performance?▼

Optimize images and fonts for web performance by using responsive loading with Next.js Image and preloading resources. This approach improves Time to Interactive by ensuring critical assets load efficiently without blocking rendering.

How do I reduce initial bundle size with code splitting in React?▼

Reduce initial bundle size in React by implementing code splitting and route grouping. This pattern breaks down large bundles into smaller chunks, minimizing the initial payload and accelerating page load times.

Can I use lazy loading and streaming for frontend-heavy React apps?▼

Yes, you can use lazy loading and streaming for frontend-heavy React apps to minimize initial payload. These strategies defer loading non-critical resources until needed, significantly improving overall page responsiveness.

How do I handle third-party script optimization without hurting page load?▼

Handle third-party script optimization without hurting page load by applying smart loading strategies. This involves deferring non-essential scripts and managing their execution so they do not block the main thread.