EV·ENGINESTART THE SIMULATOR

Building for a car's head unit

Illustration of a car dashboard touchscreen with a cable running into the console and a cellular antenna mast in the background.

EV·ENGINE runs in a Tesla's centre screen over the car's own cellular connection, and that link measures 1.3 Mbps with a cold page load of 22 MB. Every choice about caching, fonts and where an asset is fetched from follows from that pairing of numbers.

The connection the page has to load over

EV·ENGINE's most demanding audience isn't a phone on wifi. It's a Tesla's centre screen, or another car head unit like it, pulling whatever cellular signal the vehicle can find at the roadside. Disrex measured that link at 1.3 Mbps, and that number is what the build answers to. Opening the page in the car means opening it over that connection, not a desk connection with four bars and nothing to prove.

A cold load of the page comes to 22 MB. At 1.3 Mbps that takes around 135 seconds to arrive, well over two minutes before a single engine plays, which is not a wait anyone wants to explain to someone stopped at a red light. Everything else in this post exists to shrink that number or to make sure it's paid only once.

A cache lifetime per asset class

The rule for how long a browser is allowed to keep something lives in one file, public/_headers, and it treats two classes of asset differently. Vite renames every script and stylesheet after a hash of its own content, so a returning visitor's cache is either exactly right or the filename has already changed and the old entry goes unused. Those files carry a cache lifetime of 31,536,000 seconds, a year, because there is no version of events where the browser needs to ask again.

The WAV files behind each of the twenty machines, and the ten-second preview clips rendered offline from them, don't get that guarantee. Their URLs stay stable rather than content-addressed, so the same address could point at a different recording after a deploy. Those get 86,400 seconds, a day, which tells the browser to hold onto the file but check back before trusting it through a second day.

Nothing fetched from anywhere else

The page's CSS is inlined into the HTML rather than linked as a separate file. A stylesheet fetched from its own URL costs a full round trip before the browser can start painting anything, and on a 1.3 Mbps link with real latency behind it, that round trip is not free. Inlining it means the first response carries everything needed to render, at the cost of a slightly heavier HTML document.

Fonts are self-hosted for the same reason. A font loaded from a separate host means a fresh DNS lookup and a fresh TLS handshake to a domain the browser has never spoken to, both of which happen before the first byte of the font itself arrives. Serving the font file from the same domain as everything else means that cost gets paid once, for the whole page, rather than a second time for the one asset that happens to sit on someone else's server.

The same logic rules out third-party analytics. EV·ENGINE's own usage tracking is first-party and reads no cookie and sets no identifier that outlives the tab, a decision made on privacy grounds first, with the side effect of never asking the head unit to open a connection to a domain it wasn't already talking to.

Where the caching pays off

None of this matters on the first load alone. A driver who opens EV·ENGINE once, closes the tab at a supercharger, and opens it again the next morning should find that almost nothing needs fetching a second time. The content-addressed bundle is still sitting in cache with most of a year left on it, and only the HTML itself, never large, needs fetching fresh. The 22 MB cold load is a one-time cost the caching exists to make sure nobody pays twice.

None of it helps if the browser can't run the page at all, which is a separate list of requirements, a secure context, Geolocation, Web Audio and an AudioWorklet, laid out on the browser support page. A car head unit has to clear that bar before the network numbers above are worth optimising, and the pipeline from GPS speed to gearbox to engine note, described on how it works, depends on both being true at once.

The numbers behind this page are unglamorous: a megabit-and-a-bit connection, a file that sets two cache lifetimes, CSS with nowhere else to live. None of it is engine sound. It is the reason the engine sound arrives at all, on a screen bolted to a dashboard rather than a laptop on a desk.

More notes

All notes