This is very nice and for me especially because I've tried to think about it before your post. I think you can write a very long book if you go really into detail such as the underlying physics for wifi starting from maxwell's equations, how specific CPU architectures execute one instruction at a hardware level and maybe more in depth discussion about the math and cryptography within TLS.
Am I crazy if for something like an online purchase, I kind of expect it to take a second or two to process the payment, so I would assume something went wrong if it was 200ms?
I’ve definitely had in the UX side a situation where the PM/Owner types asked me to introduce a delay in the “disabled button with loading spinner” such that the user sees it for a visible amount of time because our API was too fast for their taste.
That was terrible, I used to always turn it off. It's like speaking one word and the person interrupting you based on the prefix you had uttered so far... every single darn word. Imagine writing "how do I kill" and having it assume you meant a living being rather than a program.
> At 2000ms, without output, you wonder if it crashed. (That was the old one.)
That must have been a really, really long time ago indeed, because there are very few websites now that take less than 2000ms to load. The linked site didn’t even come close on my phone (probably 3-4 seconds), and I most certainly didn’t wonder whether it had crashed.
While I also enjoyed it very much, some thing are strangely ordered and not how I would expect someone with such knowledge of all the moving parts in a request, would build such a site. So for me it feels like an LLM has build it and the human with the prompt saw it and said "eh, good enough".
Agreed. This reeks LLM writing with no human oversight, or at least a human with no writing experience. The text underneath “The Click” is an immediate giveaway:
> Five milliseconds of hardware and browser bookkeeping before a single byte leaves the laptop.
I don’t even know how to describe it, but the “[…] before X” sentence style stands out to me.
Back in the day "what happens when the user types a url in the address bar and press enter" used to be an interview question, and I remember nobody has ever mentioned the hardware and keyboard keys and interrupts. This post does! Pretty awesome detailed view of a request lifecycle.
I still like this question because of exactly what you mentioned. What the interviewee does and does not mention can give you a fair bit of insight into their priors.
The US is so big, that 50 ms is physically not possible for everyone.
This is something that not everybody is aware of. When I as a German build something for germans, everyone who needs to wait longer than 100 ms for a request, is rightfully mad. But when I want to serve the same stuff to americans at the same speed, I have to build something completely different and much more complex.
> Violet marks the data as it moves, always top to bottom. Nothing else on the page uses that color.
Proceeds to use that color for tooltips, text color, headers, and more
This was a really cool visualization but that ^ bothered me way more than it should have.
This is very nice and for me especially because I've tried to think about it before your post. I think you can write a very long book if you go really into detail such as the underlying physics for wifi starting from maxwell's equations, how specific CPU architectures execute one instruction at a hardware level and maybe more in depth discussion about the math and cryptography within TLS.
Am I crazy if for something like an online purchase, I kind of expect it to take a second or two to process the payment, so I would assume something went wrong if it was 200ms?
I’ve definitely had in the UX side a situation where the PM/Owner types asked me to introduce a delay in the “disabled button with loading spinner” such that the user sees it for a visible amount of time because our API was too fast for their taste.
Your comment reminded me of when Google introduced "Instant Search" in 2010. Here's an old HN thread from the launch: https://news.ycombinator.com/item?id=1672391
That was terrible, I used to always turn it off. It's like speaking one word and the person interrupting you based on the prefix you had uttered so far... every single darn word. Imagine writing "how do I kill" and having it assume you meant a living being rather than a program.
No-one mourned when that one went to the Google Graveyard.
IIRC TurboTax has a bunch of loaders / spinners like this, similar idea.
Same, I call it the perception of work.
I remember prior de AI era, it was a common pattern to for some delay in the answers to make it feel more "human"
> The person who clicked noticed no delay.
Just to be the "actually..." guy: People notice 200ms delay. It's just that in cases it doesn't cause any bad feelings."
I learned three thresholds over the years. Well, one of them decades ago and the others recently. Basically:
At 50ms, you notice.
At 400ms, you care.
At 2000ms, without output, you wonder if it crashed. (That was the old one.)
> At 2000ms, without output, you wonder if it crashed. (That was the old one.)
That must have been a really, really long time ago indeed, because there are very few websites now that take less than 2000ms to load. The linked site didn’t even come close on my phone (probably 3-4 seconds), and I most certainly didn’t wonder whether it had crashed.
The timing refers to feeling like the device acknowledged your request with some response.
Not seeing the final completion of the request.
Your phone probably showed something after you clicked the link but before the page rendered: Link highlight change, a progress bar, etc.
If your phone had crashed and the browser was non-responsive, you would have recognized it quickly. More quickly than the page load time.
I dunno man, i am In China.. everything outside of it takes at least 2000-5000 ms to even start responding on a good day
I'm finding more and more web sites that won't load at all until I request them a second time.
GitHub
This is magnificent!
Gave me roller-coaster ride across 40 years of gathering knowledge about computers and networks.
I'm very jealous of whoever created that. Well done!
You are not jealous. You are envious.
Homer explains it best https://youtu.be/Tmx1jpqv3RA
While I also enjoyed it very much, some thing are strangely ordered and not how I would expect someone with such knowledge of all the moving parts in a request, would build such a site. So for me it feels like an LLM has build it and the human with the prompt saw it and said "eh, good enough".
Agreed. This reeks LLM writing with no human oversight, or at least a human with no writing experience. The text underneath “The Click” is an immediate giveaway:
> Five milliseconds of hardware and browser bookkeeping before a single byte leaves the laptop.
I don’t even know how to describe it, but the “[…] before X” sentence style stands out to me.
Wonderful page, congratulations! navigating to the end takes time but the contents and the presentation are great
Back in the day "what happens when the user types a url in the address bar and press enter" used to be an interview question, and I remember nobody has ever mentioned the hardware and keyboard keys and interrupts. This post does! Pretty awesome detailed view of a request lifecycle.
I still like this question because of exactly what you mentioned. What the interviewee does and does not mention can give you a fair bit of insight into their priors.
Wow, input lag is a lot lower than I thought. I thought it was a polling-based flow at some 120 Hz roughly. Good to update these numbers.
200ms is insane, 50ms is the goal.
But really, great page.
Someone new could learn from it the basics of what to check when debugging web.
The US is so big, that 50 ms is physically not possible for everyone. This is something that not everybody is aware of. When I as a German build something for germans, everyone who needs to wait longer than 100 ms for a request, is rightfully mad. But when I want to serve the same stuff to americans at the same speed, I have to build something completely different and much more complex.
> When I as a German build something for germans, everyone who needs to wait longer than 100 ms for a request, is rightfully mad.
Somewhat ironic, given how many contracts here seem to come with 3 months notice periods.
The CSS animation of the encrypted message overwriting the plain is utterly cool.