skills.rest
addyosmani
addyosmaniCOMMUNITY
Explore all skills by this author →
Website𝕏@addyosmaniGitHub

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
One-click install
npx skills add https://github.com/addyosmani/agent-skills --skill performance-optimization-addyosmani
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
udsy19udsy19

performance-optimization

Measure and fix web application performance bottlenecks using Lighthouse and Core Web Vitals.

Community
Advanced
Aayush31-AiAayush31-Ai

performance

Optimize Next.js web applications for Core Web Vitals with image optimization and code splitting.

Community
Advanced
ps-carvalhops-carvalho

performance-optimization

Profile CPU and memory usage to identify and fix performance bottlenecks.

Community
Advanced
liomotiliomoti
2

web-performance

Identify and remediate web performance bottlenecks affecting Core Web Vitals.

Community
Advanced