Lessons that load before the bus moves
probability
Probability measures how likely an event is to happen. If you roll a fair die, there are six possible outcomes, and each one is equally likely.
- Client
- Lumen Academy
- Industry
- Education
- Location
- Remote, pan-African
- Year
- 2024
- Engagement
- Fixed scope
- Duration
- 10 weeks
- Team
- 3 frontend engineers, 1 designer
- Disciplines
- Frontend
Overview
Lumen teaches 200,000 secondary school students, most of them on mid-range Android phones and expensive mobile data. We rebuilt their web frontend from the ground up and cut load times by 80 percent.
- Largest contentful paint, from 4.8s
- 0.9s
- Data used per lesson
- −74%
- Lesson completion rate
- +31%
A lesson that takes eight seconds to open is a lesson not taken.
Lumen's single-page app shipped 2.1MB of JavaScript before showing anything. On a typical student's phone on 3G, the first lesson took eight seconds to appear. Most students gave up before it did.
probability
Probability measures how likely an event is to happen. If you roll a fair die, there are six possible outcomes, and each one is equally likely.
Lumen Academy
0.9s
Largest contentful paint, from 4.8s
Results
Measured on a mid-range Android device over 3G
Median values from real-user monitoring, four weeks before and after launch.
| Measure | Before | After |
|---|---|---|
| Largest contentful paint | 4.8s | 0.9s |
| JavaScript shipped | 2.1MB | 186KB |
| Data per lesson | 3.4MB | 0.9MB |
| Interaction to next paint | 610ms | 92ms |
Send less. Then send it sooner.
We moved to server-rendered React with Next.js, streamed lesson content and made every interactive element progressively enhanced. Lessons download for offline reading in one tap.
Every pull request now runs a performance budget. If it ships more than 200KB of JavaScript to a lesson page, it does not merge.
- Median LCP on 3G
- 0.9s
- JavaScript per page
- −91%
- Lesson completion
- +31%
- Lighthouse accessibility
- 100
Stack
Framework
- Next.js
- React Server Components
Styling
- Tailwind CSS
Offline
- Service workers
- IndexedDB
Monitoring
- SpeedCurve
- Sentry
Halden Pay
Payments infrastructure for 3,000 merchants