Superhuman has a 100ms rule. We have a 50ms rule.
This week, while at the beach (it was my spring break 😊), I focused on restoring Tweetscape's sub-50ms load times.
After chatting with @ryanflorence (the creator of Remix) on the cause of our slow client-side renders, I realized I was doing a significant chunk of post-processing client-side that could (and should) be done server-side.
Thus, I moved as much code as humanly possible from the client to our server-side Remix
Now, I perform all post-processing and data formatting server-side (e.g.
moment.js never makes it into the client-side bundle) and then send that formatted data to the client, only sending fields that will actually be rendered in our UI.
Earlier in the week, I also polished up our PostgreSQL queries (using
pg-promise in place of
prisma.$queryRaw due to a number of issues related to the struggles with
bigint + Postgres + Typescript that are mostly resolved with
pg-promise) to preserve large integer precision while taking advantage of the increased Postgres
join speeds that result from moving our primary and foreign keys to be of type
int8 instead of the significantly slower
Fixes & Improvements
- Tweets are now contained in a virtualized list (thanks to
react-window) that is, of course, infinitely scrollable.
bigintparsing overhead by removing
json-bigintfrom the client-side bundle and instead converting those
stringsserver-side prior to sending them to the client.
- Specified the latest Node.js LTS as our platform of choice in a new
.nvmrcconfiguration file (HT @sergiodxa).
- Reduced the amount of data being sent client-side to only include the fields actually visible to the end user.