1. Restricted © Siemens AG 2015. All rights reserved A Developer’s Insights Into Performance Optimizations for Mobile Web Apps CT DC AA EM LP2 | June 2015

2. Page 2June 2015 Restricted © Siemens AG 2015. All rights reserved A Developer’s Insights Into Performance Optimizations for Mobile Web Apps Introduction Use Case description Tools to measure performance Optimization techniques Conclusion

3. Page 3June 2015 Restricted © Siemens AG 2015. All rights reserved Introduction  Mobile web (or Hybrid) apps – These apps directly run on mobile browser and in case of hybrid apps, the developer augments web code with Native SDK.  Can cater to different flavors of mobile operating systems like iOS, Android, Windows etc. They run on modern HTML5 complaint browsers that are gradually adhering to standards set by W3C consortium. Why Performance is important?

4. Page 4June 2015 Restricted © Siemens AG 2015. All rights reserved Source: https://blog.kissmetrics.com Why performance is important?

5. Page 5June 2015 Restricted © Siemens AG 2015. All rights reserved Why performance is important?

6. Page 6June 2015 Restricted © Siemens AG 2015. All rights reserved A Developer’s Insights Into Performance Optimizations for Mobile Web Apps Introduction Use Case description Tools to measure performance Optimization techniques Conclusion

7. Page 7June 2015 Restricted © Siemens AG 2015. All rights reserved Use case description The use case application is a Jquery Mobile application. The application has the following external plug-ins:  Jquery  Jquery Mobile Also the application has about 13 JavaScript files and 1 css file and total content download of about 1000 KB. We will measure the time taken to load the login page.

8. Page 8June 2015 Restricted © Siemens AG 2015. All rights reserved A Developer’s Insights Into Performance Optimizations for Mobile Web Apps Introduction Use Case description Tools to measure performance Optimization techniques Conclusion

9. Page 9June 2015 Restricted © Siemens AG 2015. All rights reserved Page Speed plugin Page Speed Plugin

10. Page 10June 2015 Restricted © Siemens AG 2015. All rights reserved On line tools  http://www.webpagetest.org/ http://www.webpagetest.org/

11. Page 11June 2015 Restricted © Siemens AG 2015. All rights reserved Other on line tools  https://developers.google.com/speed/pagespeed/  http://tools.pingdom.com/fpt/

12. Page 12June 2015 Restricted © Siemens AG 2015. All rights reserved Java script timing

13. Page 13June 2015 Restricted © Siemens AG 2015. All rights reserved A Developer’s Insights Into Performance Optimizations for Mobile Web Apps Introduction Use Case description Tools to measure performance Optimization techniques Conclusion

14. Page 14June 2015 Restricted © Siemens AG 2015. All rights reserved MINIFICATION Minification reduces the file size by removing all white space characters, new line characters and code comments. Essentially it improves the page load time by decreasing the download size. Minification Tools: YUI Compressor Google Closure Compiler Gulp-uglify Grunt (plugins) File Name Size(KB) (before minification) Size(KB) (after minification) Product- script.js 33.1 KB15 KB

15. Page 15June 2015 Restricted © Siemens AG 2015. All rights reserved COMPRESSION Compression helps in saving the bandwidth and improves the performance of the application. GZIP is the tool to do compression. It is well supported in all modern browsers and web servers File NameSize(KB)Latency (s) Product.js15 KB4.55 File NameSize(KB)Latency (s) Product.js3.3 KB1.7

16. Page 16June 2015 Restricted © Siemens AG 2015. All rights reserved CUSTOM BUNDLING Enables bundling and minify static resources like CSS and Java script files. It is a logical grouping of files so that all the files can be minified and loaded with one HTTP request so that multiple requests are avoided. The overall size has been reduced to 303.2 KB from 700 KB and all are getting downloaded from one HTTP request. Overall gain with custom bundling in terms of size: 50%

17. Page 17June 2015 Restricted © Siemens AG 2015. All rights reserved DEFER JAVASCRIPT LOADING What is the issue with this code?

18. Page 18June 2015 Restricted © Siemens AG 2015. All rights reserved DEFER JAVASCRIPT LOADING The way to defer JavaScript is as in the following code snippet.

19. Page 19June 2015 Restricted © Siemens AG 2015. All rights reserved DEFER JAVASCRIPT LOADING Without Java script deferring Time to load initial page with scripts (ms) With Java script deferring Time to load initial page with scripts (ms) 250150

20. Page 20June 2015 Restricted © Siemens AG 2015. All rights reserved Other Techniques Leverage Browser Caching Avoid Landing Page redirects If possible, make use of HTML5 storage instead of cookies Explore the option of using HTML5 Application cache

21. Page 21June 2015 Restricted © Siemens AG 2015. All rights reserved A Developer’s Insights Into Performance Optimizations for Mobile Web Apps Introduction Use Case description Tools to measure performance Optimization techniques Conclusion

22. Page 22June 2015 Restricted © Siemens AG 2015. All rights reserved CONCLUSION A lot of focus should be given to Automation of all the below mentioned techniques. Technique applied Parameter affected Before applying After applying Impact MinificationBandwidth33.1KB15 KB50% CompressionBandwidth33.1 KB7.1 KB75% CompressionLatency4.9s1.8s30% Custom Bundling Bandwidth700KB303KB40% Defer Java scriptLatency, Page rendering 250ms150ms40%

23. Page 23June 2015 Restricted © Siemens AG 2015. All rights reserved Contact Rajeev BV Mobile: +91-9663330307 E-mail: bv.rajeev@siemens.com bv.rajeev@siemens.com Blog: https://rajeevbv.wordpress.com/