◀ Knowledge hub

01, Edge, compute & hosting

Building front ends for low bandwidth

codeAmani Labs Engineering
Cinematic still for Building front ends for low bandwidth

Build for the phone on a slow connection, and the fast case takes care of itself

A lot of the world reaches the web on a mid range Android phone over a network that is intermittent and metered by the megabyte. If the product is usable there, it is delightful everywhere else. If it is only tested on a fast laptop on office wifi, it quietly excludes the people you most wanted to reach.

Ship less in the first place

The cheapest byte is the one you never send. Render on the server so the first paint does not wait for a large script bundle to download and execute. Send static HTML where the page is static. Defer the code for interactive pieces until they are actually needed. A page that is readable before any JavaScript runs is a page that works on a train, in a lift, and on a tight data budget.

Right size every image

An image sized for a desktop banner and then shrunk by the browser still cost the user the full download. Serve a width that matches the slot on the device, in a modern format, and let a CDN do the work per request.

<img
  src="/cdn?url=hero.png&w=800"
  srcset="/cdn?url=hero.png&w=320 320w,
          /cdn?url=hero.png&w=640 640w,
          /cdn?url=hero.png&w=1024 1024w"
  sizes="(min-width: 1024px) 470px, 92vw"
  loading="lazy"
  decoding="async"
  alt="" />

The phone fetches the small candidate, the desktop fetches the large one, and neither downloads bytes it will not show.

Degrade honestly

Detect the reduced data preference and serve a flatter, lighter experience to people who asked for one. Drop heavy background effects, skip autoplaying media, and keep the content. A lite path is not a worse product, it is the same product that respects the user's constraints.

The measure that counts

Test on a throttled connection and a real low end device, not just on the machine you built it on. The numbers that matter are how long until the content is readable and how many kilobytes it cost to get there. Optimize those two, and reach stops being a slogan and becomes a property of the build.

Qualified conversation

Have a build to de-risk? Let's talk.

Tell us what you are building. We respond within two business days.