mirror of
https://github.com/magnus919/agent-skills.git
synced 2026-09-15 05:26:28 +03:00
Magnus HedemarkandGitHub
c7c4d3b74f
Engineering: backend-engineering, frontend-engineering, data-engineering, ml-engineering, platform-engineering, qa-methodology Executive: go-to-market, legal-strategy, operational-design, org-design, product-strategy ml-engineering: added missing training-infrastructure.md reference qa-methodology: added test-data-management, performance-testing, security-testing references All frontmatter converted to agent-skills convention. Source: https://github.com/magnus919/hermes-profiles
31 lines
1.4 KiB
Markdown
31 lines
1.4 KiB
Markdown
# Client-Side Performance
|
|
|
|
## Core Web Vitals Targets
|
|
|
|
| Metric | Good | Needs improvement | Poor |
|
|
|--------|------|-------------------|------|
|
|
| LCP (Largest Contentful Paint) | ≤ 2.5s | 2.5s - 4.0s | > 4.0s |
|
|
| FID (First Input Delay) / INP | ≤ 100ms | 100ms - 300ms | > 300ms |
|
|
| CLS (Cumulative Layout Shift) | ≤ 0.1 | 0.1 - 0.25 | > 0.25 |
|
|
|
|
## Bundle Optimization
|
|
|
|
| Technique | Impact | Effort |
|
|
|-----------|--------|--------|
|
|
| Code splitting by route | High | Low (built-in with most frameworks) |
|
|
| Dynamic imports for heavy components | Medium | Low |
|
|
| Tree shaking unused exports | Medium | Low (enabled by default in bundlers) |
|
|
| Import cost awareness | Medium | Medium (lint rules, CI checks) |
|
|
| Image optimization (format, sizing, lazy loading) | High | Medium |
|
|
| Dependency audit (remove unused, find lighter alternatives) | Medium | High |
|
|
|
|
## Render Optimization
|
|
|
|
| Pattern | When to use | Mechanism |
|
|
|---------|-------------|-----------|
|
|
| Memoization | Pure components that re-render often | `React.memo`, `useMemo`, `useCallback` |
|
|
| Virtualization | Long lists (1000+ items) | `react-window`, `react-virtuoso` |
|
|
| Debouncing | High-frequency events (search input, scroll) | Debounce by 300-500ms |
|
|
| Throttling | Rate-limited updates (resize, scroll position) | Throttle by 100-200ms |
|
|
| Progressive hydration | Heavy interactive content below the fold | Lazy hydrate on visibility |
|