skills.rest
masakinihirota
masakinihirotaCOMMUNITY
Explore all skills by this author →
𝕏@masakinihirotaGitHub

optimize

Diagnoses and fixes UI performance issues across loading, rendering, animations, and bundle size.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web applications often suffer from slow load times, janky animations, and bloated bundles that degrade user experience. This Skill systematically measures, diagnoses, and fixes frontend performance problems so pages load faster and interactions feel smoother. ## Core Features & Use Cases - Performance Measurement: Assesses Core Web Vitals (LCP, FID/INP, CLS), bundle size, runtime frame rates, and network waterfalls before and after changes. - Loading & Bundle Optimization: Applies image optimization (WebP/AVIF, srcset, lazy loading), code splitting, tree shaking, font subsetting, and critical CSS strategies. - Rendering & Animation Fixes: Eliminates layout thrashing, enforces GPU-accelerated transform/opacity animations, and applies React-specific techniques like memo, useMemo, and list virtualization. - Use Case: A product page takes 6 seconds to become interactive on mobile. Use this Skill to identify the oversized hero image and un-split JavaScript bundle as bottlenecks, then apply responsive images and route-based code splitting to bring LCP under 2.5 seconds. ## Quick Start Ask the assistant to diagnose and fix the performance problems in a specific page or component, for example by saying: optimize the checkout page because it feels slow on mobile.

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, 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 and component-based code splitting, tree shaking unused code, removing unused dependencies, and lazy loading heavy components via dynamic imports. Use a bundle analyzer to identify the largest contributors first.

Why are my CSS animations laggy and how do I fix them?▼

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

What is layout thrashing and how do I avoid it?▼

Layout thrashing happens when JavaScript alternates between reading layout properties and writing styles, forcing repeated reflows. Avoid it by batching all reads first, then performing all writes together in a separate pass.

When should I not lazy load images on a page?▼

Do not lazy load above-the-fold images, especially the LCP element, because it delays initial rendering and hurts perceived performance. Reserve lazy loading for below-fold images and preload critical assets instead.

Related Skills

Explore More Software Engineering Skills→
wilfozwilfoz

perf-lighthouse

Run Lighthouse audits via CLI or Node API and parse performance reports.

Community
Intermediate
SylphxAISylphxAI
4

performance

Analyze Next.js frontend performance for Core Web Vitals and bundle size.

Official
Intermediate
Carlosfwd86Carlosfwd86

gsap-performance

Optimize GSAP animations with transform-based motion and cleanup for reduced jank.

Community
Intermediate
gauravb4875-uxgauravb4875-ux

programmatic-seo

Generate SEO-optimized pages from data and templates.

Community
Advanced