There is pretty good talk about performacne https://www.youtube.com/watch?v=puUPpVrIRkc
It targets the low end device or poor network connection.
- Serve low-quality images & videos
- Condionaly load heavier JS on fast devices
- Avoid computationally heavy operations
- Turn off or throttle animations
- Block 3rd-party scripts on slower devices
Navigator.connection
To get connection type:
navigator.connection.effectiveType // "4g" "3g" ..
Enable save data mode or not:
navigator.connection.saveData
In data save mode, you can load low resolution image, replace video content with image content.
Navigator.deviceMemory
navigator.deviceMemory // 8..
Differnet bundle
For high end device and low end device, you can prepare two different bundle.
For low end, you can load lite bundle;
For high end, you can load Full bundle.
Different data fetching size
For low end device, instead of loading 25 rows of data for a table, you can load only 5 result.