skills.rest
range-et
range-etCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

optimize

Audit frontend loading, rendering, and animation paths to reduce LCP, TTI, CLS, and bundle size.

Updated May 16, 2025
Search Tags:#performance#frontend#optimize#web-vitals#bundle-size#loading-speed
One-click install
npx skills add https://github.com/range-et/slate --skill optimize-range-et
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/range-et/slate/tree/main/.cursor/skills/optimize
Command: npx skills add https://github.com/range-et/slate --skill optimize-range-et

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance bottlenecks in modern web interfaces degrade user experience by increasing load times and causing jank; this Skill provides a structured approach to diagnosing and implementing targeted optimizations across loading, rendering, animations, images, and bundle size.

Core Features & Use Cases

  • Auditing performance: measure Core Web Vitals (LCP, FID/INP, CLS) and bundle sizes to identify bottlenecks and opportunities.
  • Asset and code optimization: optimize images, fonts, CSS, and JavaScript with techniques like code splitting, tree-shaking, lazy loading, and responsive images.
  • Rendering and animation tuning: reduce layout thrash, utilize GPU-accelerated animations, and apply containment strategies for smoother UI.
  • Use cases: apply improvements during initial load, route transitions, and dynamic content updates to maintain a fast, responsive experience.

Quick Start

Audit the app to identify the top bottleneck and implement a targeted optimization (e.g., convert large images to WebP and enable lazy loading).

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I identify what is causing slow loading speed and rendering jank in my web application?▼

To identify slow loading speed and rendering jank, audit Core Web Vitals like LCP, TTI, and CLS alongside bundle sizes to pinpoint bottlenecks across loading, rendering, and animation paths.

What is the best way to reduce JavaScript bundle size and improve initial load performance?▼

The best way to reduce JavaScript bundle size and improve initial load performance is applying code splitting, tree-shaking, and lazy loading to optimize assets and code delivery.

How do I fix layout shift and improve Core Web Vitals during route transitions?▼

Fix layout shift and improve Core Web Vitals during route transitions by applying containment strategies, tuning animations, and implementing targeted optimizations to maintain a responsive experience.

Can I optimize frontend images and fonts without breaking existing UI guardrails?▼

You can optimize frontend images and fonts by converting large images to WebP and applying responsive techniques, ensuring measurable improvements with before/after metrics and safe incremental changes.

Why does my frontend animation cause layout thrash and how do I resolve it?▼

Frontend animations cause layout thrash when triggering excessive reflows; resolve it by utilizing GPU-accelerated animations and applying containment strategies for smoother UI rendering.

Related Skills

Explore More Software Engineering Skills→
hopeoverturehopeoverture
6

performance-budget-enforcer

Enforce performance budgets on bundle sizes, Lighthouse scores, and Web Vitals in CI/CD pipelines.

Community
Advanced
effiemincereffiemincer

optimize

Optimize web app and SPA performance across loading, rendering, and interaction.

Community
Intermediate
djankiesdjankies

code-splitting

Implement React 19 code splitting with lazy() and Suspense.

Community
Intermediate
evolv3aievolv3ai
3

responsive-images

Generate responsive images with srcset, sizes, WebP, AVIF, and lazy loading.

Community
Advanced