A Billion Phones and Even More People Optimizing the web for the next billion

Keerthana Krishnan ● Baker Hughes, a GE CompanyBaker Hughes, a GE Company ● Full Stack Web Developer ● Based in Cochin, India

Why do we need performance? Fast applications = Happy users

Where do users come from? China - 1400M India - 1300M - (45%p) - 627M users USA - 325M - (84%p) - 275M users

Data last collected in 2016 87 80 75 24 22 Source: World Bank

Why do we need this? ▶ Market saturation of technical products in the first world ▶ Larger number of users getting access to the internet ▶ Basically, access to larger number of people who use your services

Finding the right balance Performance <-> Accessibility <-> User Experience

Story #1 Internationalization The easiest barrier

Case #1 – Uber ▶ Imagine a user in India/ Ghana/ Kenya/ Nigeria for Uber who is NOT a native English speaker ▶ Enabling native languages improves access to users from diverse regions

Improving internationalization ▶ Use HTML lang code <html lang=”en-US”> … </html> ▶ Use universal icons/ images/ sounds (non-written/ language agnostic communications) https://assets.kpmg/content/dam/kpmg/in/pdf/2018/05/IndiaTrends2018-Trends-shaping-Digital-India-Internet.pdf

Story #2 - Handling real world devices Going beyond the iPhone

A family of mobile devices grandpa mom dad

Hardware is created UNEQUAL ▶ Can your website handle the sizes and shapes? ▶ Cracked screens, cramped spaces – places where your CSS quick fixes come to die

Mobiles with less than 2GB RAM vs. your website built with the latest & coolest JS frameworks = LOADING.GIF (for a long time)

Story #3 – Oh no, the Wi-fi! Handling a narrow bandwidth

WiFi in India - A closer look ▶ Wifi definition - 10 Mbps to 300 Mbps ▶ Actual average connection speed 3.465 Mbps Source : https://www.webworldwide.io/country/india

How does your website perform in 3G, 2G, H+, … If loading > 2s, user interest plummets

Test your website on CRAPPy phones with SLOW speeds!! Have a fall back for bad specs

How can I simplify my website? ▶ Min. number of downloads on first click ▶ Pre-loading parts of the websites ▶ Optimizing video usage ▶ Use svg(s) - get Drasnered today!

Bonus point for UX! Adding a little extra for your users

Create a demo mode! ▶ Have a help setting that explains the major moving parts ▶ Use Arrows, icons and more to help users navigate your product

In summary … ▶ Internationalization of your website ▶ Optimize for non standard aspect ratios ▶ Fall backs for slow internet

Q&A Yes, 5 mins more to breaktime!

@keerthanak17

Thank you! That’s all I have today ☺