skills.rest
sandrasocial
sandrasocialCOMMUNITY
Explore all skills by this author →
GitHub

optimize

Diagnose UI performance issues and apply fixes for loading, rendering, and animation.

1|Updated Oct 27, 2025
Search Tags:#performance#web vitals#optimization#bundle size#animation#loading speed
One-click install
npx skills add https://github.com/sandrasocial/sselfie-9g --skill optimize-sandrasocial
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/sandrasocial/sselfie-9g/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/sandrasocial/sselfie-9g --skill optimize-sandrasocial

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The skill addresses slow, laggy, or janky user interfaces by diagnosing performance bottlenecks and providing concrete fixes to loading, rendering, animation, and bundle size issues.

Core Features & Use Cases

  • Performance Assessment: Measures Core Web Vitals, load times, bundle sizes, and runtime metrics.
  • Optimization Strategies: Provides detailed recommendations for images, JavaScript, CSS, fonts, network requests, and rendering.
  • Framework Guidance: Includes React‑specific tips and generic best practices for any web stack.
  • Use Case Example: When a web app feels sluggish on mobile, invoke this skill to get a step‑by‑step plan to speed up page load and ensure smooth 60 fps animations.

Quick Start

Ask the optimize skill to evaluate and improve the performance of your target website.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I fix slow loading speed and improve Core Web Vitals for my web application?▼

Fix slow loading speed by diagnosing UI performance bottlenecks and applying strategies like image optimization, code splitting, and network request reduction to meet Core Web Vitals thresholds for LCP, FID, and CLS.

What's the best way to reduce high JavaScript bundle size in a React app?▼

Reduce high JavaScript bundle size by applying code splitting, CSS trimming, and framework-specific optimization guidance to eliminate redundant code and improve overall loading speed.

Why does my web animation feel janky and how can I achieve 60fps rendering?▼

Web animations feel janky due to rendering bottlenecks, which you can resolve by implementing GPU-accelerated animations and CSS trimming to ensure smooth 60fps rendering across desktop and mobile devices.

How do I optimize images to lower my website's LCP below 2.5 seconds?▼

Optimize images by diagnosing loading speed metrics and applying targeted image optimization strategies to reduce file payloads, helping your website meet the LCP <2.5s threshold.

Does this UI optimization approach work for both mobile and desktop web apps?▼

This UI optimization approach works for both mobile and desktop devices, diagnosing runtime metrics and providing generic best practices applicable to any web stack to improve rendering efficiency.

How do I stop layout shifts and meet the CLS <0.1 threshold requirement?▼

Stop layout shifts by assessing Core Web Vitals and applying rendering efficiency fixes to stabilize visual elements, ensuring your web application meets the strict CLS <0.1 threshold.

Related Skills

Explore More Software Engineering Skills→
riabtsevriabtsev

optimize

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

Community
Intermediate
89jobrien89jobrien
4

seo-analysis

Audit websites for technical SEO issues and Core Web Vitals targets.

Community
Advanced
marpmemarpme
1

i-optimize

...

Community
Advanced
bramatobramato

performance-optimization

Optimize Laravel and React application performance with caching and query techniques.

Community
Advanced