skills.rest
tuanemuy
tuanemuyCOMMUNITY
Explore all skills by this author →
GitHub

optimize

Identify and fix frontend performance bottlenecks across Core Web Vitals.

Updated Feb 27, 2025
Search Tags:#performance#frontend#optimization#web-vitals#lcp#cls#fid
One-click install
npx skills add https://github.com/tuanemuy/dotfiles --skill optimize-tuanemuy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/tuanemuy/dotfiles/tree/main/config/claude/skills/optimize
Command: npx skills add https://github.com/tuanemuy/dotfiles --skill optimize-tuanemuy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identifies and fixes frontend performance bottlenecks across loading, rendering, and interactivity to deliver faster, smoother user experiences.

Core Features & Use Cases

  • Performance auditing: measure Core Web Vitals (LCP, FID/INP, CLS), Time to Interactive, and resource budgets to locate bottlenecks.
  • Optimization strategies: guidance for image optimization, code-splitting, CSS containment, font loading, and caching to improve load times and interactivity.
  • Use Case: apply to a web app with slow initial load or janky interactions, then implement a prioritized plan to reduce bundle size and optimize rendering.

Quick Start

Run the optimizer on your project to generate a prioritized plan of performance improvements and validation steps.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I fix frontend performance bottlenecks and improve Core Web Vitals?▼

To fix frontend performance bottlenecks, audit Core Web Vitals like LCP, FID/INP, and CLS to locate loading and rendering issues. Apply actionable optimizations across images, code-splitting, and CSS containment to deliver smoother user experiences.

What is the best way to reduce web app initial load time and janky interactions?▼

The best way to reduce initial load time and janky interactions is applying optimization strategies like image optimization, code-splitting, and font loading. This reduces bundle size and optimizes rendering to improve interactivity.

How do I measure Core Web Vitals and create a prioritized optimization plan?▼

Measure Core Web Vitals by auditing LCP, FID/INP, CLS, and Time to Interactive against resource budgets. This generates a prioritized plan of performance improvements complete with validation steps for your web application.

Can I use this to optimize rendering and interactivity for dynamic web content?▼

Yes, you can optimize rendering and interactivity for dynamic web content. The optimizer applies CSS containment, caching, and code-splitting strategies across pages and components to improve load times and interactivity.

Does this performance optimizer work for any web application or are there limitations?▼

This performance optimizer works for web applications targeting improved LCP, FID/INP, CLS, and TTI across pages, components, and dynamic content. It requires no specific dependencies to measure bottlenecks and propose actionable optimizations.

Related Skills

Explore More Software Engineering Skills→
jota-batutajota-batuta

performance-testing

Establish performance baselines and budgets for APIs and web applications.

Community
Advanced
1IssaMohamed1IssaMohamed

optimize

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

Community
Advanced
ps-carvalhops-carvalho

performance-optimization

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

Community
Advanced
rabbicserabbicse

performance-testing

Measure application performance budgets and load behavior with k6 and Lighthouse CI.

Community
Advanced