Reducing jank in initial load

[sansthesis]

One of the things that I've tried to figure out is how to reduce dom thrashing as these large static sites load. This helps prevent initial load jank and gives a smoother initial load experience for everyone. I'd normally use intersectionobserver and virtual lists or something, but the ability to search makes it hard for me to think about how to handle this situation.

The crux of the issue with large html pages like these sites is that the server sends back chunks of a few dozen kb of html. Browsers will incrementally render html as they get it, and appending html to a document usually causes the browser to have to layout, reflow, and repaint every time. This gets very expensive when you have a list of 1000+ cards each with a lot of dom elements inside of them. Therefore, my goal was to try to reduce the amount of dom that would require reflowing each time the browser incrementally rendered more html.

I tried a few things to reduce dom thrashing like by switching to css grid, splitting the list of cards into groups of 60, and absolutely positioning everything, but nothing got me the snappy load times that I wanted. The closest that I was able to get was to load the entire list with display: none and then toggle it visible once it all loaded, but that had a crappy UX where the hero was visible but no content was for at least a second.

I finally compromised on loading the first 60 cards and leaving the rest hidden, toggling them visible in one rAF at the end of page load. I chose 60 because it's the lowest common multiple of all of the quantities of card columns breakpoints that are defined in the css (1, 2, 3, 4, and 5 column breakpoints). This means that cards won't stretch or whatever in situations where someone somehow loads the page and scrolls to the bottom before the remainder of the content becomes visible.

The end result is that the page is usable about two seconds faster than before on my pc, and the difference is probably greater on lower powered devices.

[lynnandtonic]

@JasonRose You are the coolest in the whole world. 🌈

[lynnandtonic]

@JasonRose Thank you so so much!