A few years ago a coalition we were working with launched what they called their "flagship" microsite — a 4-megabyte WordPress build with a hero video, a stock-photo slider, and a petition form buried three scrolls down. On urban 4G it looked slick. On the phone of a coalition organiser in a rural district, over a shared 2G connection, it took forty-three seconds to render anything at all. Their biggest advocates couldn't see the site their campaign was built around.

This is not a rare story. It's the default story. The web has spent fifteen years optimising for the fastest connection in the room, and the people we build for aren't in that room. So we made a rule at MakeItPop: every site we ship has to load — meaningfully load, not just start downloading — on a simulated 2G connection in under three seconds.

What "load on 2G" actually means in practice

The rule sounds simple until you try to keep it. Here's what we've learned from a dozen builds:

  • The first meaningful paint should be text. Text is 4 kilobytes per screen. Hero images are 400. Ship the headline first, decorate second.
  • No third-party fonts on the critical path. System fonts render instantly and look fine. If you must use a brand font, subset it aggressively and load it async.
  • No JavaScript for content. Content lives in HTML. Interactivity is optional enhancement. A form that requires JS to submit is a form that excludes half your audience.
  • Images: WebP, sized correctly, lazy below the fold. Never ship a 2000×1500 photo scaled down in CSS. That's serving 400 KB to render 40.
  • One CSS file, one JS file. Every extra request is a two-second penalty on 2G. Combine what you can, defer what you can't.

The 87 KB campaign site

The climate campaign we replaced weighed 4 megabytes. Our build shipped at 87 kilobytes total — that's the HTML, CSS, fonts, and the images above the fold, combined. On the same test phone in the same rural district, it rendered in 2.1 seconds.

"It loaded on my mother's phone in the village. That had never happened before."

That's a coalition coordinator, talking about a website. It should not be a rare thing to hear.

The uncomfortable trade-off

The lightweight web means saying no to a lot of things designers and marketers like. You lose the pop-up video hero. You lose the parallax scroll. You lose the auto-playing testimonial carousel. You get a site that looks a little plainer on a MacBook — and a site that actually loads for the person your campaign is meant to reach.

If the campaign is for the person on the MacBook, keep the parallax. If the campaign is for someone else, decide who.

Rule of thumb: if you can't screenshot the first meaningful paint from a rural test device within three seconds of tapping the link, you haven't shipped a website for that audience. You've shipped one for yourself.

The good news is that lightweight sites don't just work better in the last mile. They work better everywhere. Ours score 100 on Lighthouse mobile performance, rank faster in search, cost less to host, and outlast the vendor. That's a lot of upside for saying no to the pop-up video.