View
218
Download
0
Category
Tags:
Preview:
Citation preview
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
A Developer’s Insights Into Performance Optimizations for Mobile Web Apps
Introduction
Use Case description
Tools to measure performance
Optimization techniques
Conclusion
Page 3 June 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?
Page 4 June 2015 Restricted © Siemens AG 2015. All rights reservedSource: https://blog.kissmetrics.com
Why performance is important?
Page 5 June 2015 Restricted © Siemens AG 2015. All rights reserved
Why performance is important?
Page 6 June 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
Page 7 June 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.
Page 8 June 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
Page 9 June 2015 Restricted © Siemens AG 2015. All rights reserved
Page Speed plugin
Page Speed Plugin
Page 10 June 2015 Restricted © Siemens AG 2015. All rights reserved
On line tools
http://www.webpagetest.org/
Page 11 June 2015 Restricted © Siemens AG 2015. All rights reserved
Other on line tools
https://developers.google.com/speed/pagespeed/http://tools.pingdom.com/fpt/
Page 12 June 2015 Restricted © Siemens AG 2015. All rights reserved
Java script timing
Page 13 June 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
Page 14 June 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 NameSize(KB)
(before minification)
Size(KB)
(after minification)
Product-script.js 33.1 KB 15 KB
Page 15 June 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 Name Size(KB) Latency (s)
Product.js 15 KB 4.55
File Name Size(KB) Latency (s)
Product.js 3.3 KB 1.7
Page 16 June 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%
Page 17 June 2015 Restricted © Siemens AG 2015. All rights reserved
DEFER JAVASCRIPT LOADING
What is the issue with this code?
Page 18 June 2015 Restricted © Siemens AG 2015. All rights reserved
DEFER JAVASCRIPT LOADING
The way to defer JavaScript is as in the following code snippet.
Page 19 June 2015 Restricted © Siemens AG 2015. All rights reserved
DEFER JAVASCRIPT LOADING
Without Java script deferringTime to load initial page with scripts (ms)
With Java script deferringTime to load initial page with scripts (ms)
250 150
Page 20 June 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
Page 21 June 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
Page 22 June 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
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%
Page 23 June 2015 Restricted © Siemens AG 2015. All rights reserved
Contact
Rajeev BV
Mobile: +91-9663330307
E-mail:bv.rajeev@siemens.com
Blog:
https://rajeevbv.wordpress.com/
Recommended