Optimize web performance through network protocols, resource loading, and browser rendering internals. Use when the user mentions "page load speed", "Core Web Vitals", "HTTP/2", "resource hints", "network latency", or "render blocking". Covers TCP/TLS optimization, caching strategies, WebSocket/SSE, and protocol selection.
From atum-systemnpx claudepluginhub arnwaldn/atum-system --plugin atum-systemThis skill uses the workspace's default tool permissions.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Integrates PayPal payments with express checkout, subscriptions, refunds, and IPN. Includes JS SDK for frontend buttons and Python REST API for backend capture.
A systematic approach to web performance optimization grounded in how browsers, protocols, and networks actually work.
Latency, not bandwidth, is the bottleneck. Most web performance problems stem from too many round trips, not too little throughput.
Goal: 10/10. Rate web application performance 0-10 based on adherence to these principles.
| Context | Pattern | Example |
|---|---|---|
| Warmup | Preconnect | <link rel="preconnect" href="https://cdn.example.com"> |
| DNS | Prefetch | <link rel="dns-prefetch" href="https://analytics.example.com"> |
| TLS | Enable 1.3 + resumption | ssl_protocols TLSv1.3 |
| Payload | Critical HTML under 14KB | Inline critical CSS, defer scripts |
HTML -> DOM -> CSSOM -> Render Tree -> Layout -> Paint -> Composite
| Context | Pattern | Example |
|---|---|---|
| Critical CSS | Inline above-fold in head | <style>/* critical */</style> |
| Scripts | defer for most | <script src="app.js" defer> |
| Fonts | Prevent invisible text | font-display: swap |
| Images | Lazy-load below-fold | <img loading="lazy"> |
| Mistake | Fix |
|---|---|
| More bandwidth to fix slow pages | Reduce round trips |
| All JS upfront | Code-split; defer; lazy-load |
| No resource hints | preconnect, preload above-fold |
| Missing Cache-Control | max-age + content hashing |
| Ignoring CLS | Explicit dimensions |
| WebSocket for everything | SSE or polling may suffice |
| Domain sharding on HTTP/2 | Let HTTP/2 multiplex |
| No compression | Brotli preferred, Gzip fallback |