optimizing-performance

Name: optimizing-performance
Availability: InStock
Author: thkt

Diagnose frontend performance bottlenecks and provide data-driven optimization guidance.

11|1|Updated Aug 6, 2025

Search Tags:#tree shaking #LCP #CLS #Web Vitals #Code splitting #FID

Ready to run

npx skills add https://github.com/thkt/claude-config --skill optimizing-performance

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: optimizing-performance
Source: https://github.com/thkt/claude-config/tree/main/ja/skills/optimizing-performance
Command: npx skills add https://github.com/thkt/claude-config --skill optimizing-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

フロントエンドのパフォーマンスを、データに基づいて順序立てて改善する実践ガイドを提供します。

Core Features & Use Cases

Web Vitals（LCP/FID/CLS）改善の標準化
React最適化（memoization・useMemo/useCallback）の適切な適用
バンドルサイズ削減の実践的手法（コード分割、tree-shaking、遅延読み込み）

Quick Start

LighthouseまたはDevToolsを使い、データを取得してから改善を開始します。

Frequently Asked Questions about optimizing-performance

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

FAQPage Schema

How do I identify and fix frontend performance bottlenecks using Web Vitals?▼

Web Vitals metrics—LCP, FID, and CLS—identify frontend performance bottlenecks. Use Lighthouse or DevTools to measure these metrics, then apply targeted optimizations like code splitting, tree shaking, and React memoization techniques to achieve measurable improvements.

What's the best way to reduce bundle size in a React application?▼

Reduce bundle size through code splitting, tree shaking, and lazy loading. Code splitting separates your bundle into smaller chunks loaded on demand, tree shaking removes unused code, and lazy loading defers non-critical components—together they cut bundle size and improve LCP.

When should I use useMemo and useCallback to optimize React rendering?▼

Use useMemo and useCallback when React re-rendering causes performance degradation. useMemo memoizes expensive computations, useCallback memoizes function references, and React.memo prevents unnecessary component re-renders—apply these selectively based on DevTools profiling data.

How do I diagnose slow page loads and high CLS scores?▼

Diagnose slow loads and layout shifts by measuring LCP and CLS with DevTools or Lighthouse. Data-driven analysis reveals whether the problem stems from rendering delays, bundle size, or layout instability, guiding your optimization strategy toward the highest-impact fixes.

Can I apply performance optimization techniques to an existing React codebase?▼

Yes. Performance optimization applies to existing codebases through progressive improvements: measure current metrics with Web Vitals, identify bottlenecks in re-rendering or bundle size, then incrementally apply memoization, code splitting, and lazy loading based on profiling data.