optimize

Identify and fix web performance issues using Core Web Vitals and asset optimization.

Updated Aug 8, 2021

Search Tags:#performance #frontend #rendering #optimize #web-performance #core-web-vitals #loading-time

Ready to run

npx skills add https://github.com/luanzeba/dotfiles --skill optimize-luanzeba

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/luanzeba/dotfiles/tree/main/skills/optimize
Command: npx skills add https://github.com/luanzeba/dotfiles --skill optimize-luanzeba

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Slow interfaces degrade user experience by causing long load times, jank during interactions, and high resource usage.

Core Features & Use Cases

Identify bottlenecks: measure and locate costly rendering, loading, and animation issues.
Guide optimizations: provide practical steps for image optimization, code-splitting, lazy loading, and CSS/JS efficiency.
Use Case: When a page feels sluggish on mobile, apply proactive optimizations to improve LCP, FID/INP, CLS, and frame rates.

Quick Start

Run a targeted optimization pass on the page you suspect is slow to observe measurable performance improvements.

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 for a slow single-page app?▼

Improve Core Web Vitals by measuring costly rendering and loading issues, then applying image optimization, code-splitting, and lazy loading to reduce bundle size and improve LCP, FID/INP, and CLS metrics.

What is the best way to fix jank and slow loading times on web interfaces?▼

Fix loading times and jank by running a targeted optimization pass to locate costly animations and rendering bottlenecks, applying CSS/JS efficiency steps to deliver smoother, faster user experiences.

How do I locate costly rendering bottlenecks causing sluggish mobile pages?▼

Locate rendering bottlenecks by measuring the page's frame rates and Core Web Vitals, identifying inefficient animations and heavy resources that degrade mobile performance during interactions.

Can I reduce bundle size and speed up loading without changing my framework?▼

Reduce bundle size without changing frameworks by applying code-splitting, lazy loading, and asset optimization techniques to improve loading speed and overall web performance.

When do I need code-splitting and lazy loading for web performance?▼

You need code-splitting and lazy loading when web interfaces suffer from high resource usage and slow loading times, requiring asset optimization to achieve measurable performance improvements.

Why does animation smoothness drop on single-page apps and how do I optimize it?▼

Animation smoothness drops due to costly rendering and inefficient CSS/JS. Optimize smoothness by measuring frame rates, locating bottlenecks, and applying targeted performance improvements.