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

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

Page 2 June 2015 Restricted © Siemens AG 2015. All rights reserved


Introduction

Use Case description

Tools to measure performance

Optimization techniques

Conclusion


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?

Page 4 June 2015 Restricted © Siemens AG 2015. All rights reservedSource: https://blog.kissmetrics.com

Why performance is important?


Why performance is important?



Introduction




Conclusion


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.



Introduction




Conclusion


Page Speed plugin

Page Speed Plugin


On line tools

http://www.webpagetest.org/




Other on line tools

https://developers.google.com/speed/pagespeed/http://tools.pingdom.com/fpt/


Java script timing



Introduction




Conclusion


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 NameSize(KB)

(before minification)

Size(KB)

(after minification)

Product-script.js 33.1 KB 15 KB


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 Name Size(KB) Latency (s)

Product.js 15 KB 4.55

File Name Size(KB) Latency (s)

Product.js 3.3 KB 1.7


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%


DEFER JAVASCRIPT LOADING

What is the issue with this code?



The way to defer JavaScript is as in the following code snippet.



Without Java script deferringTime to load initial page with scripts (ms)

With Java script deferringTime to load initial page with scripts (ms)

250 150


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



Introduction




Conclusion


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

Minification Bandwidth 33.1KB 15 KB 50%

Compression Bandwidth 33.1 KB 7.1 KB 75%

Compression Latency 4.9s 1.8s 30%

Custom Bundling

Bandwidth 700KB 303KB 40%

Defer Java script Latency, Page rendering

250ms 150ms 40%


Contact

Rajeev BV

Mobile: +91-9663330307

E-mail:[email protected]

Blog:

https://rajeevbv.wordpress.com/

mailto:[email protected]





Documents

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