developer-ai 1.0.0

package/skills/performance-optimization/SKILL.md

@@ -0,0 +1,412 @@
+---
+name: performance-optimization
+description: Guide for optimizing application performance. Use when addressing slow load times, sluggish UI, memory leaks, or inefficient code. Covers frontend performance, database optimization, caching strategies, and profiling techniques.
+---
+
+# Performance Optimization Skill
+
+This skill provides comprehensive guidance for identifying and fixing performance issues in web applications.
+
+## Overview
+
+Performance directly impacts user experience and business metrics. This skill covers systematic approaches to measuring and improving application performance.
+
+## Performance Metrics
+
+### Core Web Vitals
+- **LCP (Largest Contentful Paint)** - Target: < 2.5s
+- **FID (First Input Delay)** - Target: < 100ms
+- **CLS (Cumulative Layout Shift)** - Target: < 0.1
+- **INP (Interaction to Next Paint)** - Target: < 200ms
+
+### Other Key Metrics
+- **TTFB (Time to First Byte)** - Target: < 600ms
+- **FCP (First Contentful Paint)** - Target: < 1.8s
+- **TTI (Time to Interactive)** - Target: < 3.8s
+- **Total Bundle Size** - Target: < 200KB gzipped
+
+## Frontend Performance
+
+### JavaScript Optimization
+
+**Code Splitting**
+```javascript
+// Before: Everything in one bundle
+import { HeavyComponent } from './HeavyComponent';
+
+// After: Lazy load when needed
+const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
+
+function App() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <HeavyComponent />
+    </Suspense>
+  );
+}
+```
+
+**Tree Shaking**
+```javascript
+// BAD: Imports entire library
+import _ from 'lodash';
+_.debounce(fn, 300);
+
+// GOOD: Import only what you need
+import debounce from 'lodash/debounce';
+debounce(fn, 300);
+```
+
+**Debouncing & Throttling**
+```javascript
+// Debounce for search input
+const debouncedSearch = debounce((query) => {
+  fetchResults(query);
+}, 300);
+
+// Throttle for scroll events
+const throttledScroll = throttle(() => {
+  updateScrollPosition();
+}, 100);
+```
+
+**Memoization**
+```javascript
+// React memoization
+const ExpensiveComponent = React.memo(({ data }) => {
+  return <div>{/* render */}</div>;
+});
+
+// useMemo for expensive calculations
+const sortedData = useMemo(() => {
+  return data.sort((a, b) => a.name.localeCompare(b.name));
+}, [data]);
+
+// useCallback for stable references
+const handleClick = useCallback(() => {
+  doSomething(id);
+}, [id]);
+```
+
+### CSS Performance
+
+**Critical CSS**
+```html
+<!-- Inline critical CSS -->
+<style>
+  /* Above-the-fold styles */
+  .hero { /* ... */ }
+</style>
+
+<!-- Load rest asynchronously -->
+<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+```
+
+**Avoid Layout Thrashing**
+```javascript
+// BAD: Causes multiple reflows
+elements.forEach(el => {
+  const height = el.offsetHeight; // Read
+  el.style.height = height + 10 + 'px'; // Write
+});
+
+// GOOD: Batch reads and writes
+const heights = elements.map(el => el.offsetHeight); // All reads
+elements.forEach((el, i) => {
+  el.style.height = heights[i] + 10 + 'px'; // All writes
+});
+```
+
+**Use CSS Containment**
+```css
+.card {
+  contain: layout style paint;
+}
+```
+
+### Image Optimization
+
+**Responsive Images**
+```html
+<img
+  srcset="image-300.jpg 300w,
+          image-600.jpg 600w,
+          image-1200.jpg 1200w"
+  sizes="(max-width: 600px) 300px,
+         (max-width: 1200px) 600px,
+         1200px"
+  src="image-600.jpg"
+  alt="Description"
+  loading="lazy"
+  decoding="async"
+>
+```
+
+**Modern Formats**
+```html
+<picture>
+  <source srcset="image.avif" type="image/avif">
+  <source srcset="image.webp" type="image/webp">
+  <img src="image.jpg" alt="Description">
+</picture>
+```
+
+### Resource Loading
+
+**Preload Critical Resources**
+```html
+<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="/api/critical-data" as="fetch" crossorigin>
+<link rel="preconnect" href="https://api.example.com">
+<link rel="dns-prefetch" href="https://analytics.example.com">
+```
+
+**Defer Non-Critical Scripts**
+```html
+<!-- Critical: blocks rendering -->
+<script src="critical.js"></script>
+
+<!-- Defer: executes after parsing -->
+<script defer src="analytics.js"></script>
+
+<!-- Async: executes when ready -->
+<script async src="non-critical.js"></script>
+```
+
+## React Performance
+
+### Preventing Re-renders
+
+```javascript
+// Use React.memo for pure components
+const ListItem = React.memo(({ item, onClick }) => {
+  return (
+    <li onClick={() => onClick(item.id)}>
+      {item.name}
+    </li>
+  );
+});
+
+// Use useCallback for stable event handlers
+function Parent() {
+  const [items, setItems] = useState([]);
+  
+  const handleClick = useCallback((id) => {
+    // handle click
+  }, []);
+  
+  return items.map(item => (
+    <ListItem key={item.id} item={item} onClick={handleClick} />
+  ));
+}
+```
+
+### Virtualization for Long Lists
+```javascript
+import { FixedSizeList } from 'react-window';
+
+function VirtualList({ items }) {
+  return (
+    <FixedSizeList
+      height={500}
+      width="100%"
+      itemCount={items.length}
+      itemSize={50}
+    >
+      {({ index, style }) => (
+        <div style={style}>
+          {items[index].name}
+        </div>
+      )}
+    </FixedSizeList>
+  );
+}
+```
+
+## Backend Performance
+
+### Database Optimization
+
+**Indexing**
+```sql
+-- Add indexes for frequently queried columns
+CREATE INDEX idx_users_email ON users(email);
+CREATE INDEX idx_orders_user_date ON orders(user_id, created_at);
+```
+
+**Avoid N+1 Queries**
+```javascript
+// BAD: N+1 queries
+const users = await User.findAll();
+for (const user of users) {
+  user.orders = await Order.findAll({ where: { userId: user.id } });
+}
+
+// GOOD: Eager loading
+const users = await User.findAll({
+  include: [{ model: Order }]
+});
+```
+
+**Pagination**
+```javascript
+// Use cursor-based pagination for large datasets
+async function getUsers(cursor, limit = 20) {
+  const query = {
+    limit: limit + 1,
+    orderBy: { id: 'asc' },
+  };
+  
+  if (cursor) {
+    query.where = { id: { gt: cursor } };
+  }
+  
+  const users = await User.findMany(query);
+  const hasMore = users.length > limit;
+  
+  return {
+    users: users.slice(0, limit),
+    nextCursor: hasMore ? users[limit - 1].id : null,
+  };
+}
+```
+
+### Caching Strategies
+
+**HTTP Caching**
+```javascript
+// Static assets: long cache, hash in filename
+res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
+
+// API responses: short cache with revalidation
+res.setHeader('Cache-Control', 'public, max-age=60, stale-while-revalidate=300');
+```
+
+**In-Memory Caching**
+```javascript
+import NodeCache from 'node-cache';
+
+const cache = new NodeCache({ stdTTL: 300 });
+
+async function getUser(id) {
+  const cached = cache.get(`user:${id}`);
+  if (cached) return cached;
+  
+  const user = await db.user.findUnique({ where: { id } });
+  cache.set(`user:${id}`, user);
+  return user;
+}
+```
+
+**Redis Caching**
+```javascript
+import Redis from 'ioredis';
+
+const redis = new Redis();
+
+async function getCachedData(key, fetchFn, ttl = 300) {
+  const cached = await redis.get(key);
+  if (cached) return JSON.parse(cached);
+  
+  const data = await fetchFn();
+  await redis.setex(key, ttl, JSON.stringify(data));
+  return data;
+}
+```
+
+## Profiling & Measurement
+
+### Browser DevTools
+
+**Performance Tab**
+1. Record page load or interaction
+2. Look for long tasks (> 50ms)
+3. Check main thread blocking
+4. Identify layout thrashing
+
+**Lighthouse**
+- Run in incognito mode
+- Test on throttled connection
+- Focus on opportunities and diagnostics
+
+### Code Profiling
+
+```javascript
+// Manual timing
+console.time('operation');
+await expensiveOperation();
+console.timeEnd('operation');
+
+// Performance API
+const start = performance.now();
+await expensiveOperation();
+const duration = performance.now() - start;
+console.log(`Operation took ${duration}ms`);
+```
+
+### Real User Monitoring
+
+```javascript
+// Web Vitals
+import { onLCP, onFID, onCLS } from 'web-vitals';
+
+function sendToAnalytics({ name, value, id }) {
+  analytics.send({ metric: name, value, id });
+}
+
+onLCP(sendToAnalytics);
+onFID(sendToAnalytics);
+onCLS(sendToAnalytics);
+```
+
+## Performance Budget
+
+```json
+{
+  "budgets": [
+    {
+      "resourceType": "script",
+      "budget": 150
+    },
+    {
+      "resourceType": "total",
+      "budget": 300
+    },
+    {
+      "metric": "first-contentful-paint",
+      "budget": 1500
+    },
+    {
+      "metric": "interactive",
+      "budget": 3500
+    }
+  ]
+}
+```
+
+## Optimization Checklist
+
+### Initial Load
+- [ ] Code splitting implemented
+- [ ] Images optimized and lazy-loaded
+- [ ] Critical CSS inlined
+- [ ] Fonts preloaded
+- [ ] Unused code removed
+
+### Runtime Performance
+- [ ] Expensive operations memoized
+- [ ] Long lists virtualized
+- [ ] Event handlers debounced/throttled
+- [ ] Memory leaks addressed
+
+### Network
+- [ ] HTTP caching configured
+- [ ] API responses cached
+- [ ] Resources compressed (gzip/brotli)
+- [ ] CDN utilized
+
+### Database
+- [ ] Indexes on queried columns
+- [ ] No N+1 queries
+- [ ] Pagination implemented
+- [ ] Query results cached