Performance
One focused chapter from the Thorbis interface research. 12 rules. Read the research index for every chapter and focused study.
Performance
- Device/browser matrix. Test iOS Low Power Mode & macOS Safari. Field techs live on mid-range phones with bad reception.
- Measure reliably. Disable extensions that add overhead or change runtime behavior.
- Track re-renders. Minimize & make re-renders fast. Use React DevTools (opens in a new tab) or React Scan (opens in a new tab).
- Throttle when profiling. Test with CPU & network throttling. A dispatch board that is fast on a Studio Display and janky in a truck is not done.
- Minimize layout work. Batch reads/writes; avoid unnecessary reflows/repaints.
- will-change is a last resort. Do not sprinkle
will-change: transformon every card. Promote a layer only for a motion that is already janking, and drop it when the motion ends. Jakub Krehel’s Interfaces (opens in a new tab) issue onwill-change. - Network latency budgets.
POST/PATCH/DELETEcomplete in under 500ms. Optimistic UI covers the rest. - Keystroke cost. Prefer uncontrolled inputs; make controlled loops cheap. Command Center ranking must stay instant.
- Large lists. Virtualize large job, invoice, and activity lists. A 75-person shop’s ledger is not a toy dataset.
- Preload wisely. Preload only above-the-fold images; lazy-load the rest. Set explicit image dimensions to prevent CLS.
- Preload fonts. For critical text to avoid flash & layout shift. Subset to the code points you use.
- Don’t use the main thread for expensive work. Move long tasks, route matrices, large CSV parses, image work, to Web Workers.
I built this for the dispatcher at 7 a.m., the tech in a crawlspace, and the owner closing the books. Quiet chrome. Precise work. I’m still learning. These are the notes.
Applied bookmark research
Reviewed 2026-09-06. These examples reinforce the existing owners; they do not introduce another visual style or claim the product behavior is implemented. Read the 26-source review and access limits.
A control keeps its meaning through every state
A button that changes width, a field that loses input, or a dialog that loses focus breaks the task even when the resting design looks precise.
Review the approved primitive as a sequence: resting, focused, activated, pending, resolved, and recovered. Keep the action label and footprint stable, associate errors with their fields, and preserve a visible keyboard path.
Thorbis example. Save estimate remains Save estimate while its state mark changes. A validation error keeps the entered values, explains the repair beside the field, and moves focus only when the interaction calls for it.
Verify. Test Tab, Shift-Tab, Enter, Escape where applicable, paste, invalid input, rapid activation, and a slow response. Repeat at 390px, in both themes, with zoom and reduced motion.
Do not import. No hand-built duplicate primitive, hidden label, disabled browser zoom, or borrowed shadow-only outer edge that violates D-017.
Open the ui skill · Evidence: Web Interface Guidelines; Invisible Details; components.build; Details that make interfaces feel better
Transfer the intent, not the desktop gesture
An interaction that works with a precise pointer or modifier key may be unusable for a tech holding a phone.
Preserve the record and task while adapting the visible action path to the device. Use the existing native owner for target sizing, safe areas, focus, and host behavior; no critical action relies only on hover or a hidden gesture.
Thorbis example. A field photo remains attached to the same job when the tech changes orientation or returns from another app. The visible capture action and retry path remain available without discovering a desktop shortcut.
Verify. Check one-handed use, software keyboard opening, text enlargement, orientation, focus visibility, and reduced motion on the relevant device. Keep permission refusal and return-from-interruption states in the review.
Do not import. No desktop hover contract on a phone, blocked zoom, silent clipboard access, or unverified claim that a web imitation is native behavior.
Open the native skill · Evidence: Web Interface Guidelines; Design Engineer Principles; Devouring Details