i-optimize_skill

Overview

This skill helps you diagnose and fix interface performance problems across loading, rendering, animations, images, and bundle size to make experiences faster and smoother. It provides a repeatable, measurement-first workflow and pragmatic optimizations you can apply across projects and devices. The goal is measurable user-perceived improvements without breaking functionality or accessibility.

How this skill works

I guide you to measure the current state (Core Web Vitals, load times, bundle size, runtime metrics, network waterfall) and identify the highest-impact bottlenecks. Then I provide targeted fixes and configuration patterns—image handling, JS/CSS splitting, rendering and animation best practices, network strategies, and monitoring—to implement and verify improvements. Measure before and after on real devices and slow networks to validate wins.

When to use it

• When page loads feel slow on mobile or low-end devices
• Before shipping a major UI or adding heavy third-party scripts
• When Core Web Vitals or Lighthouse scores are poor
• When bundle size or runtime CPU/memory is high
• During performance regressions introduced by new code

Best practices

• Always measure first; optimize the biggest bottleneck, not micro-optimizations
• Use modern image formats, responsive sizes, compression, and lazy loading
• Code-split and lazy-load non-critical JavaScript; remove unused dependencies
• Batch DOM reads/writes, minimize DOM depth, and use content-visibility or virtual lists
• Prefer transform/opacity for animations and use requestAnimationFrame or CSS animations
• Monitor real users and test on low-end devices and throttled networks

Example use cases

• Reduce largest contentful paint by optimizing hero images, inlining critical CSS, and preloading key assets
• Improve interaction latency by breaking up long tasks, deferring non-critical JS, and using web workers
• Cut bundle size with tree shaking, removing unused libs, and route-based code splitting
• Smooth animations by switching from layout-affecting properties to GPU-accelerated transforms
• Lower request count and latency via asset CDNs, HTTP/2, caching headers, and API pagination