optimize

Diagnose and fix web application performance issues across loading, rendering, and animations.

51|7|Updated Dec 25, 2025
One-click install
npx skills add https://github.com/Oussemasahbeni/spartan-admin-dashboard --skill optimize-oussemasahbeni
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/Oussemasahbeni/spartan-admin-dashboard/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/Oussemasahbeni/spartan-admin-dashboard --skill optimize-oussemasahbeni

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you reduce sluggishness and improve user-perceived speed by diagnosing and fixing performance problems across loading, rendering, animations, media, and bundle size.

Core Features & Use Cases

  • Performance measurement & bottleneck discovery: Collect Core Web Vitals, bundle/network/runtime metrics, and pinpoint what’s slow and why.
  • Loading optimization: Improve image delivery, shrink JavaScript/CSS, optimize font loading, and apply smarter resource prioritization (preload/prefetch/CDN/caching).
  • Rendering & interaction optimization: Prevent layout thrashing, reduce DOM/paint/composite costs, and apply techniques like content visibility and virtualization.
  • Animation & network optimization: Use GPU-friendly animation patterns, avoid long main-thread tasks, reduce requests, compress responses, and tune for slow connections.
  • Verification with before/after metrics: Use Lighthouse/DevTools and real-device testing to ensure improvements don’t regress functionality.

Quick Start

Ask the AI to optimize the dashboard by measuring Core Web Vitals, identifying the biggest bottleneck, and then applying the highest-impact fixes for loading, rendering, and animations with before/after verification.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I diagnose and fix core web vitals issues for slow loading and rendering?

To fix core web vitals issues, measure baseline metrics using Lighthouse and DevTools to pinpoint bottlenecks, then apply targeted optimizations for images, JavaScript, CSS, and fonts to reduce loading and rendering costs.

What is the best way to reduce bundle size and optimize media delivery in web applications?

The best way to reduce bundle size is to shrink JavaScript and CSS, optimize image delivery, apply smarter resource prioritization, and leverage CDN caching to improve network efficiency for real user scenarios.

How do I stop layout thrashing and reduce DOM paint costs during animations?

To stop layout thrashing and reduce paint costs, apply GPU-friendly animation patterns, utilize content visibility, implement virtualization, and avoid long main-thread tasks to smooth rendering and interactions.

Can I use this approach to tune network performance for slow connections?

Yes, you can tune network performance for slow connections by reducing HTTP requests, compressing responses, and optimizing resource prioritization to ensure smoother delivery under constrained bandwidth.

How do I verify performance optimization changes without regressing functionality?

To verify performance optimization changes without regressions, use before and after metrics from Lighthouse, DevTools profiling, and real-device testing to ensure rendering and loading improvements work correctly.