Making Web Feel More Responsive

This article is about the perceived performance of web apps that require the internet to function — hacking around on the client-side to make it feel more responsive than it is.

I'm not going to talk about using different protocols and such, just about my beloved frontend hacks.

Interactive Demo

Let's do something that we figured out how to do by early 2014 and test it ourselves.

Hover over the button below and then click it naturally. We'll measure the number of times that you could have loaded and rendered this very page

Isn't it wild that even Internet Explorer 10 supports this? The idea is that we just use unified CSS across the site, serve HTML from our server that we can just preload into memory and then display when needed. Unified CSS refers to frameworks like Bootstrap or Tailwind.

You can either implement it using JavaScript — like InstantClick, htmx-preload did — or pray to the browser gods that they respect rel=preload or rel=prefetch on links.

You can experience it for yourself on my retro-looking vpub.mysh.dev. Every sub-forum is preloaded upon hover and displayed when needed. This would obviously waste bandwidth, so I wouldn't recommend loading it using satellite internet.

If you don't serve HTML from your server, or you need to load additional resources alongside your data, then you are better off with type="speculationrules".

Speculation Rules API

Something that is not widely used. Out of 67089889 web servers on IPv4 space, only 563 had speculationrules embedded in their body response and 534 in their HTTP answer headers. Combined, that's 0.0016% of the web. So, don't worry if you didn't adapt it yet — the whole internet didn't.

Additionally, it is only supported by Chrome. And it is not enabled by default (as of December 2025).

Good luck.

Optimistic UI

This is essentially lying to the user until you get an error. You show the result of an action immediately, without waiting for the server to process it. If the server fails, you are now about to read way more literature about UX and how to handle those errors on the frontend and backend.

Skeleton Screens

People perceive loading as faster when they see a structure (skeleton) rather than a spinner or blank screen. It gives the feeling that "something is happening" and layout is ready.

Content Visibility

content-visibility: auto tells the browser "Don't render this element's content until it's close to the viewport". It's like lazy-loading, but for rendering.