Can it help with JavaScript bundle sizes?

Yes, the skill utilizes tools like webpack-bundle-analyzer and size-limit to identify code bloat and suggests specific code-splitting, tree-shaking, and dynamic import improvements.

How does this skill improve Core Web Vitals?

It provides specific implementation patterns for LCP image prioritization, CLS reduction via layout stabilization, and INP optimization through main-thread management and task scheduling.

How does it handle asset optimization?

It implements modern standards for images using WebP/AVIF formats, configures responsive srcsets, and optimizes font loading to prevent FOIT/FLOUT using font-display strategies.

Does it support modern rendering patterns?

Absolutely. It helps developers choose and implement the best strategy for their use case, including SSR, SSG, React Server Components (RSC), and Islands architecture.

Frontend Performance Optimizer

Name: Frontend Performance Optimizer
Author: rnavarych

byrnavarych

•

分析と監視

Optimizes web application performance through Core Web Vitals management, bundle analysis, and resource efficiency strategies.

The Frontend Performance skill equips Claude with specialized expertise to diagnose and resolve bottlenecks in modern web applications. It provides actionable guidance on improving Core Web Vitals like LCP and INP, implementing advanced code-splitting and tree-shaking techniques, and optimizing asset delivery through WebP/AVIF formats and font-loading strategies. Whether you are setting up performance budgets in CI/CD pipelines or choosing between SSR and Islands architecture, this skill ensures your frontend remains fast, responsive, and resource-efficient by applying a 'measure-first' methodology.

主な機能

01Advanced image and font delivery strategies

02Rendering strategy selection (SSR, SSG, RSC)

03CI/CD performance budget implementation

0411 GitHub stars

05Core Web Vitals optimization (LCP, INP, CLS)

06JavaScript bundle analysis and tree shaking

ユースケース

01Reducing slow page load times and large JavaScript bundle sizes

02Automating performance monitoring in deployment pipelines

03Fixing layout shifts (CLS) and interaction delays (INP)

主な機能

01Advanced image and font delivery strategies

02Rendering strategy selection (SSR, SSG, RSC)

03CI/CD performance budget implementation

0411 GitHub stars

05Core Web Vitals optimization (LCP, INP, CLS)

06JavaScript bundle analysis and tree shaking

ユースケース

01Reducing slow page load times and large JavaScript bundle sizes

02Automating performance monitoring in deployment pipelines

03Fixing layout shifts (CLS) and interaction delays (INP)