What is a recommended bundle size budget?

The skill recommends keeping the main gzipped bundle under 200KB and the total initial load under 500KB to ensure the app loads in under one second on 3G networks.

What are the target thresholds for Core Web Vitals?

This skill targets a Largest Contentful Paint (LCP) under 2.5s, Interaction to Next Paint (INP) under 200ms, and a Cumulative Layout Shift (CLS) score below 0.1.

How does this skill help with SEO?

By optimizing Core Web Vitals and page load speed, this skill directly improves the technical signals used by search engines like Google to determine page ranking and user experience quality.

When should I use manual React memoization?

You should only manually memoize components when profiling proves a render bottleneck of over 5ms. In most React 19+ projects, the React Compiler handles memoization automatically.

Web Performance & Core Web Vitals

Name: Web Performance & Core Web Vitals
Author: agents-inc

byagents-inc

0•

분석 및 모니터링

Optimizes web application speed and SEO through bundle budgeting, Core Web Vitals auditing, and strategic code-splitting patterns.

This skill provides a comprehensive framework for building high-performance web applications by enforcing strict bundle size budgets and optimizing Core Web Vitals like LCP, INP, and CLS. It guides developers through a 'measure-first' philosophy, using browser DevTools and Lighthouse to identify bottlenecks before implementing solutions like route-based lazy loading, virtualization, and tree shaking. By integrating modern patterns such as the React Compiler and production real-user monitoring (RUM), it ensures that applications remain fast, responsive, and search-engine optimized throughout the development lifecycle.

주요 기능

01Strategic memoization and React Compiler integration

020 GitHub stars

03Real-user monitoring (RUM) setup with the web-vitals library

04Core Web Vitals optimization for LCP, INP, and CLS

05Bundle size budget enforcement (e.g., <200KB main bundle)

06Route-based code splitting and dynamic import patterns

사용 사례

01Improving SEO rankings by achieving 'Good' Core Web Vitals scores

02Reducing Time to Interactive (TTI) for mobile users on slow networks

03Eliminating main-thread blocking tasks to improve UI responsiveness

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-performance-web-performance

For use in Claude.ai and ChatGPT

주요 기능

01Strategic memoization and React Compiler integration

020 GitHub stars

03Real-user monitoring (RUM) setup with the web-vitals library

04Core Web Vitals optimization for LCP, INP, and CLS

05Bundle size budget enforcement (e.g., <200KB main bundle)

06Route-based code splitting and dynamic import patterns

사용 사례

01Improving SEO rankings by achieving 'Good' Core Web Vitals scores

02Reducing Time to Interactive (TTI) for mobile users on slow networks

03Eliminating main-thread blocking tasks to improve UI responsiveness

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-performance-web-performance

For use in Claude.ai and ChatGPT