skills.rest
IkeaNorweegway
IkeaNorweegwayCOMMUNITY
Explore all skills by this author →
GitHub

optimize

Diagnoses and fixes UI performance issues across loading, rendering, animations, and bundle size.

Updated Apr 16, 2026
Search Tags:#performance#frontend#optimization#bundle size#lighthouse#lazy loading#core web vitals
One-click install
npx skills add https://github.com/IkeaNorweegway/Classroom-Tools --skill optimize-ikeanorweegway
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/IkeaNorweegway/Classroom-Tools/tree/main/.claude/skills/optimize
Command: npx skills add https://github.com/IkeaNorweegway/Classroom-Tools --skill optimize-ikeanorweegway

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Slow load times, janky animations, and bloated bundles degrade user experience, but teams often optimize blindly without knowing which bottleneck actually matters. This Skill provides a systematic workflow to measure, diagnose, and fix UI performance problems. ## Core Features & Use Cases - Performance Diagnosis: Measure Core Web Vitals (LCP, FID/INP, CLS), bundle size, runtime frame rates, and network waterfalls before changing any code. - Targeted Optimization: Apply concrete fixes for images (WebP/AVIF, srcset, lazy loading), JavaScript (code splitting, tree shaking), CSS, fonts, rendering (layout thrashing, virtual scrolling), and animations (GPU-accelerated transforms). - Verification Workflow: Compare before/after Lighthouse scores and test on real devices and throttled connections to confirm improvements without regressions. - Use Case: A user reports their React dashboard feels laggy on mobile. Use this Skill to profile the page, discover a 2MB unoptimized hero image and layout thrashing in a scroll handler, then apply responsive images and batched DOM writes. ## Quick Start Use the optimize skill to diagnose why my landing page loads slowly and fix the biggest performance bottlenecks.

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 scores on my website?▼

Improve Core Web Vitals by optimizing LCP with compressed hero images and preloaded critical resources, reducing INP by breaking up long JavaScript tasks, and fixing CLS by setting explicit dimensions on images and embeds. Measure with Lighthouse before and after each change.

How to reduce JavaScript bundle size in a React app?▼

Reduce bundle size with route-based code splitting, dynamic imports for heavy components, tree shaking to remove unused code, and deleting unused dependencies. Use webpack-bundle-analyzer to identify which modules contribute the most weight.

Why are my CSS animations janky and how do I fix them?▼

Janky animations usually animate layout properties like width, height, top, or left, which trigger expensive reflows. Animate only transform and opacity, which are GPU-accelerated, and target 16ms per frame for smooth 60fps rendering.

What is layout thrashing and how do I avoid it?▼

Layout thrashing happens when JavaScript alternates between reading layout properties and writing styles, forcing repeated reflows. Fix it by batching all reads first, then performing all writes together in a separate pass.

When should I not lazy load images on a page?▼

Never lazy load above-the-fold content such as hero images, since it delays the Largest Contentful Paint and hurts perceived speed. Reserve lazy loading for below-fold images and use loading="lazy" with proper srcset sizing.

Related Skills

Explore More Software Engineering Skills→
SPeeDoA1SPeeDoA1
6

performance-audit

Audit web application performance with Lighthouse, WebPageTest, and Chrome DevTools.

Community
Intermediate
insightriotinsightriot
1

performance-optimization

Diagnose and fix frontend and backend performance bottlenecks using a measure-first optimization workflow.

Official
Intermediate
itdevwork-gititdevwork-git

seo-images

Audit on-page images for SEO, Core Web Vitals, and WebP/AVIF optimization.

Community
Advanced
GenuinehGenuineh

frontend-framework-nextjs

Guide React and Next.js development with rendering strategies and App Router architecture.

Community
Intermediate