This site’s stylesheet is placed inline in the <head> of every page, by one line of configuration:

build: { inlineStylesheets: 'always' }

CSS blocks rendering by nature: served as a separate file, it costs a full network round trip before the first pixel, measured at about 290 ms on 4G mobile. Inline in the HTML, it arrives with it. You pay about 20 KB gzip per page instead of a file cached across pages, and it is the right trade-off for a site where the vast majority of visits see only one page.

Google measures that delay before the first pixel and ranks on it. A visitor feels it without naming it: a fast site inspires trust, a slow one looks careless before the first word.

The part that gets decided before writing

A slow site is slow by construction: too many scripts, rendering that waits on the server, frames loading other frames. Compressing three images at the end does not make up for an architecture.

So I start from static: the HTML arrives ready, waiting on nothing. EVA CSS handles the scaling in pure CSS, with clamp() rather than a cascade of breakpoints: this whole site runs on a single width media query. What little JavaScript remains loads when it is needed, and the admin is not even downloaded for an ordinary visitor, for lack of a session.

A slow site's cascade and a page that arrives ready, on one loading axis Two horizontal bands drawn from the same origin, on the left. On top, four blocks of equal width set end to end: waits on the server, too many scripts, frames, then, one line lower and starting where the third one ends, other frames. A vertical accent rule falls at the end of that fourth block, and the words the page is seen read just before it. Below, a single block of the same width, labelled at once, and the same vertical accent rule falls at its end, three blocks earlier, with the same words the page is seen just after it. Under both bands, an axis arrowed to the right carries the word loading and has no graduations. A SLOW SITE BY CONSTRUCTION waits on the server too many scripts frames other frames the page is seen THE HTML ARRIVES READY WAITING ON NOTHING at once the page is seen LOADING
What separates the two markers is not a setting, it is three more blocks.

Removing rather than adding

Every dependency, every script has a cost, and the total always ends up showing. The right question is « what do I take away ».

Five decisions along the project, and the height of their effect A horizontal axis arrowed to the right, between two labels: on the left I decided beforehand, on the right I optimised afterwards. Five vertical bars of decreasing heights stand on that axis, each in its place. The first, the tallest, is drawn in accent and carries the word static; then come EVA CSS, what I take away, when it is needed, and on the far right, almost flat, three images. A vertical axis on the left carries the word effect and has no graduations. I DECIDED BEFOREHAND I OPTIMISED AFTERWARDS THE EFFECT static EVA CSS what I take away when it is needed three images
The later the decision, the less speed it has left to change.

What you only see by measuring

The 3D scenes on this site looked light. Measured in the browser, they were copying a fixed tint onto every vertex and sending it back to the graphics card on every frame. Traffic went from 5 MB/s to 30 KB/s on one page, from 3.3 MB/s to 660 KB/s on another, without a single pixel changing on screen. On the first, one-pixel points were being drawn as spheres of 468 triangles: the load fell from 74,918 vertices per frame to 41,222.