High Perf Browser
Browser networking performance optimization
Optimize browser networking performance using Ilya Grigorik's comprehensive guide. This skill equips your AI agent with TCP, TLS, HTTP/2, and HTTP/3 optimization techniques, plus strategies for WebSocket, WebRTC, and mobile network performance.
npx skills add wondelai/skills/high-perf-browser --global 
High Performance Browser Networking Ilya Grigorik View on Amazon
02 What it is
What is the High Perf Browser skill?
High Perf Browser packages Ilya Grigorik’s High Performance Browser Networking as an AI agent skill. It teaches your agent what actually costs time between a click and a painted pixel — DNS, TCP and TLS round trips, HTTP/2 and HTTP/3 behaviour, connection reuse, and the critical rendering path — and how to shorten it.
03 Key concepts
Five principles your agent applies.
Drawn from High Performance Browser Networking — not advice it repeats back to you, but decisions it makes while it works.
04 Fit
When to use it, and
when not to.
four symptoms it fixes, and four it doesn't.
Reach for it when
Largest Contentful Paint is poor and a smaller bundle has not helped, because the time is going on round trips.
Time to first byte looks fine but the page still paints late, and you cannot tell which requests block rendering.
You are choosing between WebSocket, Server-Sent Events and polling for a live feed and guessing at the trade-offs.
The site is fast on your desk and slow on a phone on cellular, and nobody can explain the gap.
Reach for something else when
The bottleneck is a query plan or a saturated worker behind the API. Data-Intensive Apps or System Design fit better.
You want visual polish and perceived-speed cues in the interface itself. Refactoring UI is the design-side tool.
Fonts are what is blocking your first paint. Web Typography covers loading strategy in more detail.
Your service falls over under load rather than loading slowly. Release It! covers stability, not delivery.
05 Prompts
Say it like this.
Name the skill at the end of a prompt and the agent applies the framework rather than a vibe. Or say nothing — it loads on its own when a task matches.
Optimize the critical rendering path and resource loading for our landing page using high-perf-browser skill
Evaluate whether we should use HTTP/2 server push or preload hints using high-perf-browser skill
Design a real-time data strategy: WebSocket vs SSE vs polling using high-perf-browser skill
Audit our mobile web performance and suggest network-level optimizations using high-perf-browser skill
06 About the author
07 Same stack
The stack it sits in.
Six Architecture & Systems skills. Most people run two: this one, and whichever fits the next problem.
All Architecture & Systems skills08 Questions
Before you install.
How do I install the High Perf Browser skill?
Run npx skills add wondelai/skills/high-perf-browser --global. It takes about 30 seconds and needs no account. The High Perf Browser skill then works in Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw and Hermes Agent — anything that reads the open agentskills.io format — and your agent loads it on its own when a task calls for it. It is free and MIT-licensed, and the source is at https://github.com/wondelai/skills.
Which book is the High Perf Browser skill based on?
It packages High Performance Browser Networking by Ilya Grigorik — google web performance engineer, W3C Web Performance co-chair. The skill distils the book's method into instructions your agent follows while it works, covering tcp & tls optimization, http/2 & http/3 and resource loading. It sits in the Architecture & Systems part of the library.
Does this cover backend performance too?
No — it stops at the origin. The subject is everything between a user’s device and your first byte, plus what the browser does with the bytes afterwards: DNS lookups, TCP and TLS handshakes, HTTP/2 and HTTP/3 behaviour, connection reuse, cache headers, and which resources block first paint. If the slow part is a query plan or a saturated worker pool, Data-Intensive Apps and System Design are the right skills to load instead.
Does HTTP/2 mean I should stop bundling and sharding domains?
Mostly, and the skill will explain why. HTTP/2 multiplexes many requests over one connection, so domain sharding, spriting and concatenating purely to cut request count become counterproductive — they fragment caching and work against prioritisation. Some bundling still pays for compression ratio and per-request overhead, so it is a smaller-bundles argument rather than a no-bundles one. Server push is the part that aged worst: browsers removed it, and preload hints took over.
What does HTTP/3 actually change?
It moves HTTP off TCP onto QUIC over UDP. The practical wins: no transport-level head-of-line blocking, so a lost packet stalls only its own stream rather than every multiplexed one; a combined transport and TLS handshake costing one round trip, or zero on resumption; and connection IDs that survive a network change, so a phone moving from Wi-Fi to cellular keeps its connection. On a clean low-latency network the gain is small — it pays on lossy mobile links.
The book is from 2013. Is it out of date?
Partly, and it matters which part. The physics do not move — round trips, bandwidth-delay product, TCP slow start, and why latency rather than bandwidth dominates on mobile — and that is most of its value. The specifics have moved: HTTP/3 was standardised nearly a decade after publication, server push shipped and was then removed, and HTTP/2’s original priority scheme was replaced. Check anything version-specific against current browser documentation before shipping it.
09 Guides that use it
Put it to work.
Long-form playbooks where this skill does part of the job.
One skill, one command.
Install High Perf Browser, or the whole stack.
npx skills add wondelai/skills/high-perf-browser --global MIT licensed · Claude, Claude Code, Codex, Cursor, OpenClaw, Hermes · No account