optimize

Diagnose and fix UI performance bottlenecks using Core Web Vitals metrics.

Updated Nov 13, 2023
One-click install
npx skills add https://github.com/Bloodrey41/dotfiles --skill optimize-bloodrey41
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/Bloodrey41/dotfiles/tree/main/.claude/skills/optimize
Command: npx skills add https://github.com/Bloodrey41/dotfiles --skill optimize-bloodrey41

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size to deliver faster, smoother user experiences.

Core Features & Use Cases

  • Performance diagnostics: measure Core Web Vitals, TTI, FID/INP, CLS, and runtime metrics to identify bottlenecks.
  • Targeted optimizations: provide guidelines for images, JavaScript, CSS, fonts, and rendering strategies to improve load and interaction times.
  • Use case: imagine a product with slow initial render; apply the skill to pinpoint bottlenecks and apply fixes that improve perceived performance.

Quick Start

Identify the top UI performance bottleneck and apply the recommended fixes to improve load times and interactivity.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I diagnose slow web app loading speed and fix UI performance bottlenecks?

To diagnose slow web app loading speed, measure Core Web Vitals, TTI, FID/INP, and CLS metrics to identify bottlenecks, then apply targeted fixes for images, JavaScript, CSS, and rendering strategies to improve load and interaction times.

What causes janky behavior and laggy runtime performance in user interfaces?

Janky behavior and laggy runtime performance in user interfaces are caused by unoptimized rendering, large bundle sizes, and inefficient animations, requiring metrics collection to evaluate runtime performance and identify specific bottlenecks.

What is the best way to reduce large bundle size and improve Core Web Vitals?

The best way to reduce large bundle size and improve Core Web Vitals is to apply targeted optimization guidelines for JavaScript, CSS, and fonts, addressing loading speed and rendering strategies to improve perceived performance.

Can I use this approach to optimize web performance for any web app?

Yes, you can use this approach to optimize web performance for any web app experiencing slow, laggy, or janky behavior, as it applies broadly to interfaces with long load times or large bundle sizes.

Why does my web app have a slow initial render and how do I improve perceived performance?

A slow initial render happens due to unoptimized loading and rendering strategies, which you fix by pinpointing bottlenecks through metrics evaluation and applying targeted fixes to improve perceived performance.