A metrics-first breakdown of what changed when Fleetwise's real-time tracking dashboard moved from a heavyweight UI kit to CSS Vars Framework.
98
Lighthouse score
+34%
dispatcher throughput
58kB
total CSS, gzipped
5 wks
migration timeline
| Metric | Before | After | Improvement |
|---|---|---|---|
| First Contentful Paint | 2.8s | 1.1s |
|
| Largest Contentful Paint | 5.6s | 2.3s |
|
| Total CSS shipped | 410 kB | 58 kB |
|
| JavaScript for theming | 112 kB | 0 kB |
|
| Lighthouse Performance | 62 | 98 |
|
Route colors and status badges read directly from CSS custom properties, so a fleet-wide status change is one class swap — no virtual-DOM diffing required.
Drivers toggle data-theme="dark"
from the settings menu; every panel, badge, and shadow re-derives instantly.
Table density and striping are utility classes —
.table-compact,
.table-striped — no extra CSS shipped.