Article · 15 min read

Adaptive serving based on network quality

Google Chrome team · web.dev (Google) Free Advanced

Instead of shipping the same heavy page to everyone, you can detect the connection and serve lighter images or defer non essential loads on slow links. This guide shows how using the effective connection type signal, with code. It is the practical route to one product that behaves well on both a fast and a 2G phone.

  • Detect slow-2g, 2g, 3g, or 4g and adapt what you send
  • Serve low resolution media and defer big downloads on weak links
  • React when the connection changes rather than deciding once at load
Open on web.dev ↗

The question it answers

  1. How do I design for users in India who are on cheap Android phones and slow, patchy internet?

Read with it

  1. This is Google's own field research on building for people coming online in markets like India, and it names the exact... Google Design Article · ~12 min read Connectivity, Culture, and Credit: Designing for the Next Billion Users Google Design (Next Billion Users team)
  2. You cannot fix what you never feel, and most of us build on fast laptops and office wifi. This is the official doc for... Chrome for Developers Tool · Reference doc, ~10 min to try Throttling (Network and CPU) in Chrome DevTools Chrome DevTools team, Google
  3. Video · About 40 minutes Challenges and learnings of building for the next billion users (Google I/O '18) Google (Next Billion Users team: Nithya Sambasivan, Josh Woodward and colleagues)
  4. Images are the single biggest reason landing pages crawl on a slow 4G connection, and Squoosh fixes that in your browser with... Google Chrome Labs Tool · A few minutes per image Squoosh Google Chrome Labs
  5. Flipkart serves exactly your users, many on 2G in smaller Indian cities, and this case study shows a fast mobile web app... web.dev (Google) Article Flipkart triples time-on-site with a Progressive Web App web.dev (Google)
  6. A first hand engineering account of why Flipkart, an app first Indian company, rebuilt the mobile web to reach users on weak... Medium (Progressive Web Apps) Article Building Flipkart Lite: A Progressive Web App Aditya Punjani
eChai Partner Brands The partnership →