![RESULTS: PAYLOAD AND MORE
21
Data exchanged on
the network (ko)
[Ranking] Total payload on the network during navigation (source: )](https://image.slidesharecdn.com/mindyouappfootprintflutterheroes2024-240226103104-83bda4f1/85/Mind-your-App-Footprint-FlutterHeroes-2024-21-320.jpg)
![23
📦 App Bundles
🌴 Tree Shaking
OPTIMIZING BUNDLES
« App size is one of the biggest factors […]. It’s
important to regularly monitor and understand
how you can reduce your app’s download and
install sizes. »
Google Play Console Documentation](https://image.slidesharecdn.com/mindyouappfootprintflutterheroes2024-240226103104-83bda4f1/85/Mind-your-App-Footprint-FlutterHeroes-2024-23-320.jpg)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
- 1. MIND YOUR APP FOOTPRINT! 🐾⚡🌱 How to Reduce your Mobile App Footprint #FlutterHeroes24
- 2. Alexandre POICHET Software Engineer Alexis CHOUPAULT Software Engineer François NOLLEN Staff Engineer Dev Rel
- 3. 🧠 YOUR 📱 👣 ! • Why • Product & design • Developer techniques • 🔎 Basics • 🔎 Bundles • 🔎 On-demand • 🔎 DIY • Testing & Monitoring • Conclusion
- 4. WHY 4 Digital technologies cause 2.5% Carbon footprint 4% GHG emissions (sources: ADEME/ARCEP 2023 + The Shift Project 2019)
- 5. 5 Source : ADEME / ARCEP (March 2023)
- 6. 6 Source : ADEME / ARCEP (March 2023)
- 7. 7 Source : ADEME / ARCEP (March 2023)
- 8. PRODUCT & DESIGN 8 Building the right thing 🌱
- 9. DOING THE RIGHT THING? 9 Finding a GOOD DEAL… • More engaged with final users • More compliant with environment ENVIRONMENT • Efficient Design • Accessibility FEATURES • Useful Features QUALITY • Good product value • Small bugs Where is the Green 🌱 part?
- 10. 10 EX. WE SPOT TURTLES! 🌊🐢🌏 #WeArePlay We Spot Turtles! | Australia (Nicolas Guillot & Caitlin McKeown)
- 11. 11 ♻ Retro-compatibility is crucial! 🐾 …yet it has a cost / footprint (tests, payloads, envs…) 👀 Monitor your app & user behaviours 🧹 Clean-up payloads when possible 🗑 Drop unused versions EX. BACKWARD COMPATIBILITY Version N-1 0,00% users Version N x,xx% users 👇
- 12. 12 ♻ Unused features 📵 Deprecated versions 🎛 Complexity 🐾 Footprint FUNCTIONAL DEBT / WASTE « Less… …is more » 🛟 Accessibility ❤ User experience 💸 Product & business value
- 13. MOBILE DEVELOPMENT Doing the thing right ♻ 13
- 14. 14 ⚡ CPU usage / FPS 🪫 Consuming hardware (camera, sensors, gps) 📡 Network (caches, offline mode) 🗜 Size (payloads, assets, storage) 💡 Most of those techniques are very well-documented BASICS ♻ 🔋 💚 🌱
- 15. 15 • Display technologies : LCD vs. AMOLED • « Dark » mode or « black » mode? DARK MODES Our app results LCD AMOLED Light theme 3,9 g CO2 3,9 g CO2 Dark blue theme 3,9 g CO2 3.0 g CO2 (-23%) TLDR; « Not everything is Black & White » 😉 (Source: )
- 16. 16 A good thread strategy on a multi-core CPU: • Saves battery 🔋 • Optimizes UX 💚 💡 Threads can be optimized to run on a separate core if available, a small or big core when it’s an heavy task. THREADS MATTER
- 17. 17 • Upgrading libs and frameworks ASAP • Leveraging new features and improvements …Including ⚡ and 🗜 ! STAYING UP-TO-DATE
- 18. EXAMPLE 👉 IMPELLER 18 Before ⏳ (Skia only) After ⚡ (Impeller) (Emmanuel Lefebvre) @ Flutter Paris, Jan’23
- 19. 19 REPAINT BOUNDARIES • Separate widgets to subtrees at rendering level, helps Flutter renderer know when repaint is needed • Can optimize screens with many interactions
- 20. MOVING LOGIC TO THE BACK-END 20 • Pattern: presentation logic moved serverside • Presentation model / mapping • Formatting, Localization • Etc. ü Consistency over multiple channels 🔐 ü Less code, fast redeploy, better TTM 🚀 ü Smaller frontend app(s) & less crashes 🌱 BFF server (Back-For-Front) Other channels (eg. chatbots) Mobile Web
- 21. RESULTS: PAYLOAD AND MORE 21 Data exchanged on the network (ko) [Ranking] Total payload on the network during navigation (source: )
- 22. EXAMPLE: TRACKING & CONSENTS 22 S2S tracking vendors BFF server (Back-For-Front) Other channels (eg. chatbots) Mobile Web • Server-to-server tracking & consents (☝GDPR) • Custom frontend instrumentation (RouteObserver, EventListener) • Most logic, data and impacts moved to the back-end Removing 90% of 3rd-party SDKs from the frontend: • Less CPU, less storage, smaller footprint ⚡🗜🌱 • Less integration issues or crashes 💣 • Better UX 🙂
- 23. 23 📦 App Bundles 🌴 Tree Shaking OPTIMIZING BUNDLES « App size is one of the biggest factors […]. It’s important to regularly monitor and understand how you can reduce your app’s download and install sizes. » Google Play Console Documentation
- 24. ANDROID APP BUNDLES 24 • Android App Bundles • Optimized bundles for different devices • In our case (average): 📉 -48% weight
- 25. OPTIMIZED BUNDLES FOR IOS 25 🗜 App Thinning 🗑 Unused Code and Resources ♻ Swift Language Features Available techniques 👉 refer to documentation
- 26. 26 TREE SHAKING 🌴 Removes unused: • Functions • Fields • Types • Type params • Type args • Metadata • Lib entries • Classes • Libs
- 27. TREE SHAKING IN PRACTICE 27 Use const at compile time (or conditional imports for Web) 1 VS. 2 Let’s Shake the Flutter Tree (Aleksander Denisov) @ Flutter Heroes ’23
- 28. 28 • ⚠ Workspace: incorrect Android or Gradle files locations and non-necessary files get included into the bundle • ⏳ Assets: not tree-shaked by default #64106 • ⏳ Conditional Imports: available only for the Web #23122
- 29. 29 DEFERRED COMPONENTS 💤 Lazy loading at runtime 📲 On-demand features 🗜 Save phone storage 🐾 Reduce memory footprint (based on Android Dynamic Features ) 💡 Lazy loading gracely replaced by eager loading on platforms, not compatible (eg. iOS)
- 30. EXAMPLE 30 💡 Defer the IDFM support in app? Public transportation for Paris only (ie. buy dematerialized metro tickets + use your phone as a ticket )
- 31. 31 (Warning: a single missing import leads to no deferred lib) 1 2 DEFERRED COMPONENTS IN PRACTICE
- 32. 32 pubspec.yaml 3 <meta-data android:name="flu1erEmbedding" android:value="2"/> <meta-data android:name="io.flu1er.embedding.engine.deferredcomponents.DeferredCom ponentManager.loadingUnitMapping" android:value="2:idfm_sdk"/> android:name="io.flu1er.embedding.android.Flu1erPlaySto reSplitApplicaKon" Flu1erPlayStoreSplitApplicaKon() or 4 5 DEFERRED COMPONENTS IN PRACTICE
- 33. 33 DEFERRED COMPONENTS IN PRACTICE
- 34. 34 ♻ Saving-energy mode? 🪫 Low battery detected? 🦕 Old device / low-end device detected? 💡 DIY: adjust your app footprint on-the-fly! CUSTOM ECO-MODE
- 35. 35 🧑💻 UI thread &📱 Platform thread: • More cache / longer TTL • Disable secondary SDKs • Avoid / Reduce precision on geolocation WHAT TO DISABLE / ADJUST ⚡ Raster thread: • Disable transition animations • Disable blend effects, opacity • Disable clips, shadows
- 36. EXAMPLE 36 🤔 Disabling things from our onboarding wizard… On a low-end device (2018): - UI/accuracy slightly degraded ü FPS: +60 fps ü CPU usage (average): 79% à 36% 👉 All about choices and balance 💚 No hardcore dev skills required
- 38. 38 Concevoir des paramètres écologiques dans les applications 🇫🇷 @ Mobilis In Mobile 2023 (Thomas Thibault) DESIGNING « ECO-FRIENDLY » USER PARAMS & OPTIONS
- 39. TESTING & MONITORING ♻ 39
- 40. RUNTIME ANALYSIS (EX. GREENSPECTOR) 85 Performance (Elapsed Time) 117.5 s Mobile Data 1.1 Mo 90 Energy 112.8 mAh 50 40 (Source: Greenspector 2022)
- 41. 41 STATIC ANALYSIS (EX. ECOCODE) « Flutter Community, We need to build Flutter/Dart Eco Rules! » https://ecocode.io
- 42. FLASHLIGHT « LIGHTHOUSE FOR MOBILE » 42 • Includes retries and iterations • Combines nicely with your e2e tests • Easy to compare runs • Video recording • Android only https://docs.flashlight.dev/
- 43. 43 INTEGRATION TESTS (WITH CHROME TRACING / PERFETTO)
- 44. GOLDEN TESTS 44 How does your App render on a small screen? ✅
- 45. CONCLUSION 45
- 46. 46 Many ways to reduce your app footprint, optimize and reduce the waste ♻ Test and monitor your app performance over time, many tools are available 🔍 Solutions we all know, others few of us know. Learn, use, share your techniques 🌱
- 47. RESOURCES WE’VE SHARED (🇫🇷 / 🇬🇧) 47 E2E Testing with Flutter Widget Testing with Flutter Accessibility Testing with Flutter Flutter @ Devoxx France Flutter Heroes 2023 Flutter Connection 2023