Why is measurement prioritized over optimization?

The skill follows the philosophy that premature optimization is the root of all evil, guiding users to use Chrome DevTools and Lighthouse to find real bottlenecks first.

Does this skill work with non-React projects?

While it has deep React-specific optimizations, its core sections on Web Vitals, image optimization, and bundle size reduction are applicable to any frontend project.

Does it support bundle analysis for modern build tools?

The skill includes guidance for using Webpack Bundle Analyzer and Vite's rollup-plugin-visualizer to identify and remove library bloat.

How does this skill help with React re-renders?

It provides specific patterns and code examples for using React.memo, useMemo, and useCallback to prevent unnecessary updates and improve component efficiency.

Can it help improve Core Web Vitals scores?

Yes, it offers actionable strategies for improving LCP (Largest Contentful Paint), FID (First Input Delay), and CLS (Cumulative Layout Shift) through better asset loading and layout management.

Frontend Performance Optimizer (Japanese)

Name: Frontend Performance Optimizer (Japanese)
Author: thkt

bythkt

•

분석 및 모니터링

Optimizes web application performance using data-driven techniques, React best practices, and Core Web Vitals measurement.

소개

This skill provides specialized expertise in identifying and resolving frontend performance bottlenecks with a focus on Japanese-language development environments. It emphasizes a 'measure first' philosophy, utilizing Core Web Vitals (LCP, FID, CLS) and profiling tools like Chrome DevTools to pinpoint issues. It offers practical implementation patterns for React optimization (memoization, virtualization), bundle size reduction (code splitting, tree shaking), image optimization, and layout shift prevention to ensure fast, responsive, and stable user experiences.

주요 기능

Core Web Vitals analysis and improvement (LCP, FID, CLS)
React rendering optimization via memoization and state management
3 GitHub stars
Detailed performance profiling using Chrome and React DevTools
Image and asset optimization strategies for faster loading
Bundle size reduction through code splitting and tree shaking

사용 사례

Diagnosing and fixing slow page load times in React applications
Reducing cumulative layout shift (CLS) to improve visual stability
Analyzing and shrinking large JavaScript bundle sizes for mobile users

소개

주요 기능

Core Web Vitals analysis and improvement (LCP, FID, CLS)
React rendering optimization via memoization and state management
3 GitHub stars
Detailed performance profiling using Chrome and React DevTools
Image and asset optimization strategies for faster loading
Bundle size reduction through code splitting and tree shaking

사용 사례

Diagnosing and fixing slow page load times in React applications
Reducing cumulative layout shift (CLS) to improve visual stability
Analyzing and shrinking large JavaScript bundle sizes for mobile users