optimize

Identify and fix performance bottlenecks in web interfaces using Core Web Vitals.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/Kevin-Mok/ai-cli-dotfiles --skill optimize-kevin-mok
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/Kevin-Mok/ai-cli-dotfiles/tree/main/dot_agents/skills/optimize
Command: npx skills add https://github.com/Kevin-Mok/ai-cli-dotfiles --skill optimize-kevin-mok

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve interface performance across loading speed, rendering, animations, images, and bundle size to deliver faster, smoother user experiences.

Core Features & Use Cases

  • Measure Core Web Vitals (LCP, FID, CLS), Time to Interactive, and bundle size to identify bottlenecks.
  • Recommend and guide implementation of optimization strategies (image optimization, code splitting, lazy loading, CSS optimization, font loading, caching).
  • Use case: A slow single-page app with large images and heavy JavaScript can be progressively improved to achieve faster interactivity and lower TTI.

Quick Start

Run an initial performance audit on your web app and begin applying the recommended optimizations.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I fix a slow single-page app with heavy JavaScript and large images?

To fix a slow single-page app, you must identify performance bottlenecks like large bundle sizes and heavy images, then apply code splitting, lazy loading, and image optimization to lower Time to Interactive and improve runtime performance.

What is the best way to measure Core Web Vitals for frontend performance?

The best way to measure Core Web Vitals is running a performance audit that captures LCP, FID, and CLS metrics alongside bundle size, providing a baseline to identify loading and rendering bottlenecks across your web application.

How does lazy loading improve web interface performance?

Lazy loading improves web interface performance by deferring the download of non-critical resources until they are needed, directly reducing initial bundle size and accelerating loading speed for faster user interactivity.

Can I use code splitting to reduce my web app's bundle size?

Yes, you can use code splitting to reduce your web app's bundle size by breaking your JavaScript into smaller chunks, which minimizes the initial payload and significantly improves loading and Time to Interactive metrics.

What should I do if my frontend animations are not rendering smoothly?

If frontend animations are not rendering smoothly, you need to identify runtime performance bottlenecks in your rendering pipeline and apply CSS optimization and animation strategies to achieve smoother visual execution.

When do I need to optimize font loading for my website?

You need to optimize font loading for your website when performance audits indicate that custom fonts are delaying text rendering or shifting layout, negatively impacting your Core Web Vitals and overall loading speed.