performance-optimization

Measure, identify, and fix frontend and backend performance bottlenecks.

84.9k|9.1k|Updated Feb 15, 2026

Search Tags:#performance #frontend #web vitals #optimization #backend #profiling #bottleneck

Ready to run

npx skills add https://github.com/addyosmani/agent-skills --skill performance-optimization-addyosmani

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/addyosmani/agent-skills/tree/main/skills/performance-optimization
Command: npx skills add https://github.com/addyosmani/agent-skills --skill performance-optimization-addyosmani

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses slow application performance, user-reported slowness, and poor Core Web Vitals scores by systematically identifying and fixing performance bottlenecks.

Core Features & Use Cases

Performance Measurement: Establishes baselines using tools like Lighthouse and web-vitals.
Bottleneck Identification: Pinpoints common frontend and backend performance issues.
Optimization Strategies: Provides code examples for fixing N+1 queries, large bundles, and inefficient rendering.
Use Case: A website's Largest Contentful Paint (LCP) is over 4 seconds. This Skill can be used to analyze the page, identify large images or render-blocking resources, and suggest optimizations like lazy loading and code splitting.

Quick Start

Use the performance-optimization skill to analyze and improve the load time of the current web page.

Frequently Asked Questions about performance-optimization

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

FAQPage Schema

How do I fix slow Largest Contentful Paint scores on my website?▼

To fix slow Largest Contentful Paint scores, analyze the page to identify large images or render-blocking resources, then apply optimizations like lazy loading and code splitting to improve load times.

What is the best way to identify performance bottlenecks across frontend and backend systems?▼

The best way to identify performance bottlenecks is to establish baselines using measurement tools like Lighthouse and web-vitals, which systematically pinpoint frontend and backend performance issues.

How does code splitting improve web vitals and user experience?▼

Code splitting improves web vitals by breaking down large bundles into smaller chunks, reducing initial load times and inefficient resource usage to boost speed and enhance the user experience.

Can I optimize backend database queries like N+1 issues using this approach?▼

Yes, you can optimize backend database queries by implementing provided code examples designed to fix N+1 queries and resolve inefficient rendering and resource usage.

Why is my application still experiencing high Core Web Vitals after implementing caching?▼

High Core Web Vitals may persist after caching if large bundles or inefficient rendering remain unresolved, requiring further bottleneck identification and strategies like image optimization and code splitting.