performance-optimization_skill

Overview

This skill teaches how to master perceived performance using optimistic UI, skeleton screens, progress strategies, and latency masking. It focuses on making interfaces feel fast and responsive, not just reducing raw network time. Apply these patterns to improve user confidence and reduce friction in web and mobile apps.

How this skill works

The skill inspects user-facing latency and teaches patterns to mask or eliminate perceived delays: optimistic updates, subtle feedback for short waits, skeletons for medium waits, and progress bars for long waits. It also covers network tactics like batching and deduplication, measurement with Core Web Vitals, and motion strategies that preserve momentum. Rollback and error handling are included so optimistic changes remain safe.

When to use it

• When users must see immediate feedback for create/update/delete actions
• When pages or components take 1–10s to load and feel abrupt
• When long operations (>10s) need clear progress and estimates
• When designing loading states for mobile or low-bandwidth users
• When improving Core Web Vitals and perceived UX metrics

Best practices

• Prefer optimistic updates for fast-feeling mutations and always implement rollback/error recovery
• Use subtle visual cues for 100ms–1s delays, skeletons for 1–10s, and progress bars for >10s
• Preload likely content and batch/dedupe requests to reduce perceived waits
• Respect prefers-reduced-motion and conserve gesture momentum in animations
• Measure perceived performance with LCP, FID, CLS and user-centered testing

Example use cases

• Implement optimistic create/delete for a task list so items appear instantly and rollback on failure
• Add skeleton screens for feed or profile pages that load in 1–5 seconds
• Show fake or real progress for multi-file uploads that can exceed 10 seconds
• Preload next-page data when the user scrolls near the bottom to make navigation feel instant
• Deduplicate simultaneous API calls for the same resource to avoid redundant loading spinners