Making our websites
load faster
Pearl Latteier, Lunch and Learn, Sep 1 2020
WHY?
52%
Desktop vs Mobile Market Share Worldwide - July 2020
http://gs.statcounter.com/platform-market-share/desktop-mobile/worldwide/
48%
Web Self-Enrollment
Between 60% - 90+%
of users are on mobile
Source: Leah
Not all users have iPhones
Second largest market
for sub-$100 devices
is the USA
Mobile Devices, 8/24/20, #browserdevicedata
50% android
Average site load time on mobile:
19 sec
More than 50% of users leave after:
3 sec
Sites retain more users and increase conversions as speed increases
Why?
Speed helps us succeed
WHAT?
TTI < 5 sec
for a mid-range phone on 3G on first load
Goal:
Data from Lighthouse
WEBSITE | TTI |
signup.propellerhealth.com | 11s |
patient.propellerhealth.com | 8.5s |
provider-nvspocs.propellerhealth.eu | 6.5s |
Size of JavaScript
to download and parse
The median web page sends
> 350 KB JavaScript (compressed)
to users’ phones
For a TTI < 5 sec, shoot for
< 170 KB JavaScript (compressed)
Data from chrome dev tools
WEBSITE | KB of JS downloaded on first load |
signup.propellerhealth.com | 660 (~50% Segment, GA, SF etc) |
patient.propellerhealth.com | 270 |
provider-nvspocs.propellerhealth.eu | 210 (~30% Segment) |
JavaScript
execution time
Size and number of images and other assets
Cost to users:
Data
Battery
Processing time
Big and/or deeply nested
DOM tree
Size of CSS
What?
Many things can slow down TTI
HOW?
Measure, then optimize
Measure on device
webpagetest.org/easy
Lighthouse
Code Splitting
Lazy loading
Optimize Rendering
CSSOM Tree
DOM Tree
Render Tree
Layout
Paint
Critical Rendering Path
Website Performance Optimization Udacity course
https://www.udacity.com/course/website-performance-optimization--ud884
Service Worker Caching
Performance Budget
Pick the metric you care about -- TTI or something else -- and track it