Mobile performance project

[mwpark2014]

Summary

https://waterthetrees.com/ works fairly performantly on modern devices. How does it fare with low-end devices? We care particularly about tree planting organizations that might be using this web app on low-end mobile devices out in the field.

Let's audit the current performance by adding telemetry and performing an analysis on the current performance of the app. Then, we can prioritize investigations into possible resolutions.

Audit current performance

There are a number of metrics we can try to generate. I recommend Google Core Web Vitals as a good overall metric of user- perceived performance.

• Local Google Lighthouse results - attached to the comments
• Collect Core Web Vitals performance metrics #440
• Store Core Web Vitals performance metrics wtt_server#125
• Package size analysis #441
• [Performance] Finer analysis into specific bottlenecks #445

Improve performance for low-end mobile devices

• [Performance] Default flat map on slower devices instead of globe #443
• [Performance] Move stuff out of critical rendering path #442
• Investigate whether we cache mapbox vector tiles within the browser correctly. Potential resource: https://docs.mapbox.com/api/maps/vector-tiles/#vector-tiles-api-restrictions-and-limits
• [Performance] Photo optimization #444
• [Performance] Delay load Tree Details Sidebar component #479
• Investigate whether we're using CDNs and if we do, whether we can tune any CDN configs
• Clean up JS by moving away from styled components - this is still in debate
• More investigation into other solutions

Note: Likely to get performance improvements once clustering (ongoing project) is implemented.

[mwpark2014]

Google Lighthouse audit for windows 10 laptop w/ i7 7th gen, integrated graphics, 8gb ram:

Google Lighthouse audit for same laptop and with Moto G4 mobile emulator w/ throttled 4G connection:

@zoobot if you're interested

[zoobot]

Arggggg 26% is very bad, 59% is bad too.
Performance needs fixing.

What can potentially be done to help:

• Double check lazy loading
• Can menu load first, Is header font slowing it down a ton? Custom header font is larges first load
• Default flat map on slower devices instead of globe
• Instead of loading all vector layers with globe load, on zoomed out level, load city names with tree counts
• Minify js
• Moving to WebP worth it? This is huge: https://waterthetrees.com/0bcdd304fd12eaeb32cf.jpg

More ideas?

[zoobot]

We should also bring accessibility up to 100%.

Geolocate and plant buttons need type="button"

Remove this [user-scalable="no"]

[mwpark2014]

Arggggg 26% is very bad, 59% is bad too.
Performance needs fixing.

We need to keep in mind that these tests were conducted on a relatively low power machine. It'll be a much better picture to gather metrics from real users and prioritize accordingly. I would be very curious as to the characteristics of the population of user devices that are used in planting tree projects. I imagine they would be older low-powered devices with spotty data connections due to being outdoors. The tasks within Audit current performance will be very important to gain the missing information we need on how good/bad performance really is!

Once we get better telemetry, that will empower a better analysis on what the bottlenecks of our app are. I have a strong hunch that mapbox itself is the biggest obstacle we'll have to tackle, since that's vast majority of our JS and it requires hardware acceleration to even run (does a bunch of 3d projections).

Great suggestions though. I'll add them to the project list. Anyone can work on them as they please or drive the project as a whole!