skills.rest
gmolike
gmolikeCOMMUNITY
Explore all skills by this author →
GitHub

optimize

Diagnose and fix web performance issues across loading, rendering, animations, and bundle size.

Updated Mar 4, 2026
Search Tags:#performance#react#optimization#bundle size#lighthouse#lazy loading#core web vitals
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill optimize-gmolike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/gmolike/Claude-Template --skill optimize-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Slow load times, janky animations, and bloated bundles degrade user experience, but teams often optimize blindly without knowing which bottlenecks actually matter. This Skill provides a systematic, measurement-first workflow to identify and fix real performance problems. ## Core Features & Use Cases - Measurement-Driven Diagnosis: Assess Core Web Vitals (LCP, INP, CLS), bundle size, runtime performance, and network waterfalls before changing any code. - Full-Stack Optimization Guidance: Covers image optimization (WebP/AVIF, srcset, lazy loading), JavaScript bundle reduction (code splitting, tree shaking), CSS and font strategies, rendering performance (layout thrashing, paint, compositing), and GPU-accelerated animations. - React-Specific Techniques: Includes memo, useMemo, useCallback, list virtualization, and route-level code splitting for React applications. - Use Case: A React app's dashboard feels sluggish on mobile. Use this Skill to measure LCP and INP, discover an oversized hero image and an unmemoized chart component, then apply lazy loading and memoization to hit Core Web Vitals targets. ## Quick Start Ask the assistant to optimize the performance of a specific page or feature, for example by saying: optimize the dashboard page for faster loading and smoother scrolling.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I improve Core Web Vitals scores on my website?▼

Improve Core Web Vitals by optimizing LCP with hero image compression and critical CSS inlining, reducing INP by breaking up long JavaScript tasks, and fixing CLS by setting explicit image dimensions and aspect-ratio. Measure with Lighthouse before and after each change.

How to reduce JavaScript bundle size in a React app?▼

Reduce bundle size with route-based code splitting, dynamic imports for heavy components, tree shaking to remove unused code, and removing unused dependencies. Use a bundle analyzer to identify the largest contributors first.

What is the best way to optimize images for web performance?▼

Optimize images by using modern formats like WebP or AVIF, serving responsive sizes with srcset and the picture element, lazy loading below-fold images, and compressing to 80-85% quality. Never load a 3000px image for a 300px display.

Why are my CSS animations slow and janky?▼

Animations are janky when they animate layout properties like width, height, top, or left, which trigger expensive reflows. Animate only transform and opacity, which are GPU-accelerated, and target 16ms per frame for smooth 60fps playback.

When should I not optimize web performance?▼

Avoid optimizing without measuring first, since premature optimization wastes effort on non-bottlenecks. Also avoid sacrificing accessibility or functionality for speed, and never lazy load above-the-fold content, which harms LCP.

Related Skills

Explore More Software Engineering Skills→
SPeeDoA1SPeeDoA1
6

performance-audit

Audit web application performance with Lighthouse, WebPageTest, and Chrome DevTools.

Community
Intermediate
zinohomezinohome

performance-budget-setter

Defines and enforces performance budgets for bundle size, API latency, database queries, and Core Web Vitals.

Community
Intermediate
summarybotngsummarybotng
2

compatibility-testing

Test web applications across browsers, platforms, and devices using BrowserStack and Playwright.

Official
Advanced
tech-leads-clubtech-leads-club
5.0k

core-web-vitals

Identify and optimize LCP, INP, and CLS metrics across page rendering scenarios.

Official
Basic