An analytics product where the main view took eleven seconds to become useful.
Frontend engineering
Largest Contentful Paint: 11.2s to 1.4s
JavaScript shipped to the browser down 71%
Bounce rate on the dashboard route halved
The problem
Meridian's dashboard fetched every widget's data in the browser, in
sequence, after the bundle had parsed. The bundle contained three charting
libraries, two of which were used on one screen each.
What we did
Data moved to the server, where the queries run in parallel and the results
stream to the client as they arrive. Charts became a single library, chosen
by measuring what each one cost rather than by preference.The widget layout renders immediately with skeleton states sized to the
content that will replace them, so nothing moves when the data lands.
The part that mattered most
Neither change was clever. The eleven seconds were the cost of decisions
made when the dashboard had two widgets and never revisited when it had
twenty.