optimize

Diagnose and fix UI performance issues in web applications.

5|Updated Apr 18, 2026
One-click install
npx skills add https://github.com/russosalv/NONoise --skill optimize-russosalv
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/russosalv/NONoise/tree/main/packages/skills/vendor/impeccable/optimize
Command: npx skills add https://github.com/russosalv/NONoise --skill optimize-russosalv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Slow, janky, or heavy front-end experiences caused by long load times, large bundles, expensive rendering, or poorly optimized assets that degrade user perception and conversion.

Core Features & Use Cases

  • Performance assessment: Measure Core Web Vitals (LCP, FID/INP, CLS), Time to Interactive, First Contentful Paint, total blocking time, and runtime CPU/memory usage.
  • Targeted remediations: Recommendations for images, code-splitting, CSS optimization, font loading, caching, and service workers to reduce load and bundle sizes.
  • Rendering & animation tuning: Guidance to avoid layout thrashing, use GPU-accelerated properties, virtualize long lists, and stabilize layout to reduce CLS.
  • Use case: Audit a single-page application suffering from slow first load and interaction jank, produce prioritized fixes, and verify improvements with before/after metrics.

Quick Start

Use the optimize skill to audit https://example.com for LCP, FID/INP, CLS, bundle size, and runtime jank and return a prioritized remediation plan.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I diagnose and fix slow initial load times and interaction jank in a single-page application?

Diagnose slow initial loads and interaction jank by collecting Core Web Vitals like LCP, FID/INP, and CLS alongside time-to-interactive metrics. Analyze bundle sizes and runtime CPU usage to identify blocking tasks, then apply code-splitting, CSS optimization, and image delivery improvements to stabilize rendering.

What's the best way to reduce oversized JavaScript bundles in a front-end web application?

Reduce oversized JavaScript bundles by analyzing build outputs to identify heavy dependencies and unused code. Apply code-splitting to lazy-load non-critical routes, optimize CSS delivery, implement font loading strategies, and configure caching or service workers to minimize repeated payloads.

How do I stop layout thrashing and reduce Cumulative Layout Shift (CLS) during web page rendering?

Stop layout thrashing and reduce CLS by avoiding interleaved DOM reads and writes, virtualizing long lists to prevent render blocking, and stabilizing element dimensions. Use GPU-accelerated CSS properties for animations to keep visual updates off the main thread.

Can I audit Core Web Vitals for a hybrid webview using this approach?

Yes, you can audit Core Web Vitals for hybrid webviews by profiling runtime CPU and memory usage within the embedded web environment. Collect loading metrics like First Contentful Paint and total blocking time to produce targeted remediations for the native wrapper's web assets.

Why does my UI animation stutter despite having a small overall bundle size?

UI animation stutter often occurs from expensive rendering operations rather than large bundle sizes. Profiling runtime jank can reveal layout thrashing or non-GPU-accelerated properties, allowing you to tune rendering paths and stabilize the frame rate for smoother interactions.