skills.rest
childrentime
childrentimeCOMMUNITY
Explore all skills by this author →
GitHub

optimize

Identify and fix frontend performance issues across Core Web Vitals and bundle size.

1.0k|140|Updated Sep 18, 2022
Search Tags:#performance#frontend#react#optimize#loading#web-vitals#bundle-size
One-click install
npx skills add https://github.com/childrentime/reactuse --skill optimize-childrentime
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/childrentime/reactuse/tree/main/packages/website-astro/.agents/skills/optimize
Command: npx skills add https://github.com/childrentime/reactuse --skill optimize-childrentime

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother.

Core Features & Use Cases

  • Assess Core Web Vitals and performance metrics (LCP, FID/INP, CLS, TTI, FCP)
  • Identify and prioritize bottlenecks across loading, rendering, and runtime
  • Implement systematic optimization strategies (image optimization, code splitting, CSS optimization, font loading, and loading strategies)
  • Monitor improvements with Lighthouse, Real User Monitoring (RUM), and bundle analyzers

Quick Start

Run a performance audit to identify the top bottleneck and implement the recommended optimization.

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 like LCP and CLS for a smoother UX?▼

Reduce frontend bundle size by identifying bottlenecks and implementing code splitting. This process analyzes your bundle size and applies systematic optimization strategies to decrease loading times across desktop and mobile environments.

What is the best way to fix slow React loading time and reduce bundle size?▼

Fix slow React loading time by running a performance audit to identify top bottlenecks. This approach applies CSS optimization, code splitting, and loading strategies to reduce bundle size and improve rendering speed for web applications.

How do I measure and verify frontend performance improvements?▼

Measure frontend performance improvements by monitoring Core Web Vitals, TTI, and FCP. This verification process uses Lighthouse, Real User Monitoring (RUM), and bundle analyzers to confirm that loading time and rendering optimizations are effective.

Can I optimize web performance for both desktop and mobile environments?▼

Optimize web performance for both desktop and mobile environments by assessing loading speed, rendering, animations, images, and bundle size. This systematic optimization ensures smoother user experiences and measurable improvements across all platforms.

Related Skills

Explore More Software Engineering Skills→
DanialHaseebDanialHaseeb

optimize

Diagnose and fix UI performance issues across loading, rendering, animations, images, and bundle size.

Community
Advanced
patricio0312revpatricio0312rev
5

performance-budget-setter

Define and enforce performance budgets for bundle size, API latency, and render times.

Community
Advanced
truongnattruongnat

react-native-performance

Optimize React Native app performance with FlatList, memoization, and bundle reduction.

Community
Advanced
GenuinehGenuineh

frontend-framework-nextjs

Guide React and Next.js development with rendering strategies and App Router architecture.

Community
Intermediate