optimize

Name: optimize
Availability: InStock
Author: akarachen

Diagnoses and fixes UI performance issues across loading, rendering, animations, and bundle size.

Updated Apr 4, 2026

Search Tags:#performance #optimization #bundle size #rendering #lazy loading #web performance #core web vitals

Ready to run

npx skills add https://github.com/AkaraChen/proxy-up --skill optimize-akarachen

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/AkaraChen/proxy-up/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/AkaraChen/proxy-up --skill optimize-akarachen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Slow load times, janky animations, and bloated bundles degrade user experience, and this Skill provides a systematic workflow to measure, diagnose, and fix front-end performance issues. ## Core Features & Use Cases - Performance Assessment: Measure Core Web Vitals (LCP, FID/INP, CLS), bundle size, runtime frame rates, and network waterfalls before making changes. - Targeted Optimization: Apply concrete fixes for images, JavaScript bundles, CSS, fonts, rendering, animations, and network requests with code examples. - Use Case: A React app feels sluggish on mobile. Use this Skill to identify a 2MB bundle and layout thrashing, then apply code splitting, lazy loading, and batched DOM writes to hit 60fps. ## Quick Start Ask the assistant to analyze your page's performance and fix the biggest bottlenecks, for example: optimize my app's slow initial load time.

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 scores on my website?▼

Improve Core Web Vitals by optimizing hero images and preloading resources for LCP, breaking up long JavaScript tasks for FID/INP, and setting explicit dimensions on images to prevent CLS. Measure with Lighthouse or Chrome UX Report before and after each change.

How to reduce JavaScript bundle size in a React app?▼

Reduce bundle size with route-based code splitting, tree shaking, removing unused dependencies, and lazy loading heavy components via dynamic imports. Use a bundle analyzer to identify the largest contributors first.

Why are my CSS animations janky and how do I fix them?▼

Janky animations usually come from animating layout properties like width, height, top, or left, which trigger reflows. Animate transform and opacity instead, since they are GPU-accelerated, and target 16ms per frame for 60fps.

What is layout thrashing and how do I avoid it?▼

Layout thrashing happens when JavaScript alternates between reading layout properties and writing styles, forcing repeated reflows. Fix it by batching all reads first, then performing all writes together.

When should I not lazy load images?▼

Do not lazy load above-the-fold images, especially the LCP element, since delaying them hurts perceived load speed. Reserve lazy loading for below-fold images and use responsive srcset with modern formats like WebP or AVIF.