optimize

Diagnose and fix UI performance issues in web applications using Core Web Vitals.

184|16|Updated Mar 22, 2025
One-click install
npx skills add https://github.com/zhushen12580/smart-screenshot --skill optimize-zhushen12580
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/zhushen12580/smart-screenshot/tree/main/.claude/skills/optimize
Command: npx skills add https://github.com/zhushen12580/smart-screenshot --skill optimize-zhushen12580

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses and fixes UI performance issues across loading speed, rendering, animations, images, and bundle size. Use when users report slow, laggy, or janky experiences, or want a faster, smoother interface.

Core Features & Use Cases

  • Assess performance: measure Core Web Vitals (LCP, FID/INP, CLS), load times, bundle size, runtime performance, and network metrics.
  • Identify bottlenecks and craft targeted optimization plans: image optimization, code splitting, lazy loading, CSS optimization, font loading, and resource prioritization.
  • Use Case: A web app feels sluggish on mobile; apply this Skill to diagnose and implement fixes to achieve faster interactions and smoother rendering.

Quick Start

Run an automated performance audit, identify the top bottlenecks, and apply core optimizations to improve perceived speed.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I diagnose slow loading times and jank in my web app?

Diagnose slow loading times by systematically measuring Core Web Vitals like LCP, INP, and CLS to identify rendering bottlenecks. Assess runtime performance and network metrics to pinpoint exactly where jank and lag originate.

What is the best way to reduce large bundle size and heavy assets?

Reduce large bundle size by applying code splitting and lazy loading to defer non-essential assets. Optimize image formats and prioritize critical resources to systematically decrease overall payload weight.

How do I improve Core Web Vitals for a sluggish mobile interface?

Improve Core Web Vitals for a sluggish mobile interface by running performance audits to measure load times and runtime metrics. Apply targeted fixes like CSS optimization and font loading adjustments to achieve smoother rendering.

Can I use this approach to fix laggy scrolling and slow startup on dashboards?

Yes, you can fix laggy scrolling and slow startup on web dashboards by measuring runtime performance and applying asset optimizations. Implement lazy loading and code splitting to improve perceived speed and interactions.

Does code splitting and lazy loading work for optimizing heavy images?

Code splitting and lazy loading effectively optimize heavy images by deferring their loading until needed. Combine this with modern image format conversions and resource prioritization to significantly reduce load times.