Vibe coding made the web sick. Now it can fix it.

Since AI coding tools went mainstream, the web has been gaining weight fast. Research shows the average site's JavaScript has grown almost three times faster than before. The reason is simple: AI writes code that looks right, not code that runs fast. And here's the irony, most AI crawlers can't even read the heavy sites that AI built, because they don't run JavaScript.

The good news: the same AI agents that caused this can help fix it. In 2025, Chrome DevTools MCP gave AI agents the ability to actually measure what they build. Combined with Agent Skills, we can turn an AI agent into something closer to a careful performance engineer.
In this talk we look at three things:

- The data: what really happened to the web after November 2022
- The cause: why AI writes slow code, and why it couldn't see what it shipped
- The fix: a working protocol you can use, with Chrome DevTools MCP and a performance skill you can install today

You leave with a ready-to-use performance skill, real before/after numbers, and a clear way to make AI build faster sites instead of heavier ones.

Transcript

1. 01 / 35 IRON/OUT DIAGNOSTIC LAB · AMERSFOORT, NL REPORT #0001 · SCAN 2026 Patient: The Web. PATIENT: SCAN: the open web · median mobile site bundle analysis DATE: ORDERED BY: 2026 one prompt to an AI NOTABLE FINDINGS framer-motion 89 kb prescribed for: 1 fade animation lodash 71 kb prescribed for: 1 utility function 3 icon libraries 142 kb prescribed for: 3 icons DOSAGE JavaScript shipped to user 680 kb Active ingredient ~30 kb coverage report Inert 650 kb 95% of bundle DIAGNOSIS: severe bundle bloat PROGNOSIS: patient ships anyway. CRITICAL
2. 02 / 35 Frontmania, October 2026 Who Pays for AI Code? The hidden cost of vibe coding on the global web A talk by Sander van Surksum Let's <diagnose/> the cost of AI on the web
3. 03 / 35 A quick intro Sander van Surksum Founder · Iron/Out Iron/Out: we help e-commerce teams discover what slow pages cost, and fix the problems that matter most. 20+ years building for the web. I started as a Flash developer, back when that was the cool thing. TRUSTED BY
4. 04 / 35 Part 1 · The symptoms · Mobile JS Weight (p50) · Jan 2020 – Sep 2026 Steady growth. Then the AI era. Ethan Gardner WEB PERFORMANCE ENGINEER Mobile · JavaScript Weight · Median (p50) PRE-AI ERA POST-AI ERA 700 kb 689.1 kb +66.5 kb/year 2.6× faster 600 kb 500 kb 467.4 kb +25.2 kb/year 392.8 kb in i3 5 TGP m Ge Cl au de 4 2026 i2 .5 in Ge m 4o GP T- au Cl de au Cl de 4 TGP 2025 3 2024 2 2023 5 2022 3. 2021 T- 2020 GP 400 kb
5. 05 / 35 One date stands out November 2022. The month ChatGPT shipped.
6. 06 / 35 IRON/OUT DIAGNOSTIC LAB · THE GROWTH RATE 2.6× READING Faster than before. READING · JS SLOPE, BEFORE VS. AFTER NOV 2022 JAVASCRIPT SHIPPED, MOBILE P50, KB PER YEAR BEFORE CHATGPT SINCE CHATGPT +25 +66 Twenty-five kilobytes a year became almost seventy. Same web, new author. ETHAN GARDNER · HTTPARCHIVE 2026 · PIECEWISE LINEAR FIT READING #012
7. 07 / 35 Medical Fact #01 Obesity is rarely diagnosed. Netherlands · 1981 → 2023: Overweight: 33% → 51% · Obesity: 5% → 16% (3×) One kilo at a time. Nobody sounded the alarm. Same with the web. Since November 2022, JavaScript grows 2.6× faster. One kilobyte at a time. Source: CBS Gezondheidsenquête, 2023
8. 08 / 35 IRON/OUT DIAGNOSTIC LAB · GARDNER'S FINDINGS PANEL · WEIGHT, 2020 TO 2026 Median pages changed the most. TREND · HTTPARCHIVE, P50 MOBILE, 2020 TO 2026 MOBILE PAGE WEIGHT P50 MOBILE JS P50 MOBILE IMAGES P50 2.63mb ▲ +48% 393kb → 689kb ▲ +75% 1.77mb → 871kb → 880kb +1% · flat ETHAN GARDNER · HTTPARCHIVE FIT 2020–2026 · CORRELATION, NOT CAUSATION SPECIMEN #114
9. 09 / 35 2.48 DOOM · 1993 · THE ENTIRE GAME mb Engine, levels, sprites, sound: the whole game. Your median mobile page in 2026: 2.6 MB. Heavier than DOOM. photo: id Software · archive.org
10. 10 / 35 IRON/OUT DIAGNOSTIC LAB · THE GAP, MADE VISIBLE CHART · LOAD TIME VS. PAGE SIZE Same page. Two completely different worlds. 10s Load time 6s +5.6s 3s 6.8s · FAIL LONGER WAIT 3-second budget 1.2s · PASS 0s Typical page · 2.6 mb Page size (compressed) You · MacBook Pro + fiber Your user · €300 Android + 9 Mbps LOAD CURVES MODELED ON ALEX RUSSELL'S PERFORMANCE INEQUALITY GAP 2026 · GALAXY A24, P75 NETWORK CHART #038
11. 11 / 35 IRON/OUT DIAGNOSTIC LAB · WHERE WE ARE INTERIM REPORT · THE CHART SO FAR Four facts. FINDINGS ON FILE 01 The web grows 2.6× faster. 02 The poorest devices feel it most. 03 AI did it. We asked for correct, not fast. 04 And this is the median. The typical site. Probably yours. GARDNER · RUSSELL · HTTPARCHIVE INTERIM REPORT #054
12. 12 / 35 Part 2 · The diagnosis Someone wrote the book. AI tends to give you a 70% solution. The last 30% — performance tuning and accessibility — is left to the developer to figure out. Web Performance Engineering in the Age of AI Addy Osmani · Member of Technical Staff, Anthropic · formerly web performance lead, Google Chrome Chapter 3, AI Outputs: Correct but Not Optimal · 256 pages · O'Reilly · February 2026 ADDY OSMANI
13. 13 / 35 STANDING ORDER AI optimises for shipping. Not for running. The model imitates what it was trained on, and what it was trained on was "works." Nobody trained it to care whether that code still runs on a cheap phone. FROM THE INTRODUCTION OF WEB PERFORMANCE ENGINEERING IN THE AGE OF AI · O'REILLY, 2026
14. 14 / 35 IRON/OUT DIAGNOSTIC LAB · WHY AI SHIPS HEAVY EXHIBIT · THE TICKET TICKET · A NORMAL MONDAY · 4 OCTOBER 2026 “Add a smooth entrance animation on the hero and turn ‘This week's drop’ into a swipeable carousel with dot indicators. Make it look polished. Tell me when it's done.”
15. 15 / 35 IRON/OUT DIAGNOSTIC LAB · WHY AI SHIPS HEAVY EXHIBIT · DEFINITION OF DONE It tested everything. Except their phone. TRANSCRIPT OF A REAL RUN, 4 OCTOBER 2026 · TICKET: "ADD A HERO ANIMATION AND A SWIPEABLE CAROUSEL" · NOTHING SAID ABOUT PERFORMANCE AGENT “STRIDE landing page is done. … Verified in headless Chrome at 1280px, 390px mobile with touch, 1920px, and with reduced motion … no console errors. Two bugs caught and fixed during verification that would have shipped otherwise.” DEVELOPER “Nice. How does it do on a cheap Android phone on a slow connection? Did you check that?” AGENT “No, I did not check that. What I ran was headless desktop Chrome with a 390px viewport and touch emulation, at full CPU, on localhost. That proves layout and behaviour, not low-end performance. … I can run the same suite with 4x CPU throttling and Slow 3G in a couple of minutes if wanted.” CLAUDE CODE · VANILLA PAGE, NO DEPENDENCIES ADDED · QUOTES VERBATIM, TRIMMED · FULL TRANSCRIPT IN EVIDENCE/ EXHIBIT #140
16. 16 / 35 IRON/OUT DIAGNOSTIC LAB · WHAT AI SHIPS PITFALL · JANKY INTERACTION Filter on every keystroke. // AI-generated FilteredList component function FilteredList({ items, query }) { const filtered = items.filter((item) => matchesQuery(item, query) ); // … renders filtered to JSX … 1,000 items × every keystroke = main thread blocked. No debounce, no memoization, no web worker. INP spikes. Users feel the lag. Lighthouse on your laptop doesn't. } Example from Web Performance Engineering in the Age of AI · Ch4
17. 17 / 35 IRON/OUT DIAGNOSTIC LAB · WHAT AI SHIPS PITFALL · BLOATED BUNDLES It grabs the heaviest library on the shelf. // You asked for: "a date picker" import moment from 'moment'; // ~230 KB import _ from 'lodash'; // ~70 KB // AI: "this is one way to solve it." It works. +300 kb of JavaScript for what <input type="date"> does in zero. The AI knows a way that works. It doesn't feel 300 kb on a p75 phone. Code-splitting, lighter libraries, native elements: that instinct is yours. Example from Web Performance Engineering in the Age of AI · Ch4
18. 18 / 35 Case file #04 The car passed every test. The test was the wrong body. 73% greater odds of serious injury for a belted woman in a frontal crash, after sixty years of testing on the average man of the 1960s. Correct = it passed the test. Right = your user was in the test. University of Virginia, 2019 · 31,000 real crash occupants · photo: NHTSA, public domain
19. 19 / 35 PART 3 · THE TREATMENT We have the diagnosis. Now, let's <treat/> it. The cure isn't a smarter tool. The AI only checks what “done” tells it to check. Everything that follows makes the cheap phone part of done.
20. 20 / 35 IRON/OUT DIAGNOSTIC LAB · THE TREATMENT EXHIBIT · THE ONE FILE I ADDED DONE.MD · ELEVEN LINES · COMMITTED TO THE REPO BEFORE THE SECOND RUN # Definition of done — STRIDE web A change is done when all of these hold: 1. It works, and existing behaviour (the cart counter) still works. 2. It has been measured on the budget profile, not on a laptop: mid-range Android emulation, 4x CPU throttling, slow 4G network. 3. On that profile the home page stays within budget: - JavaScript shipped: <= 200 kb (compressed) - LCP < 2.5 s, INP < 200 ms, CLS < 0.1 4. The hand-off message to the developer reports those numbers and what was done about anything over budget. "Works on my machine" is not done.
21. 21 / 35 IRON/OUT DIAGNOSTIC LAB · THE TREATMENT EXHIBIT · TWO RUNS Same ticket. Different done. Same model. Same page. Same words in the ticket. One file added to the repo. TWO REAL RUNS, 4 OCTOBER 2026 · QUOTES VERBATIM, TRIMMED TICKET “Add a smooth entrance animation on the hero and turn ‘This week's drop’ into a swipeable carousel. Make it look polished. Tell me when it's done.” RUN 1 · NO DEFINITION OF DONE “No, I did not check that. What I ran was headless desktop Chrome … at full CPU, on localhost.” RUN 2 · DONE.MD IN THE REPO “Done, measured on the budget profile, within budget. … Moto G Power (2022) emulation, 4x CPU throttling, slow 4G … LCP: 0.9 s … INP: 32 ms … JavaScript shipped: 0.73 kB. Nothing was over budget, so nothing had to be cut.” THE DIFFERENCE Eleven lines in a file called DONE.md: the budget phone, the numbers, the budget. Nobody told it to care. Done did. CLAUDE CODE · LIGHTHOUSE 13.5 RUN SAVED BY THE AGENT: MOBILE, 4× CPU, 150 MS RTT · BOTH TRANSCRIPTS IN EVIDENCE/ EXHIBIT #144
22. 22 / 35 IRON/OUT DIAGNOSTIC LAB · THE RULE PROTOCOL 01 · OSMANI, CHAPTER 3 STANDING ORDER Treat AI code like a junior developer's. "Treat AI-generated code as you would code written by a junior developer." OSMANI · CH3, TAKING RESPONSIBILITY FOR QUALITY Brilliant, fast, eager. And still you would never ship a junior's PR on their word. You don't need to read every line. You do need to check every claim: a test, a budget, a trace. Before it reaches a single user.
23. 23 / 35 IRON/OUT DIAGNOSTIC LAB · THE TRAP FIELD NOTE · SPEEDLIFY, AI GROUP The people who build the AI. Eight of thirteen ship heavier than the median page. Homepage weight of every AI company on Speedlify. Dashed line: the median web page, 2.6 MB. Grey: Lighthouse score. HEAVIEST FIRST 50.8 MB 26 anthropic.com 2.8 MB 71 cursor.com 6.6 MB 29 devin.ai 2.3 MB 66 bolt.new 5.6 MB 27 perplexity.ai 2.3 MB 32 openai.com 5.0 MB 35 groq.com 1.3 MB 90 x.ai 3.6 MB 36 deepseek.com 1.2 MB 32 mistral.ai 3.4 MB 55 ollama.com 0.2 MB 99 huggingface.co 3.3 MB 76 replicate.com SPEEDLIFY.DEV/GROUP/AI · SNAPSHOT 6 OCT 2026 · REPLICATE.COM BAR CAPPED (MOSTLY VIDEO) · ZACH LEATHERMAN, 21 SEP 2026 FIELD NOTE #146
24. 24 / 35 Standing order · From typist to architect The AI writes the code now. So your job changed. WAS You wrote the code. NOW You decide if it's good enough to ship. The AI can't feel a slow site. You can. That's the whole job now.
25. 25 / 35 IRON/OUT DIAGNOSTIC LAB · THE TREATMENT FIX THE 70% · AFTER The last 30% is yours. // The same component, finished function FilteredList({ items, query, isLoading }) { const debounced = useDebounce(query, 300); // INP: not on every key const filtered = useMemo( () => items.filter((item) => matchesQuery(item, debounced)), [items, debounced] ); if (isLoading) return <SkeletonList rows="8" />; // CLS: reserve space return ( <ul> {filtered.map((item) => ( <li key={item.id}> <img src={item.src} alt={item.alt} width="150" height="100" loading="lazy" /> // CLS + LCP {item.name} </li> ))} </ul> ); LCP skeleton paints instantly; lazy images lighten first render INP debounce + memo: no work per keystroke CLS reserved space, no jump when content lands } Each fix is a best practice an engineer does by reflex. The AI lacks that instinct. it doesn't feel a slow site. You do. Same component as the pitfall · finished
26. 26 / 35 IRON/OUT DIAGNOSTIC LAB · THE REVIEW PROTOCOL · FOUR REFLEXES What the review looks for. Four reflexes a senior has on autopilot. The model doesn't have them yet. READ THE AI'S PULL REQUEST LIKE A JUNIOR'S SPLIT Anything over 50–100 kb: by route, on interaction, on visibility. The home page doesn't carry the dashboard. THIRD PARTY Remove, reduce, replace, in that order. No script loads faster than the one you don't load. SPACE Every image has width and height; every async block a skeleton. Nothing jumps. ARCHITECTURE Server components, streaming, islands. You don't tune your way out of a bundle problem. You architect around it. CANON · NOTHING HERE IS NEW PROTOCOL #142
27. 27 / 35 A performance budget is one sentence “Our home page ships at most 200 kb of JavaScript and is usable in under 5 seconds on a cheap phone on slow 4G.” Written down. Agreed by the team. Checked by the build.
28. 28 / 35 IRON/OUT DIAGNOSTIC LAB · GOVERN CARE PLAN · A BUDGET IS ONE SENTENCE Where the budget lives. THE BUDGET Checked in CI, on a simulated cheap phone, on every pull request. Does it cross the budget? The build fails. THE PROOF Checked in the field, on real users at p75. Not a green 100 on your laptop. IRON/OUT CARE PLAN · THE BUDGET LIVES IN CI, THE PROOF LIVES IN THE FIELD CARE PLAN #130
29. 29 / 35 IRON/OUT DIAGNOSTIC LAB · VERIFY CARE PLAN · AUTOMATE THE GATE You can't see slow in a diff. An AI component reads fine in review. The cost only shows when it runs. So the check can't be a human reading code. It runs in CI, automatically. 01 · GENERATE 02 · MEASURE 03 · CHECK 04 · GATE AI writes the page. MCP runs a real perf trace. LCP · INP · bundle vs your budget. Over budget? The PR fails. The eyes exist: with Chrome DevTools MCP the agent runs that trace itself, before it opens the PR. On your real pages, not a toy demo. CHROME DEVTOOLS MCP (GOOGLE, 2025) · PERF GATE IN CI CARE PLAN #105
30. 30 / 35 IRON/OUT DIAGNOSTIC LAB · GET IT · ONE COMMAND $ npx modern-web-guidance@latest install Your DONE.md, maintained by the Chrome team, plus the eyes to measure it. That is the full installation. No vendor lock-in, no subscription. Just a protocol. Runs on Claude Code, Cursor, Copilot or your own agent. DEVELOPER.CHROME.COM/DOCS/MODERN-WEB-GUIDANCE · CARE PLAN #059
31. 31 / 35 IRON/OUT DIAGNOSTIC LAB · THE PAYOFF PANEL · VODAFONE, SWAPPIE, ZALANDO This isn't hygiene. It's revenue. +8% VODAFONE · A/B TEST · SAME PAGE, ONLY THE SPEED CHANGED more sales SAME PLAYBOOK, TWO MORE PATIENTS SWAPPIE Core Web Vitals, 3 months ZALANDO per 100 ms faster +42% mobile revenue +0.7% revenue per session from a 31% faster LCP · +15% leads · +11% add-to-cart WEB.DEV CASE STUDIES: VODAFONE 2021, SWAPPIE 2021 · ZALANDO ENGINEERING BLOG 2018 · VIA WPOSTATS.COM SPECIMEN #138
32. 32 / 35 Part 3 · The prognosis · Mobile JS Weight (p50) · 2020 to 2028 The prognosis. Two futures. Mobile · JavaScript Weight · Median (p50) · projection illustrative PRE-AI ERA POST-AI ERA PROGNOSIS today · 689kb 900 kb untreated · +66kb/yr ≈880 kb 800 kb 700 kb treated · budgets + gates 600 kb 500 kb 400 kb 2021 2022 2023 2024 2025 2026 2027 GP T- 3. 5 2020 Same patient, two charts. This is not a forecast. It is a choice. Measured: Ethan Gardner's piecewise fit on HTTPArchive, Jan 2020 to Sep 2026 · Prognosis: Iron/Out, the post-2022 slope continued, versus the same page under a budget and a CI gate · illustrative 2028 ≈600 kb
33. 33 / 35 IRON/OUT DIAGNOSTIC LAB · AMERSFOORT, NL RX #0001 · DISCHARGE INSTRUCTIONS The prescription. PATIENT: TREATABLE the open web · median mobile site RX · TAKE AS DIRECTED Rx 1 Write “done” down. Eleven lines. The cheap phone is in them. Rx 2 One budget sentence, checked in CI. Over it? The build fails. Rx 3 Test on a simulated cheap phone, slow 4G, before every merge. Rx 4 Prove it in the field: LCP and INP at p75, from real users. Rx 5 Review like a junior’s: split over 50–100 kb, third party out, space reserved. Rx 6 The merge stays yours. The agent reports. You decide. REFILL: every pull request PRESCRIBING PHYSICIAN: you None of this needs AI to stop. It needs you to stay the architect.
34. 34 / 35 Who pays for AI code? The person holding this phone. The AI will never feel a slow site. They will. Make their phone part of done. Every dependency you ship is a vote. That vote is yours, not the AI's.
35. 35 / 35 Thank you, Frontmania Smooth site, strong performance. Sander van Surksum · Founder, Iron/Out iron-out.nl · sander@iron-out.nl Let's <measure/> what we build, for everyone.