Site Performance Audit & Fix

Diagnose and optimize Next.js/React website loading performance.

2|Updated Feb 19, 2026

Search Tags:#performance #react #optimization #audit #next.js #website speed

Ready to run

npx skills add https://github.com/HermeticOrmus/claude-code-skills --skill site-performance-audit-fix

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Site Performance Audit & Fix
Source: https://github.com/HermeticOrmus/claude-code-skills/tree/main/site-perf-audit
Command: npx skills add https://github.com/HermeticOrmus/claude-code-skills --skill site-performance-audit-fix

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses slow-loading websites by systematically diagnosing and fixing performance bottlenecks in Next.js/React applications.

Core Features & Use Cases

Bundle Analysis: Identifies large JavaScript bundles and dependencies.
Asset Audit: Detects oversized images, videos, and inefficient formats.
Component Analysis: Flags unnecessary client-side rendering and complex UI elements.
Configuration Check: Ensures optimal caching, font loading, and preloading strategies.
Use Case: A marketing team notices their company website is loading too slowly, impacting user engagement and SEO. This Skill can be used to pinpoint the exact causes, such as large unoptimized images or excessive JavaScript, and provide actionable steps to resolve them, leading to a faster, more responsive site.

Quick Start

Run the site-perf-audit skill to diagnose performance issues on the current website.

Frequently Asked Questions about Site Performance Audit & Fix

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

FAQPage Schema

How do I audit my Next.js website speed and fix slow loading times?▼

To audit Next.js website speed and fix slow loading, you analyze JavaScript bundle sizes, component rendering efficiency, and asset formats. This diagnosis identifies bottlenecks and implements fixes like replacing heavy scripts with CSS and compressing media to improve loading speed.

What causes slow React component rendering and how can I optimize it?▼

Slow React component rendering is often caused by unnecessary client-side rendering and complex UI elements. Optimizing component rendering involves auditing client-server component usage and replacing heavy JavaScript with CSS to reduce bundle size and improve user experience.

What is the best way to reduce large JavaScript bundles in a React application?▼

The best way to reduce large JavaScript bundles in a React application is to perform a bundle analysis to identify heavy dependencies. You can then optimize by replacing excessive JavaScript with CSS, compressing media assets, and configuring optimal cache headers to reduce overall payload size.

Can I use this performance audit on my existing Next.js configuration?▼

Yes, you can use this performance audit on an existing Next.js configuration. The process checks configuration settings to ensure optimal caching, font loading, and preloading strategies are in place to maximize website speed and user experience.

How does asset compression improve website performance for React sites?▼

Asset compression improves website performance by reducing the file size of oversized images, videos, and inefficient media formats. Detecting and compressing these assets decreases loading times and bandwidth usage, leading to a faster, more responsive Next.js site.