Case 07of 08
Lumen Row A performance budget, agreed before the design
A Series A hardware company whose site opened with a 4.2 MB autoplay video, took 6.4 seconds to paint on 4G, and lost 71% of mobile visitors before it finished. Most of that traffic came from QR codes on a conference stand.
The rebuilt homepage — 310 KB, budget enforced in CIFig. 01
The problem
Lumen Row make grid-scale heat batteries. Their site opened with a drone video of a wind farm, shot properly and expensively, that took 4.2 MB and four seconds to become visible.
The detail that decided the project: 62% of their traffic was mobile, most of it arriving from QR codes on a trade-stand banner — which means someone standing in a conference hall on congested 4G, giving the site about eight seconds of patience. Seventy-one percent of them left.
- 4.9 MB homepage, 4.2 MB of it a single autoplay video
- 6.4s largest contentful paint on throttled 4G
- 71% mobile bounce, against 38% on desktop
- 62% of sessions from mobile, concentrated around three trade shows a year
- Eleven third-party scripts, four of them on the critical path
Before and after
The heroTotal homepage weight, down from 4.9 MB. The company still looks expensive; it just does not cost the visitor anything to find that out.
Budget before design
We agreed a performance budget in week one, before a single layout: 180 KB of JavaScript, 120 KB of images per view, LCP under 1.2 seconds on a throttled connection. Signed off by the founder, wired into CI, and treated as a design constraint rather than an optimisation phase.
That is the whole project. Every subsequent decision — no framework runtime, system fonts subset to Latin, analytics after first interaction, and the video cut — follows from a number agreed before anybody had anything to defend.
- Budget agreed and signed in week one, before any design work
- Enforced in CI: a commit that breaks it fails, it is not a warning
- No framework runtime shipped; 41 KB of JS against a 180 KB allowance
- Analytics and chat deferred until after first interaction
- Every image budgeted per template, not per page, so regressions are visible
From QR code to demo
Eight seconds of patienceMeasured on the homepage at 1440px, cache empty, after compression. Bars are proportional to the largest single item rather than to each other, so the hero does not flatten the rest into invisibility. Third-party scripts that now load after interaction are excluded from the after figure, which is the point of deferring them, but they are 84 KB if you count them.
Replacing the video
The hero video had to go, and the founder had paid for it eight weeks earlier. That conversation was the hardest part of the project and we handled it badly by having it in week two instead of week zero.
What replaced it is 11 KB of CSS and SVG: a slow thermal gradient moving through a cutaway of the battery core, which says what the company does more directly than aerial footage of somebody else’s wind farm. It starts instantly, respects reduced-motion, and costs 0.3% of the video.
- 4.2 MB video replaced by 11 KB of CSS and inline SVG
- Animation pauses under
prefers-reduced-motion, not just dims - Video kept, cut to 40 seconds, on a page people choose to open
- Hero renders on the first paint with no layout shift — CLS 0.31 → 0.01
- Same asset reused on the stand itself, looping on a screen
The budget
Enforced, not aspired toResults
Each with its methodThey deleted a video I had just paid for and were right to. I would rather have had that conversation before the shoot, and so would they.
LogWeek by week
The build log
Six weeks, including one uncomfortable meeting that should have happened earlier.
Paid discovery. Analytics read properly for the first time; the mobile and trade-show finding came out of it. Performance budget drafted and signed.
Budget wired into CI before any design. A failing build on day three proved it worked, which mattered more than it sounds.
The video conversation. Badly timed, honestly argued, and settled by building the CSS alternative and putting it next to the video on staging.
Hero animation and the specification pages. Content model designed so images are budgeted per template and a regression is obvious in review.
Everything else, inside the budget. Fonts subset, analytics deferred, chat widget removed entirely at the founder’s suggestion.
Launch, two weeks before their largest trade show. Stand QR codes pointed at a page built for a conference hall, not a desk.
Budget still enforced in CI eighteen months later, and still passing, which is the part we are most pleased about.
What shipped
Six deliverablesWhat we would do differently
We should have shown the budget arithmetic in week zero, before the video was commissioned, not in week two after it was delivered. The maths was not difficult and the founder would have made the same call earlier and more cheaply. We now put a performance budget in the discovery output for every marketing site, whether or not anyone has asked about performance, precisely so that this conversation happens before money is spent rather than after.
Who did it
CreditsPerformance budget, design, build, hero animation. One person, five weeks.
Founder who signed the budget and then lived with it; an engineer who cut the specification content down by half without being asked.
The original video was made by a film company we had nothing to do with and is a good film. It just belonged somewhere other than the critical path.
Two build slots openNext start: March