Article · 12 min read

Adaptive Serving using JavaScript and the Network Information API

Addy Osmani · AddyOsmani.com Free Advanced

A focused, code first companion on reading the user's connection (and even their data saver preference) and adjusting what you load. Osmani keeps it concrete: swap a video for an image, skip a preload, respect someone who has asked to save data. Handy when you want the exact API and a working pattern rather than the concept.

  • Respect the user's explicit data saver preference when it is set
  • Downgrade heavy media gracefully instead of blocking the page
  • Adaptive loading keeps one codebase working across network conditions
Open on addyosmani.com ↗

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 →