Web Performance Economics: 17 Lessons From the Performance Desk
Here is my thesis, stated plainly before the evidence: speed is respect. Respect converts. Each lesson fixes one vital at a time, measures it in the field, plus prices it in revenue. Work top to bottom. Every millisecond here is a promise. This course audits who keeps it.
TL;DR: Seventeen principled web performance lessons with diagrams, from Core Web Vitals to edge rendering plus revenue math. Built from production postmortems with calculators for the math.
By Marta · Performance desk course · Updated September 18, 2026
What you will be able to do
- Correlate conversion against load time, then fix paint plus stability plus interaction strictly weakest-first.
- Measure in the field beside the lab, enforce budgets in review, plus read CrUX context like a local.
- Render at the edge, cache repeats, size images with reserved slots, plus design realtime fan-out without fear.
- Price every millisecond with the downtime plus RPS calculators, then present the receipt beside the diagram.
- Answer performance interviews with thesis-first audits, field numbers, plus priced fixes.
How interviews test this course: one page you made faster, numbers first, weakest vital named. Lesson 16 rehearses the audit.
Speed Is Respect
Here is my thesis, stated plainly before the evidence: a slow page tells the visitor their time matters less than your roadmap. A fast page tells the opposite. One European retailer tested the principle with a spreadsheet rather than a slogan. The spreadsheet now opens every review I conduct.
- Correlate before you optimize. One chart of conversion against load time buys more roadmap than ten audits.
- State the thesis as a testable price. Ten points of conversion were purchasable with milliseconds in the published case.
- Deep dive: Swappie 23pc Faster, page loads down 23 percent with mobile revenue up 42 percent.
The method matters more than the numbers. The team measured conversion against load before changing anything, which turned speed from an engineering complaint into a revenue line executives could read. Measurement first is not a platitude. It is the permit for everything that follows.
Q1. Prove with one chart that speed deserves roadmap time this quarter. Seen at: product-minded frontend loops.
Q2. Mobile converts near half the desktop rate. Where do you look first? Seen at: growth plus marketplace loops.
Thesis stated. Now the uncomfortable question of who grades it. Lesson 02: Field accuses →
The Field Accuses
Here is my corollary: respect cannot be measured in a simulator. A lab renders one page once on steady hardware with nobody touching it. Visitors scroll plus rotate plus rage-tap on buses. One platform learned the difference across millions of sites when the lab applauded plus real thumbs suffered.
- Instrument the field before trusting the lab. Ship real-user measurement to live traffic plus let thumbs vote.
- Optimize the worst visitor number, not the best lab score. Weakest first is a strategy, not a slogan.
- Deep dive: GoDaddy Lab Applauded, where layout shift at 0.17 dragged passing sites to 40 percent.
Lesson 1 taught correlation. This lesson teaches jurisdiction. Field data accuses while lab scores flatter. I demote every lab-only scoreboard to advisory status until visitors confirm it.
Q1. Lab is green while field is red. Which do you trust plus why? Seen at: frontend platform loops.
Q2. Design real-user measurement for one million page views a day. Seen at: performance plus analytics loops.
Jurisdiction settled. Now the first vital on trial: paint. Lesson 03: Paint promise →
Paint Is the Promise
The largest element is the page keeping its first promise. When it arrives late, everything below it waits in doubt. One retailer cut largest paint 55 percent by rendering the hero on the server wherever possible instead of the client. Same hero. Kept promise.
- Render the largest element on the server wherever possible. Client waterfalls delay the one pixel visitors judge.
- Prioritize the hero resource plus defer the rest. Paint responds to concrete cheap choices, not clever projects.
- Deep dive: Swappie treatment, server heroes plus pruned bundles behind the 55 percent paint cut.
Fix paint plus stability before interaction. Largest paint responds to server rendering plus reserved space plus pruned bundles. Interaction metrics follow a calm page the way applause follows performance.
Q1. Largest paint misses its bar on mobile only. Walk through the fix. Seen at: frontend plus mobile web loops.
Q2. Server render or client render for the hero? Defend with numbers. Seen at: architecture plus performance loops.
Promise kept. Now the page must hold still while reading. Lesson 04: Stability manners →
Stability Is Manners
Layout shift is the rudest vital because it punishes reading itself. Text jumps under eyes. Buttons dodge thumbs. A published platform measured 0.17 against a 0.10 bar, then steadied millions of storefronts with reserved space plus min-height wrappers. Manners, enforced by CSS.
- Reserve space as a default, not a fix. Images plus ads plus dynamic blocks all arrive late by nature.
- Wrap dynamic components in min-height containers sized from observed averages, releasing the constraint after render.
- Deep dive: GoDaddy treatment, one vital fixed first for a 75 percent relative gain.
Notice what the winning team did not do. No replatforming. No framework migration. One metric plus one deadline plus the humility to admit the lab had graded the wrong exam. Instability is space arriving late, so arrive with the space first.
Q1. Layout shift spikes only on narrow screens with long translations. Why? Seen at: mobile web plus i18n loops.
Q2. Fix a shifting feed without touching the framework. Show the slots. Seen at: frontend loops.
Page steadied. Now the handshake after the hello. Lesson 05: Handshake →
Interaction Is the Handshake
Paint earns attention. Interaction repays it. The hardest vital in current field data judges the delay between tap plus visible answer, with over four in ten sites missing its 200ms bar. Calm pages pass it. Busy main threads fail it in front of witnesses.
- Yield the main thread around input. Long tasks that block taps read as disrespect with a timestamp.
- Fix paint plus stability first. A calm page makes interaction cheaper than any handler rewrite.
- Deep dive: Swappie field notes, where interaction trails paint in the 2026 field snapshot.
Lesson 3 taught promises. Lesson 4 taught manners. This lesson teaches the handshake. Mobile still trails desktop by roughly seven points while carrying most traffic, which is where every handshake gets graded.
Q1. Interaction misses 200ms on low-end phones only. What yields first? Seen at: mobile web loops.
Q2. Rank the three vitals by visitor pain for a news page. Defend the order. Seen at: performance-minded frontend loops.
Handshake firm. Now the luggage it carries. Lesson 06: Bundle weight →
Bundles Are the Weight
Weight arrives as features with deadlines. One builder platform turned prompts into apps by reinstalling the internet per preview, near a billion tokens a minute that a cache could have spared. Different layer, same physics. Every repeated byte is a choice nobody priced.
- Prune unused JavaScript plus CSS before adding loaders. The cheapest byte is the deleted one.
- Rationalize imports plus split by route. Ship the handshake code first, the settings page later.
- Deep dives: Swappie bundle hygiene plus Lovable preview weight.
None of these fixes is clever. All of them compound, which is precisely why undisciplined teams skip them for cleverer projects. Process is the product here. The fixes are commodity. The measurement discipline is the moat.
Q1. Third-party scripts push interaction past budget. What goes, what stays? Seen at: frontend plus growth loops.
Q2. Design a bundle budget enforced in review. Who blocks the merge? Seen at: platform frontend loops.
Weight shed. Now the first byte travels to meet the visitor. Lesson 07: Edge first byte →
Edge Renders the First Byte
Distance is latency with geography. Rendering at the edge moves the first byte toward the thumb, while waiting on distant APIs bills the gap. One serverless platform itemized that wait plainly: a million requests per second for a month is trillions of billed events. Geography plus waiting compose into the invoice.
- Render close to the visitor for the first byte, then stream the rest. Edge placement shortens doubt, not just distance.
- Price provider wait time. Serverless bills the pause between your function plus someone else API.
- Deep dives: Vercel Fluid Compute plus Cloudflare edge coupling.
Run the shape through the RPS envelope calculator to feel the stakes. Edge requests times seconds per month turn every wait millisecond into a budget line. Keep dependencies fast or pay for standing still.
Q1. Edge render or origin render for a news homepage? Show the trade. Seen at: edge plus CDN loops.
Q2. Serverless wait time doubles the bill with flat traffic. What moved? Seen at: FinOps-flavored platform loops.
First byte placed. Now the repeated answer should cost nothing. Lesson 08: Cache repeat →
Cache the Repeat
Somewhere a quarter of all greetings repeat, which means a quarter of one famous voice invoice was optional. The cached hello answered in 5ms while the computed hello billed GPU time at 75ms. Same word. Fifteen times cheaper. The web keeps the same secret at smaller scale.
- Cache repeated work first. Heroes, headers, plus hot pages pay for the whole layer.
- Every entry needs a TTL plus an invalidation story. Stale prices spend like real prices.
- Deep dives: Voice hello cache math plus Cloudflare edge coupling.
Caching is margin engineering. The analogy travels intact from voice inference to web pages: repeated work should be nearly free. I price the repeat rate before sizing anything else.
Q1. Design CDN caching with fast invalidation for a news homepage. Seen at: Meta-style plus Cloudflare-style loops.
Q2. Hit rate falls from 95 to 40 percent overnight. Debug it live. Seen at: SRE plus platform loops.
Repeats freed. Now the heaviest single asset: pixels. Lesson 09: Pixel carry →
Images Carry the Pixels
Images are the weight visitors can see. Both of my field files indicted them first: heroes arriving late plus slots arriving never. Reserved space plus sized containers plus pruned formats fixed what frameworks could not. Pixels with manners.
- Size every image plus reserve its slot before it loads. Stability starts in markup, not in scripts.
- Serve responsive sizes plus modern formats. Phones should never download desktop pixels.
- Deep dives: Swappie heroes plus GoDaddy image space.
Two decisions show taste in the published cases. Layout shifts were studied across viewports plus languages rather than one desktop test, catching shifts that only appear on narrow screens with long translations. Field metrics rode alongside lab scores the whole quarter. I copy both habits exactly.
Q1. Images cause most of the layout shift on a feed. Fix it in markup. Seen at: frontend loops.
Q2. When do images deserve preloading plus when is it waste? Seen at: performance review loops.
Pixels placed. Now the discipline that protects them. Lesson 10: Measure revenue →
Measure Like Revenue
Regressions arrive as features with deadlines. Both winning teams held the line the same way: field metrics beside lab scores every week plus a budget that could block a merge. Culture is a graph with a gate attached.
- Track vitals from real users into analytics plus queryable storage. Trends beat snapshots for every argument.
- Enforce a budget in review. A gate that never blocks is decor with a dashboard.
- Deep dive: GoDaddy field instrumentation, where shipped measurement preceded every fix.
Lesson 2 taught jurisdiction. This lesson teaches permanence. Chrome UX data through August 2026 puts 55.7 percent of origins in the green across all three vitals, up from barely half two years earlier. Progress is real plus uneven. Budgets keep your origin on the right side of it.
Q1. Design a performance budget for a checkout funnel. Which gates block? Seen at: staff frontend loops.
Q2. Vitals regress after a replatform. Who owns the revert call? Seen at: engineering management loops.
Discipline installed. Now the receipt that funds it. Lesson 11: Price millisecond →
Price the Millisecond
Here is the receipt I keep pinned above my desk. Page load down 23 percent. Largest paint down 55 percent. Relative mobile conversion from 24 to 34 percent. Mobile revenue up 42 percent. The pattern replicates because human impatience replicates: one telecom reported 31 percent better paint with 8 percent more sales while one publisher fixed slots for 15 percent better stability with 10 percent more ad revenue.
- Price slowness as revenue at risk per minute with the downtime cost calculator. A leaking funnel is a slow-motion outage nobody pages for.
- Report ratios, not just deltas. Roughly two points of conversion per point of load improvement travels across companies.
- Deep dives: Swappie receipt plus GoDaddy receipt.
My rule from those files still prices my roadmaps. When a fix cannot be priced in conversion, it cannot be prioritized. A funnel leaking ten conversion points to latency deserves the same urgency as an outage with the same invoice.
Q1. Price a 500ms checkout slowdown monthly, line by line, out loud. Seen at: startup plus CTO-round loops.
Q2. Cut load 30 percent without touching features. Name the three cheapest wins. Seen at: growth plus performance loops.
You can now price any page. Time to watch many cursors share one. Lesson 12: Realtime fast →
Realtime Answers Fast
Here is a harder promise: ten cursors fighting over one canvas without visible war. The published design refuses pure peer negotiation. One server decides who wins, isolates every document, plus fans out at a modeled 65,000 requests a second. Agreement without a referee is a research project. This team shipped a referee.
- Order operations at one server. Clients render optimistically, the referee settles truth.
- Isolate by document. One runaway canvas must never tax its neighbors.
- Deep dive: Figma Multiplayer Editor, the server that decides plus the Rust rewrite behind it.
Model the fan-out with the RPS envelope calculator before promising realtime. Every cursor multiplies every other cursor. Interaction budgets die in fan-out math, not in handler code.
Q1. Design multiplayer cursors for one million concurrent editors. Seen at: Figma-style plus Google-style loops.
Q2. Two users edit offline for an hour. Who wins plus why? Seen at: realtime plus collaboration loops.
Order settled. Now the wait nobody priced. Lesson 13: Waiting bills →
Waiting Bills Too
Here is the invoice serverless hoped you would not itemize: the wait between your function plus someone else API, billed at a modeled 100,000 requests a second across 45 billion weekly requests. Concurrency without waiting is cheap. Waiting at scale is a second product you never launched.
- Price provider wait time per request. Keep dependencies fast or pay for standing still.
- Concurrency plus cold starts multiply the wait. Warm pools plus lean handlers shrink both.
- Deep dive: Vercel Fluid Compute, the bill that waited on providers.
Run the shape through the RPS envelope calculator with wait milliseconds included. Serverless bills honesty about dependencies. Monoliths hid the wait inside idle servers. The meter simply moved.
Q1. Serverless spend doubles with flat traffic. Diagnose the wait. Seen at: FinOps plus platform loops.
Q2. When does serverless beat containers on price? Show the crossover. Seen at: architecture loops.
Wait priced. Now the edge that shares one fate. Lesson 14: Shared fate →
Shared Fate Fails Together
Here is the edge at its most honest: one wrong internal file loaded on every server at once, in November 2025, plus error pages replaced three giant platforms worldwide. Storage fell with the proxy it never needed. The fix cut storage loose from the proxy. Shared fate is a design choice wearing an accident costume.
- Decouple data paths from control paths. Storage must survive the proxy worst day.
- Propagate config in stages with automatic halt. Network-wide simultaneity is a choice, not a requirement.
- Deep dive: Cloudflare Loaded the Wrong File, shared fate with a bypass ending.
The lesson bypasses every edge network built the same way. Speed at the edge means nothing when one file can redden every region. Fast plus fragile is just fast failure with geography.
Q1. One config file threatens every edge region. Design the rollout that survives it. Seen at: edge plus SRE loops.
Q2. Storage shares the proxy fate. Sketch the bypass. Seen at: infra loops.
Fate decoupled. Now the weight hiding in previews. Lesson 15: Preview weight →
Weight Ships in Previews
Here is weight at startup speed: a $6.6B builder turning prompts into apps, each preview booting a sandbox plus reinstalling dependencies plus routing near a billion tokens a minute. The demo feels instant. The meter runs a marathon. A cache fix at a modeled million requests a second is the difference between magic plus margin.
- Reuse sandboxes plus dependency layers across previews. Fresh installs are a subscription to waiting.
- Route tokens through caches at scale. Repeated work should be nearly free at a million requests a second.
- Deep dive: Lovable Preview Button, $6.6B of prompts with a weight problem.
Lesson 6 taught bundle hygiene for pages. This lesson teaches it for platforms. The physics match exactly: repeated bytes are choices nobody priced. Price them before the preview becomes the product.
Q1. Price a preview environment per developer monthly. Seen at: platform plus startup loops.
Q2. Token routing costs explode with users. Where does caching land first? Seen at: AI platform loops.
Weight priced. Now turn all of it into interview answers. Lesson 16: Interview audit →
The Interview Audit
Here is the audit I run on candidates: show me one page you made faster, with the before number, the after number, plus the receipt connecting them. No receipt, no hire signal. Panels remember engineers who measured thumbs plus moved revenue. This lesson turns sixteen lessons into that engineer.
- Open with a thesis in one line. Speed is respect, tested on your own funnel with your own chart.
- Price slowness with the downtime cost calculator. Leaking funnels are slow-motion outages. Say so.
- Close with the weakest vital you fixed plus its receipt. One vital with numbers beats three theories.
Rehearse three answers this week: a paint fix with server rendering, a stability fix with reserved slots, plus a revenue story with conversion math. State the field number first. The lab number never hired anyone.
Q1. Walk me through a page you made faster, numbers first. Seen at: frontend plus growth loops.
Q2. Checkout converts poorly on mobile. Your first three moves? Seen at: product-minded performance loops.
Answers rehearsed. Now audit a page of your own. Lesson 17: Audit yours →
Audit Your Own Page
Bring one page from your own work. Mine was a product listing that shifted under every thumb. Yours might be checkout, search, or a marketing hero. We will state the thesis, find the weakest vital, fix only it, plus present the receipt beside the diagram.
- State the thesis in one line. Speed is respect, tested on your own funnel with your own chart.
- Fix the weakest vital only until it is not weakest anymore. Discipline beats breadth in every published case.
- Close with the invoice. Conversion points gained times revenue per point, labeled as estimates.
Course complete. Keep reading the shelf: all case studies plus the data pipelines course and the system design course. New pages ship weekly. So will new receipts.
Bring one audit story of your own. Teams remember engineers who measured thumbs plus moved revenue. This course gave you twelve borrowed receipts. Earn one.
Sources plus method
This course teaches from published Buildopsy postmortems linked under each lesson: Swappie mobile revenue, GoDaddy weakest vital, Vercel Fluid Compute wait billing, Cloudflare edge coupling, Lovable preview weight, plus voice cache math as a caching analogy. Business figures follow those accounts. Cost framing is modeled from public list prices.