skills.rest
duylinhdang1998
duylinhdang1998COMMUNITY
Explore all skills by this author →
WebsiteGitHub

performance-optimization

Diagnose and fix web and mobile performance issues using Lighthouse and Chrome DevTools.

Updated Apr 16, 2026
Search Tags:#performance#frontend#react#mobile#lighthouse#core-web-vitals#60fps
One-click install
npx skills add https://github.com/duylinhdang1998/claude-template-agent --skill performance-optimization-duylinhdang1998
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/duylinhdang1998/claude-template-agent/tree/main/plugins/vfm-agent-company/skills/performance-optimization
Command: npx skills add https://github.com/duylinhdang1998/claude-template-agent --skill performance-optimization-duylinhdang1998

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Large-scale web and mobile applications suffer from slow load times, janky animations, and poor Core Web Vitals that hurt engagement and retention; this Skill provides expert techniques and measurable workflows to diagnose, fix, and verify performance at scale.

Core Features & Use Cases

  • Measurement-first workflow: Use Lighthouse, Chrome DevTools, and RUM to identify LCP, FID, and CLS bottlenecks and prioritize fixes.
  • Frontend optimization: Strategies for bundle splitting, tree shaking, image and font optimization, and React render avoidance patterns to reduce load and runtime cost.
  • Mobile and animation performance: App cold-start improvements, memory reduction, and techniques to achieve consistent 60fps animations on mid-range devices.
  • Use Case: Audit a marketing homepage to reduce LCP under 2.5s and implement code-splitting plus image optimization to improve Lighthouse scores and real-user metrics.

Quick Start

Use the performance-optimization skill to audit the homepage and produce a prioritized action plan to meet LCP < 2.5s, CLS < 0.1, and 60fps interaction goals.

Frequently Asked Questions about performance-optimization

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

FAQPage Schema
How do I improve Core Web Vitals like LCP and CLS for a large-scale web application?▼

You can achieve 60fps animations on mid-range mobile devices by applying memory reduction techniques, optimizing app cold-start improvements, and utilizing frontend render avoidance patterns to minimize runtime cost and prevent janky rendering.

What is the best way to reduce React bundle size and speed up cold app startup?▼

The best way to reduce React bundle size and speed cold app startup is implementing bundle splitting, tree shaking, and font optimization, which reduces load times and runtime cost for large-scale consumer web and native mobile applications.

Can I use Lighthouse and real-user monitoring to diagnose frontend performance issues?▼

Yes, you can use Lighthouse, Chrome DevTools profiling, and real-user monitoring (RUM) as a measurement-first workflow to identify performance bottlenecks, validate fixes, and ensure your application meets technical targets like FID < 100ms.

Why does my web application have janky animations and poor frame rates during interaction?▼

Your web application experiences janky animations and poor frame rates due to unoptimized rendering patterns and high runtime costs, requiring React render avoidance and memory reduction techniques to achieve consistent 60fps rendering.

Related Skills

Explore More Software Engineering Skills→
hgflimahgflima
1

browser-testing-with-devtools

Automate browser testing with Chrome DevTools MCP for DOM inspection and console analysis.

Community
Advanced
nangyak4415-sudonangyak4415-sudo

optimize

Identify and fix web performance issues in frontend applications.

Community
Intermediate
djankiesdjankies

code-splitting

Implement React 19 code splitting with lazy() and Suspense.

Community
Intermediate
rnavarychrnavarych
14

role-mobile:mobile-performance

Diagnose mobile performance issues in iOS and Android apps.

Community
Advanced