2 min read
A studio that sells motion and 3D has to show that neither costs the visitor a slow page. So the budget is written down before the work starts, and the site is held to it the same way a client's is.
The gate
A production build is served locally and measured with Lighthouse on mobile and desktop, then in a phone lab: a 390 px profile with the processor slowed four times and a Fast 3G network. The same run checks accessibility with axe, and loads the site again with reduced motion and with WebGL switched off, because both have to work on their own.
The thresholds: Lighthouse performance at 90 or above on a phone, the largest paint under 2.5 seconds, interaction to next paint under 200 ms, layout shift under 0.1, and the home page under 1.8 MB on a phone. A release that misses one does not ship.
// what the home page reads, from the last gate run
"thresholds": {
"lighthousePerformanceMobile": 90,
"lcpMs": 2500,
"inpMs": 200,
"cls": 0.1,
"fpsMin": 55
}What it takes
The headline is plain text in the document and it is the largest paint, so nothing may load before it. The canvas is created after the load event, in an idle moment, and only on pages that have something to draw. There is one canvas for the whole site and one material for the ribbon.
The renderer watches itself. Quality comes in three tiers, from 360 segments along each ribbon down to 100, and two seconds under 50 frames a second drops the pixel density once. Pages that are for reading let the canvas render on demand, so it costs nothing while nothing moves.
Published
The release gate writes its results to one file, and the home page reads its four numbers and their budgets from that file. The full run, with every page and every check, is on the QA report page.