skills.rest
lildibbb
lildibbbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

performance-optimization

Analyze web application performance with Lighthouse and Web Vitals.

Updated Feb 24, 2026
Search Tags:#performance#web development#React#optimization#performance tools
One-click install
npx skills add https://github.com/lildibbb/tele-crm-frontend --skill performance-optimization-lildibbb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/lildibbb/tele-crm-frontend/tree/main/.agents/skills/performance-optimization
Command: npx skills add https://github.com/lildibbb/tele-crm-frontend --skill performance-optimization-lildibbb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires lighthouse, web-vitals, react, lodash, next/image, chart.js, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses common performance issues in web applications, such as slow load times, large bundle sizes, and inefficient database queries, helping you deliver a faster and more responsive user experience.

Core Features & Use Cases

  • Performance Analysis: Utilizes tools like Lighthouse and Web Vitals for in-depth performance metrics.
  • React Optimization: Techniques like React.memo, useMemo, and lazy loading for efficient rendering.
  • Code Splitting: Implements code splitting to load only the necessary resources when needed.
  • Image Optimization: Uses Next.js Image component and WebP format for better performance.
  • Database Query Optimization: Techniques to fix N+1 query problems, index usage, and caching.

Quick Start

Analyze the performance of your web application using the performance-optimization skill and apply the recommended optimizations.

Frequently Asked Questions about performance-optimization

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

FAQPage Schema
How do I optimize React performance and reduce slow load times?▼

To optimize React performance, you can apply React.memo, useMemo, lazy loading, and code splitting to load only necessary resources and improve UI responsiveness.

What's the best way to analyze web app performance metrics using Lighthouse?▼

Analyzing web app performance with Lighthouse provides in-depth metrics on load times and bundle sizes, helping you identify slow rendering and inefficient database queries.

Does this performance optimization approach work with Next.js Image component?▼

Yes, image optimization utilizes the Next.js Image component and WebP format to reduce load times, working alongside React lazy loading and code splitting techniques.

How do I fix N+1 query problems and optimize database queries?▼

Fixing N+1 query problems involves applying database query optimization techniques like proper index usage and caching to reduce inefficient database calls.

Do I need Web Vitals library to measure UI responsiveness?▼

The Web Vitals library is required to measure UI responsiveness and capture real-time performance metrics, complementing Lighthouse CLI for comprehensive performance analysis.

Related Skills

Explore More Software Engineering Skills→
gmagnenatgmagnenat
1

performance

Identify and fix web performance bottlenecks using Lighthouse metrics and Core Web Vitals.

Community
Advanced
hopeoverturehopeoverture
6

performance-budget-enforcer

Enforce performance budgets on bundle sizes, Lighthouse scores, and Web Vitals in CI/CD pipelines.

Community
Advanced
clasenclasen
40

sharp

Resize, convert, and overlay images in Node.js using the Sharp library.

Community
Intermediate
DaytimeBluesDaytimeBlues

performance-profiling

Measure Core Web Vitals and analyze bundles with Lighthouse CLI.

Community
Intermediate