The document discusses building apps for developing countries in Africa and outlines some of the key challenges, including unreliable electricity, low digital literacy, expensive data costs, and low-end smartphones. It then provides tips for improving app performance, such as reducing bundle size by minifying code, code splitting, and tree shaking. Other tips include using server-side rendering for initial load and service workers. The document emphasizes the importance of performance optimization and provides examples of how companies significantly improved metrics like load times, bounce rates, and conversion rates by optimizing aspects like images and JSON response sizes.

1. BY: RIDHWANA KHAN
BUILDING APPS FOR
AFRICAN SOIL
RIDHWANA_K

2. DEV
RIDHWANA_K

3. SOUTH AFRICA
RIDHWANA_K

4. KASI MATHS
RIDHWANA_K

5. WHY SHOULD YOU CARE ?
RIDHWANA_K
TO ARE DEVELOPING COUNTRIES

6. OUTLINE OF CHALLENGES

7. 1. POWER/ELECTRICITY
LOADSHEDDING AND
POWER OUTAGES

8. 2. BASIC DIGITAL LITERACY
Public schools and facilities by
province, 2016
Province
With
laboratory
With
computer facility
Gauteng 33,3% 80,3%
KwaZulu-Natal 11,4% 33,3%
Western Cape 33,2% 59,3%
South Africa 18,3% 41,4%
Adapted from Source: Department of Basic Education

9. 3. DATA COSTS
SOUTH AFRICA
$10.00 PER GB

10. 3. LOW END SMARTPHONES

11. 4. BANDWIDTH SPEED
GLOBAL 4G AVAILABILITY VS SPEED

12. PERFORMANCE

14. WHAT’S NEXT?
REDUCING THE
BUNDLE SIZE
SERVER/STATIC
RENDERING
01
02
03
04
SERVICE WORKERS
OTHER TIPS

15. REDUCE THE BUNDLE SIZE
01

16. REDUCE THE BUNDLE SIZE (CONTEXT)

17. REDUCE THE BUNDLE SIZE (CONTEXT)

18. “According to Google's DoubleClick:
When comparing sites that load in 5 seconds to sites that
load in 19 seconds,
the faster sites had 70% longer average session lengths,
35% lower bounce rates and 25% higher ad viewability than
their slower counterparts.”
REDUCE THE BUNDLE SIZE (CONTEXT)

19. A. Minifying & Concatenating your JS
B. Code Splitting
C. Tree Shaking
REDUCE THE BUNDLE SIZE (SOLUTIONS)

20. REDUCE THE BUNDLE SIZE (ANALYZE)

21. SERVER OR STATIC RENDERING
02

22. SERVER/STATIC RENDERING (CONTEXT)
What if we wanted the best of both worlds
- a quick initial load and also snappy
successive interactions ?

23. > 1 s 1s < time < 5 s < 5 s
SERVER/STATIC RENDERING (CONTEXT)

24. SERVER/STATIC RENDERING (SOLUTIONS)

25. SERVER/STATIC RENDERING (ANALYZE)

26. SERVICE WORKERS
03

27. SERVICE WORKERS (CONTEXT)

28. SERVICE WORKERS(SOLUTIONS)

29. SERVICE WORKERS(SOLUTIONS)

30. SERVICE WORKERS (ANALYZE)

31. OTHER PERFORMANCE TIPS
04

32. “A company called Furnspace reduced their image payload
by 86% resulting in a reduction in load time of 65%.
This improved user experience helped double Furnspace’s
eCommerce purchase conversion ratio, cut bounce rates by
20%, increase mobile revenue by 7% and dramatically
improve SEO”
Optimizing images
OTHER PERFORMANCE TIPS

33. “Instagram increased impressions and user profile scroll
interactions by decreasing the response size of the JSON
needed for displaying comments”
Optimizing the JSON
OTHER PERFORMANCE TIPS

34. Adaptive Loading
“It uses signals to determine the Network, CPU core count
and Memory”
OTHER PERFORMANCE TIPS

35. PERFORMANCE BUDGETS

38. A. Command Line Warnings & Errors
B. Integrate it with a CI
C. Real User Monitoring
DEVELOPMENT PROCESS

39. CONCLUSION

40. “Rebuilding Pinterest pages for
performance resulted in a 40% decrease
in wait time, a 15% increase
in SEO traffic and a 15% increase in
conversion rate to signup.”

41. THANKS
RIDHWANA_K