skills.rest
luanzeba
luanzebaCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/luanzeba/dotfiles --skill optimize-luanzeba
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
akiyoshiakiyoshi

benchmark

Measure web performance metrics and generate JSON and Markdown reports.

Community
Advanced
SnakeOSnakeO
9

debug:react

Diagnose React UI errors and performance bottlenecks with structured debugging workflows.

Community
Advanced
SwimmingLiuSwimmingLiu
1

optimize

Optimize web performance through image compression, code splitting, and CSS optimization.

Community
Advanced
neogenzneogenz
4

angular-ssr

Configure server-side rendering, hydration, and prerendering for Angular v20+ applications.

Community
Intermediate