From atum-stack-web
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.
npx claudepluginhub arnwaldn/atum-plugins-collection --plugin atum-stack-webThis skill uses the workspace's default tool permissions.
A systematic approach to web performance optimization grounded in how browsers, protocols, and networks actually work.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.
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 |