optimize

Diagnose and fix frontend performance bottlenecks in web interfaces and single-page apps.

14|1|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/wpgaurav/WordPress-skills --skill optimize-wpgaurav
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/wpgaurav/WordPress-skills/tree/main/skills/tools/optimize
Command: npx skills add https://github.com/wpgaurav/WordPress-skills --skill optimize-wpgaurav

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance bottlenecks in web interfaces cause slow load times, jank during interactions, and poor user experience. This Skill provides a structured approach to diagnosing and fixing frontend performance issues across images, JavaScript, CSS, rendering, and animation.

Core Features & Use Cases

  • Assessment framework: measure Core Web Vitals, load times, bundle sizes, and runtime performance to identify bottlenecks.
  • Optimization playbook: strategies for images, JS, CSS, fonts, preloading, caching, and rendering improvements to reduce TTI and CLS.
  • Use Case: optimize a landing page to improve LCP and CLS while preserving UX.

Quick Start

Run a targeted performance audit on your page and apply 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 frontend performance bottlenecks and improve Core Web Vitals like LCP and CLS?

To fix frontend performance bottlenecks and improve Core Web Vitals like LCP and CLS, you can use a structured optimization playbook covering images, JavaScript, CSS, and rendering to reduce load times and layout shift.

What is the best way to optimize web bundle size for single-page apps?

The best way to optimize web bundle size for single-page apps involves assessing your current bundle and applying targeted script optimization strategies to reduce JavaScript payload and improve Time to Interactive.

How does image optimization affect web loading and rendering performance?

Image optimization affects web loading and rendering performance by reducing asset payload and preventing layout shift, which directly improves Largest Contentful Paint and Cumulative Layout Shift metrics for smoother user experiences.

Can I use frontend optimization strategies for both standard web interfaces and single-page apps?

Yes, you can use frontend optimization strategies for both standard web interfaces and single-page apps, as the approach covers loading, rendering, JavaScript, CSS, and animations across both formats.

Why does my web interface experience jank during interactions and how do I resolve it?

Your web interface experiences jank during interactions due to runtime performance bottlenecks in JavaScript or animations, which you can resolve by applying targeted rendering and script optimization strategies.

What steps should I take to run a performance audit on my landing page?

To run a performance audit on your landing page, you should measure Core Web Vitals, load times, bundle sizes, and runtime performance to identify bottlenecks, then apply concrete implementation steps for optimization.