skills.rest
jcdiv47
jcdiv47COMMUNITY
Explore all skills by this author →
GitHub

optimize

Diagnose and fix frontend performance bottlenecks using Core Web Vitals and bundle analysis.

Updated Mar 7, 2026
Search Tags:#performance#rendering#web-performance#bundle-size#image-optimization#core-web-vitals
One-click install
npx skills add https://github.com/jcdiv47/cool-paper --skill optimize-jcdiv47
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/jcdiv47/cool-paper/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/jcdiv47/cool-paper --skill optimize-jcdiv47

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps teams identify and fix frontend performance bottlenecks that cause slow page loads, janky interactions, and large bundle sizes so users experience faster, more responsive interfaces.

Core Features & Use Cases

  • Loading Optimization: Image formats and sizing, lazy loading, critical CSS, resource preloading, and bundle reduction to speed initial load and Time to Interactive.
  • Rendering & Runtime: Reduce layout thrashing, flatten DOM, use content-visibility and virtualization, and batch reads/writes to improve frame rate and CPU usage.
  • Animation & Interaction: Prefer transform/opacity for GPU-accelerated animations, use requestAnimationFrame, and debounce expensive handlers to maintain 60fps.
  • Framework & Network: Route-based code splitting, memoization patterns for React, API pagination, response compression, and CDN usage to lower payloads and requests.
  • Validation & Monitoring: Measure Core Web Vitals, use profiling tools and bundle analyzers, and verify before/after improvements on real devices and throttled networks.
  • Use Case: Audit a slow landing page, prioritize LCP and JS execution improvements, implement image and code-splitting changes, and validate gains with Lighthouse and real-user metrics.

Quick Start

Use the optimize skill to run a performance audit on the main page, prioritize the top three bottlenecks, and propose targeted fixes with measurable before-and-after metrics.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I fix a slow initial page load and improve Core Web Vitals?▼

To fix slow initial page load and improve Core Web Vitals, optimize image formats and sizing, implement lazy loading, inline critical CSS, and reduce bundle size. Validate improvements using Lighthouse audits and before-and-after metrics on throttled networks.

What is the best way to stop janky rendering and expensive animations in a web app?▼

To stop janky rendering and expensive animations, reduce layout thrashing by batching DOM reads and writes. Use GPU-accelerated CSS properties like transform and opacity, and rely on requestAnimationFrame to maintain 60fps.

Can I use this approach to reduce JavaScript bundle size in React projects?▼

Yes, you can reduce JavaScript bundle size in React projects by applying route-based code splitting and memoization patterns. Analyze the bundle with profiling tools to identify and eliminate oversized asset payloads.

How do I audit frontend performance bottlenecks effectively?▼

To audit frontend performance bottlenecks effectively, run runtime profiling and network waterfall analysis on the main page. Prioritize the top three bottlenecks like LCP and JS execution, then propose targeted fixes with measurable before-and-after metrics.

When should I use content-visibility and DOM virtualization for rendering optimization?▼

Use content-visibility and DOM virtualization for rendering optimization when flattening the DOM is insufficient. These techniques reduce CPU usage and improve frame rate by skipping rendering work for off-screen elements.

Related Skills

Explore More Software Engineering Skills→
dtsongdtsong
1

Performance Audit

Identify bottlenecks across rendering, network, bundle size, database queries, and infrastructure.

Community
Advanced
SoborboSoborbo
4

speed-monitoring

Monitor production website performance with Core Web Vitals budgets and alerts.

Community
Advanced
irizqiirizqi

react-vite-best-practices

Optimize React application builds with Vite configuration for bundle size reduction.

Community
Advanced
logo-solutionslogo-solutions

browser-testing-with-devtools

Inspect live DOM, console, network, and performance state in Chromium-based browsers.

Official
Advanced