Fullpage vs Progressive Loading

This is a follow up from previous post. In that post I imagined an UX where we progressive load the landing page of hn.tentativeknowledge.com one by one from top to bottom. Turns out that the current implementation kinda makes that an easy change. I don’t even need to use usePriorityQueue hook that I created in previous post.

Currently, when we load the frontpage we do the followings in order:

  1. Make a request for top 20 stories with both title and url fields
  2. Server makes 2 requests to Hackernews: 2.1. Get top stories' ids 2.2. For each story id, fetch the corresponding story’s details which includes title and url.
  3. Client renders stories from the response

The experience looks like this

Step 2.2 requires fetching stories from Hackernews. For the client request with 20 stories, server ends up making 21 queries before returning response back to client.

The progresive load idea basically reduces the number of initial stories to load to much smaller number, for example 3. In this case, server will only make 4 queries to Hackernews before returns the response to client. Client might get the response quicker than in the previous approach, so it can reduce the Time To First Interaction. I said might because there are a few things on the server side that could make it not true or the performance gain is negligible:

  1. All requests made to Hackernews are done concurrently
  2. Story payloads are very small

Anyway, I implemented the progressive payload anyway to see it in action. The implementation is pretty simple. It leverages concurrent mode in React 18 and also uses Infinite Scrolling technique to automatically trigger further loading.

Here’s the result

Woah, that’s actually … much worse experience IMO. Even though the first stories were rendered much quicker, but the constant UI updates that follow make a bad experience:

  1. I, as an user, cannot focus on the first few links right away because the continuous loading of new stories causes distraction.
  2. The page perf is perceived as much slower because the UI is still not yet stable after the page load.

I ended up reverting these changes. Anyway it was fun implementing progressive loading and see it in action.