skills.rest
nayyirahsan
nayyirahsanCOMMUNITY
Explore all skills by this author →
GitHub

optimize

Diagnose UI performance issues and provide optimization guidance for webpages.

Updated Apr 13, 2026
Search Tags:#web development#bundle size#performance optimization#ui performance#load time
One-click install
npx skills add https://github.com/nayyirahsan/labrecon --skill optimize-nayyirahsan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/nayyirahsan/labrecon/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/nayyirahsan/labrecon --skill optimize-nayyirahsan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps users diagnose and fix UI performance issues across loading speed, rendering, animations, images, and bundle size.

Core Features & Use Cases

  • Assess Performance Issues: Measure and understand the current state of performance, including load time, bundle size, and runtime metrics.
  • Optimization Strategy: Provides strategies for optimizing images, JavaScript, CSS, fonts, loading strategy, rendering, animations, and network performance.
  • React/Framework Optimization: Includes tips for optimizing React and other frameworks.
  • Core Web Vitals Optimization: Offers specific guidance for optimizing Core Web Vitals metrics like LCP, FID, INP, and CLS.
  • Performance Monitoring: Recommends tools and metrics for ongoing performance monitoring.

Quick Start

Use the optimize skill to analyze the performance of a webpage and receive recommendations for improvement.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I optimize Core Web Vitals metrics like LCP, FID, INP, and CLS?▼

To optimize Core Web Vitals like LCP, FID, INP, and CLS, you need to analyze rendering, images, and loading strategies. This involves optimizing image delivery, prioritizing critical rendering paths, and minimizing layout shifts.

What is the best way to optimize React UI performance and rendering?▼

The best way to optimize React UI performance is by profiling rendering and animations to find bottlenecks. Strategies include reducing unnecessary re-renders, optimizing animation frame rates, and streamlining component rendering paths.

Can I use these UI performance optimization strategies for any web framework?▼

Yes, the performance optimization strategy applies to general web development alongside specific framework guidance. It analyzes universal dimensions like network performance, images, and bundle size, while also including targeted tips for React and other frameworks.

What tools do I need to monitor ongoing website performance?▼

To monitor ongoing website performance, you need diagnostic tools that track runtime metrics and Core Web Vitals over time. The skill recommends specific tools and metrics for assessing load times, rendering, and animations continuously.

Related Skills

Explore More Software Engineering Skills→
zz8011zz8011

benchmark

Analyze browser performance data to detect regressions across pull requests.

Community
Advanced
hjung3113hjung3113

optimize

Diagnose UI performance bottlenecks and recommend Web Vitals and bundle size improvements.

Community
Advanced
KILWA73KILWA73

asset-optimizer

Convert images to WebP/AVIF and minify CSS/JS for web assets.

Community
Intermediate
yeohj0710yeohj0710

capacitor-performance

Identify and implement Capacitor performance improvements for mobile apps.

Community
Intermediate