---
id: sm-optimize
name: "optimize"
url: https://skills.yangsir.net/skill/sm-optimize
author: pbakaus
domain: ai-backend-engineering
tags: ["performance-optimization", "database-tuning", "code-optimization", "scalability", "backend-engineering"]
install_count: 81500
rating: 4.70 (1644 reviews)
github: https://github.com/pbakaus/impeccable
---

# optimize

> 此技能旨在通过优化设计语言，提升AI工具在后端系统的性能和效率，确保其运行更流畅、响应更迅速，从而提供更优质的服务。

**Stats**: 81,500 installs · 4.7/5 (1644 reviews)

## Before / After 对比

### 后端性能智能优化与提升

## Readme

# optimize

Identify and fix performance issues to create faster, smoother user experiences.

## Assess Performance Issues

Understand current performance and identify problems:

- 

**Measure current state**:

**Core Web Vitals**: LCP, FID/INP, CLS scores

- **Load time**: Time to interactive, first contentful paint

- **Bundle size**: JavaScript, CSS, image sizes

- **Runtime performance**: Frame rate, memory usage, CPU usage

- **Network**: Request count, payload sizes, waterfall

- 

**Identify bottlenecks**:

What's slow? (Initial load? Interactions? Animations?)

- What's causing it? (Large images? Expensive JavaScript? Layout thrashing?)

- How bad is it? (Perceivable? Annoying? Blocking?)

- Who's affected? (All users? Mobile only? Slow connections?)

**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters.

## Optimization Strategy

Create systematic improvement plan:

### Loading Performance

**Optimize Images**:

- Use modern formats (WebP, AVIF)

- Proper sizing (don't load 3000px image for 300px display)

- Lazy loading for below-fold images

- Responsive images (`srcset`, `picture` element)

- Compress images (80-85% quality is usually imperceptible)

- Use CDN for faster delivery

```
<img 
  src="hero.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
  loading="lazy"
  alt="Hero image"
/>

```

**Reduce JavaScript Bundle**:

- Code splitting (route-based, component-based)

- Tree shaking (remove unused code)

- Remove unused dependencies

- Lazy load non-critical code

- Use dynamic imports for large components

```
// Lazy load heavy component
const HeavyChart = lazy(() => import('./HeavyChart'));

```

**Optimize CSS**:

- Remove unused CSS

- Critical CSS inline, rest async

- Minimize CSS files

- Use CSS containment for independent regions

**Optimize Fonts**:

- Use `font-display: swap` or `optional`

- Subset fonts (only characters you need)

- Preload critical fonts

- Use system fonts when appropriate

- Limit font weights loaded

```
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap; /* Show fallback immediately */
  unicode-range: U+0020-007F; /* Basic Latin only */
}

```

**Optimize Loading Strategy**:

- Critical resources first (async/defer non-critical)

- Preload critical assets

- Prefetch likely next pages

- Service worker for offline/caching

- HTTP/2 or HTTP/3 for multiplexing

### Rendering Performance

**Avoid Layout Thrashing**:

```
// ❌ Bad: Alternating reads and writes (causes reflows)
elements.forEach(el => {
  const height = el.offsetHeight; // Read (forces layout)
  el.style.height = height * 2; // Write
});

// ✅ Good: Batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight); // All reads
elements.forEach((el, i) => {
  el.style.height = heights[i] * 2; // All writes
});

```

**Optimize Rendering**:

- Use CSS `contain` property for independent regions

- Minimize DOM depth (flatter is faster)

- Reduce DOM size (fewer elements)

- Use `content-visibility: auto` for long lists

- Virtual scrolling for very long lists (react-window, react-virtualized)

**Reduce Paint & Composite**:

- Use `transform` and `opacity` for animations (GPU-accelerated)

- Avoid animating layout properties (width, height, top, left)

- Use `will-change` sparingly for known expensive operations

- Minimize paint areas (smaller is faster)

### Animation Performance

**GPU Acceleration**:

```
/* ✅ GPU-accelerated (fast) */
.animated {
  transform: translateX(100px);
  opacity: 0.5;
}

/* ❌ CPU-bound (slow) */
.animated {
  left: 100px;
  width: 300px;
}

```

**Smooth 60fps**:

- Target 16ms per frame (60fps)

- Use `requestAnimationFrame` for JS animations

- Debounce/throttle scroll handlers

- Use CSS animations when possible

- Avoid long-running JavaScript during animations

**Intersection Observer**:

```
// Efficiently detect when elements enter viewport
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Element is visible, lazy load or animate
    }
  });
});

```

### React/Framework Optimization

**React-specific**:

- Use `memo()` for expensive components

- `useMemo()` and `useCallback()` for expensive computations

- Virtualize long lists

- Code split routes

- Avoid inline function creation in render

- Use React DevTools Profiler

**Framework-agnostic**:

- Minimize re-renders

- Debounce expensive operations

- Memoize computed values

- Lazy load routes and components

### Network Optimization

**Reduce Requests**:

- Combine small files

- Use SVG sprites for icons

- Inline small critical assets

- Remove unused third-party scripts

**Optimize APIs**:

- Use pagination (don't load everything)

- GraphQL to request only needed fields

- Response compression (gzip, brotli)

- HTTP caching headers

- CDN for static assets

**Optimize for Slow Connections**:

- Adaptive loading based on connection (navigator.connection)

- Optimistic UI updates

- Request prioritization

- Progressive enhancement

## Core Web Vitals Optimization

### Largest Contentful Paint (LCP < 2.5s)

- Optimize hero images

- Inline critical CSS

- Preload key resources

- Use CDN

- Server-side rendering

### First Input Delay (FID < 100ms) / INP (< 200ms)

- Break up long tasks

- Defer non-critical JavaScript

- Use web workers for heavy computation

- Reduce JavaScript execution time

### Cumulative Layout Shift (CLS < 0.1)

- Set dimensions on images and videos

- Don't inject content above existing content

- Use `aspect-ratio` CSS property

- Reserve space for ads/embeds

- Avoid animations that cause layout shifts

```
/* Reserve space for image */
.image-container {
  aspect-ratio: 16 / 9;
}

```

## Performance Monitoring

**Tools to use**:

- Chrome DevTools (Lighthouse, Performance panel)

- WebPageTest

- Core Web Vitals (Chrome UX Report)

- Bundle analyzers (webpack-bundle-analyzer)

- Performance monitoring (Sentry, DataDog, New Relic)

**Key metrics**:

- LCP, FID/INP, CLS (Core Web Vitals)

- Time to Interactive (TTI)

- First Contentful Paint (FCP)

- Total Blocking Time (TBT)

- Bundle size

- Request count

**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative.

**NEVER**:

- Optimize without measuring (premature optimization)

- Sacrifice accessibility for performance

- Break functionality while optimizing

- Use `will-change` everywhere (creates new layers, uses memory)

- Lazy load above-fold content

- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first)

- Forget about mobile performance (often slower devices, slower connections)

## Verify Improvements

Test that optimizations worked:

- **Before/after metrics**: Compare Lighthouse scores

- **Real user monitoring**: Track improvements for real users

- **Different devices**: Test on low-end Android, not just flagship iPhone

- **Slow connections**: Throttle to 3G, test experience

- **No regressions**: Ensure functionality still works

- **User perception**: Does it *feel* faster?

Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.
Weekly Installs18.0KRepository[pbakaus/impeccable](https://github.com/pbakaus/impeccable)GitHub Stars10.2KFirst Seen14 days agoSecurity Audits[Gen Agent Trust HubPass](/pbakaus/impeccable/optimize/security/agent-trust-hub)[SocketPass](/pbakaus/impeccable/optimize/security/socket)[SnykPass](/pbakaus/impeccable/optimize/security/snyk)Installed oncodex17.7Kopencode17.6Kgithub-copilot17.6Kgemini-cli17.6Kcursor17.6Kamp17.6K

---
*Source: https://skills.yangsir.net/skill/sm-optimize*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-optimize/markdown*