Case 3 · Air quality hardware and dashboard · Europe
survair
survair is building a ceiling-native air terminal: an HVAC ceiling diffuser that senses air where conditioned air actually enters a room.
At a glance
4.27 to 1
The page itself is more than four times smaller to download.
136,870 to 32,008 bytes, gzipped, the document only. 4.27 to 1.
0.000
Nothing on the page jumps while it loads.
Layout shift 0.000 across the full page.
0
No tracking, no cookies, no outside scripts.
0 of each.
What the business does
survair is building a ceiling-native air terminal: an HVAC ceiling diffuser that senses air where conditioned air actually enters a room, and signals the room’s air status back into the room through a recessed LED ring, with a dashboard behind it. The buyers are premium hotels and offices.
What was wrong when we started
- The page had to carry eleven sections, a hero photograph with two separate subjects in it, and a dashboard, without becoming a heavy page.
- The two subjects of the hero photograph, the diffuser and the wall projection, sit at opposite corners of the frame, so any single crop loses one of them.
The numbers
The alt text on this page averages a hundred characters, which is long. It is long because the photographs carry the argument: a person who cannot see them should get the argument, not a filename.
136,870 to 32,008 bytes, 4.27 to 1
The landing page document, gzipped.
0
External JavaScript files, analytics, tracking pixels, cookies, localStorage and sessionStorage across all three pages.
0.000
Cumulative layout shift across the full 14,269px page.
3
Network requests for a complete desktop above-the-fold render.
35.92%
The saving from the WebP encode against JPEG at identical pixel dimensions, across five sizes, 645,898 bytes to 413,862.
958
Rendered DOM nodes, for a page with eleven sections.
8 of 8
Images carrying explicit width, height and a non-empty alt, mean alt length 100.1 characters.
The logo
- signal
- ink
- gray
- amber
- sand
The colors, by name and value
- signal #34C6A0
- ink #0F2029
- gray #81939B
- amber #E6B24A
- sand #E4D2AC
The colors as the built site uses them.
What we decided
The whole page is one file with no external JavaScript.
Why
Zero script src tags, zero analytics, zero tracking pixels, zero cookies, zero localStorage. The only non-first-party origins are the two typography hosts. Three network requests give a complete desktop above-the-fold render.
Rejected: a tag manager, which is the ordinary way this gets built and would have added a third party and a consent obligation to a page that needs neither.
The hero frame changes shape four times down the breakpoint ladder instead of shrinking.
Why
The two subjects are at roughly 59% x / 9% y and 32% x / 42% y. A single crop cannot hold both, so the frame goes 16/10, then 16/9 below 1120px, then 4/3 below 860px, then 1/1 below 560px, with five distinct object-position values so both subjects stay in frame at every width.
Every image carries explicit width and height.
Why
Cumulative layout shift measured 0.000 across the full 14,269px page.
What they own now
- The repository and the deploy workflow
- A single-file page with no build step, which anyone can open and edit
Yours, next.
See how your home page reads to a customer.