optimize

Identify and fix web performance issues in frontend applications.

Updated Mar 23, 2026
One-click install
npx skills add https://github.com/nangyak4415-sudo/Narumon-Website-V.1 --skill optimize-nangyak4415-sudo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/nangyak4415-sudo/Narumon-Website-V.1/tree/main/.cursor/skills/optimize
Command: npx skills add https://github.com/nangyak4415-sudo/Narumon-Website-V.1 --skill optimize-nangyak4415-sudo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps teams identify and fix frontend performance bottlenecks so pages load faster, animations stay smooth, and interactions feel responsive across devices and networks.

Core Features & Use Cases

  • Performance assessment: Measure Core Web Vitals, Time to Interactive, bundle sizes, runtime CPU and memory usage, and network waterfalls.
  • Loading optimizations: Image formats and responsive delivery, code splitting and lazy loading, critical CSS, font loading strategies, and CDN usage.
  • Rendering & animation improvements: Prevent layout thrashing, use GPU-accelerated transforms, virtualize long lists, and optimize repaint/composite costs.
  • Monitoring & verification: Use Lighthouse, WebPageTest, bundle analyzers, and real-user monitoring to measure before-and-after impact and avoid regressions.

Quick Start

Run a Lighthouse audit on the target page, prioritize the top three bottlenecks by impact, and implement targeted fixes for images, JavaScript bundle size, and rendering to validate measurable improvement.

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 like LCP, CLS, and INP for my web application?

Improve Core Web Vitals by measuring LCP, CLS, and INP using Lighthouse, then applying targeted fixes like image optimization, critical CSS, and bundle splitting to validate perceived load times and interaction responsiveness.

What is the best way to reduce frontend bundle size in a single-page app?

The best way to reduce frontend bundle size involves applying code splitting, lazy loading, and analyzing bundle outputs with dedicated analyzers to identify and eliminate unnecessary JavaScript before deployment.

How do I prevent layout thrashing and optimize rendering performance?

Prevent layout thrashing and optimize rendering performance by using GPU-accelerated transforms, virtualizing long lists, and minimizing repaint and composite costs during frontend animations.

Can I use this to fix slow loading images on my web interface?

Yes, you can fix slow loading images by implementing responsive delivery, adopting modern image formats, and applying targeted loading strategies to ensure faster page loading across devices.

When do I need to run a frontend performance audit before deployment?

You need to run a frontend performance audit during pre-deploy reviews or ongoing monitoring to measure network waterfalls, runtime CPU usage, and avoid performance regressions before they impact users.