[Web] Adaptive loading

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.