Building Highly Optimized Mobile Web Apps

  • 5,739 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,739
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
47
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Building Highly Optimized Mobile Web Apps Glan Thomas Future Insights Live 2012Thursday, May 3, 12
  • 2. About me ... Why I am interested in this stuffThursday, May 3, 12
  • 3. Thursday, May 3, 12
  • 4. Thursday, May 3, 12
  • 5. What is a Mobile Web App?Thursday, May 3, 12
  • 6. Browser basedThursday, May 3, 12
  • 7. WebviewThursday, May 3, 12
  • 8. What’s it like going from the desktop to mobile web?Thursday, May 3, 12
  • 9. Why am interested in this © Universal PicturesThursday, May 3, 12
  • 10. What are we trying to optimize?Thursday, May 3, 12
  • 11. Guest Experience http://www.flickr.com/photos/stuckincustoms/518435043/Thursday, May 3, 12
  • 12. The 5 Great Mobile Development ChallengesThursday, May 3, 12
  • 13. ➊ Limited CPU and memory resourcesThursday, May 3, 12
  • 14. ➋ Variety of Display DensitiesThursday, May 3, 12
  • 15. ➌ High Network Latency http://www.qsl.net/ylradio/archives/YLstor/images/radioroom.jpgThursday, May 3, 12
  • 16. ➍ Harder to Debug http://www.flickr.com/photos/youraccount/3939769126/Thursday, May 3, 12
  • 17. ➎ Matching Users’ Expectations © DreamWorks Pictures / 20th Century FoxThursday, May 3, 12
  • 18. What if we don’t do anything? ✘ Long load times ✘ Partial content appearing ✘ Unresponsive UI ✘ Jittery animationsThursday, May 3, 12
  • 19. But It gets worse... • Unnecessary data usage • Decreased battery lifehttp://www.flickr.com/photos/flydime/4670141424/Thursday, May 3, 12
  • 20. “Q, your app sucks. I used it for 30 minutes and it drained my battery so low that I missed my appointment with Dr Crusher!” © CBS Paramount Television / Paramount PicturesThursday, May 3, 12
  • 21. ๏ MANY + LARGE HTTP REQUESTS = MORE DATA = MORE POWER USAGE = HIGH BATTERY DRAIN ๏ UNNECESSARY ANIMATIONS = HIGH USE OF CPU AND MEMORY = MORE POWER USAGE = HIGH BATTERY DRAINThursday, May 3, 12
  • 22. PRIME DIRECTIVE "Be green and respect the battery" © CBS Paramount Television / Paramount PicturesThursday, May 3, 12
  • 23. WWW 2012 – Session: Mobile Web Performance April 16–20, 2012, Lyon, France Who Killed My Battery: Analyzing Mobile Browser Energy Consumption Narendran Thiagarajan† Gaurav Aggarwal† Angela Nicoara* naren@cs.stanford.edu agaurav@cs.stanford.edu angela.nicoara@telekom.com Dan Boneh† Jatinder Pal Singh‡ dabo@cs.stanford.edu jatinder@stanford.edu † Department of Computer Science, Stanford University, CA * Deutsche Telekom R&D Laboratories USA, Los Altos, CA ‡ Department of Electrical Engineering, Stanford University, CA ABSTRACT sites are poorly optimized for energy use and rendering them in the Despite the growing popularity of mobile web browsing, the energy browser takes more power than necessary. Partly this is due to a consumed by a phone browser while surfing the web is poorly un- weak understanding of the browser’s energy use. derstood. We present an infrastructure for measuring the precise In this paper we set out to analyze the energy consumption of energy used by a mobile browser to render web pages. We then the Android browser at popular web sites such as Facebook, Ama- measure the energy needed to render financial, e-commerce, email, zon, and many others. Our experimental setup includes a multi- blogging, news and social networking sites. Our tools are suffi- meter hooked up to the phone battery that measures the phone’s ciently precise to measure the energy needed to render individual energy consumption as the phone loads and renders web pages. We web elements, such as cascade style sheets (CSS), Javascript, im- patched the default Android browser to help us measure the precise ages, and plug-in objects. Our results show that for popular sites, energy used from the moment the browser begins navigating to the downloading and parsing cascade style sheets and Javascript con- desired web site until the page is fully rendered. The patch also lets sumes a significant fraction of the total energy needed to render the us measure the exact energy needed to render a page excluding the page. Using the data we collected we make concrete recommen- energy consumed by the radio. Our setup is described in detail in dations on how to design web pages so as to minimize the energy Section 2. In that section we also describe the energy model for the needed to render the page. As an example, by modifying scripts on phone’s radio which is similar to models presented in [18, 10]. the Wikipedia mobile site we reduced by 30% the energy needed to Using our experimental setup we measured the energy needed download and render Wikipedia pages with no change to the user to render popular web sites as well as the energy needed to render experience. We conclude by estimating the point at which offload- individual web elements such as images, Javascript, and Cascade ing browser computations to a remote proxy can save energy on the Style Sheets (CSS). We find that complex Javascript and CSS can phone. be as expensive to render as images. Moreover, dynamic JavascriptThursday, May 3, 12 requests (in the form of ) can greatly increase
  • 24. Where to start? Perceived Lag / Power Drain OptimizationsThursday, May 3, 12
  • 25. Crunch Points Loading User Interaction Network Parsing Execution Rendering Animation EventsThursday, May 3, 12
  • 26. Tip Don’t take the network for grantedThursday, May 3, 12
  • 27. Network • High latency. • Bandwidth costs money (for all parties). • Might not be there. • It will definitely drain the battery. http://www.flickr.com/photos/robert-dolan/3864148280/Thursday, May 3, 12
  • 28. How do you solve a problem like the network? Do everything Steve Souders tells you to.Thursday, May 3, 12
  • 29. • Enable Gzip. • Reduce number of requests. • Reduce size of responses. • Expires Headers / Etags • Use a CDN. • Deliver device specific content. • Don’t use the network unless we absolutely positively need to.Thursday, May 3, 12
  • 30. Images • Use sprites to reduce requests. • Use optimization tools (ImageOptim, ImageAlpha). • Device specific images. • Base64 inline (pros & cons). • Use CSS masks for alpha. • JPEGs use less power.Thursday, May 3, 12
  • 31. Original PNG JPEG 3bit PNG Mask 33Kb 19Kb 4.7Kb --- 23.7Kb ~ 29% saving ---Thursday, May 3, 12
  • 32. Tip If you really must make the user wait, show something.Thursday, May 3, 12
  • 33. Ideal App Usage Cycle • Load App (HTML & CSS) • Render • Load Source (JS) • Parse • Execute • Parallel Operations • User Events • Deferred Loads (data and images)Thursday, May 3, 12
  • 34. It is not all bad newsThursday, May 3, 12
  • 35. Tip Use HTML5 and other goodiesThursday, May 3, 12
  • 36. HTML5 • LocalStorage • AppCache • Network / Connection API • Battery API • Things we don’t need libraries for: • JSON, QuerySelector, ClassListsThursday, May 3, 12
  • 37. JavaScript Libraries • Modular • Lightweight • Maintained • UnderstandableThursday, May 3, 12
  • 38. Tip Dont animate anything that you cant reliably offload to the GPUThursday, May 3, 12
  • 39. The GPU • translate3d, scale3d, rotate3d • Beware of the 1024px texture size limit • Interaction between the CPU and GPU • Don’t load too much on to it (~10Mb total storage)Thursday, May 3, 12
  • 40. Keeping things on the GPU • Reduce repaints and reflows • Avoid box shadows (or use them carefully) • Avoid opacity/transparency fades. • Avoid garbage collection during animationsThursday, May 3, 12
  • 41. Tip Keep the DOM simple and use event listeners carefullyThursday, May 3, 12
  • 42. Putting things togetherThursday, May 3, 12
  • 43. Build process • Build process • Testing and debugging http://floridakeysgirl.com/wp-content/uploads/2010/10/IMG_1147-e1288555102991.jpgThursday, May 3, 12
  • 44. Debugging and Testing • Desktop Webkit • Simulator / Emulators • weinre - WEb INspector REmote • Charles proxy • Mobile Perf Bookmarklet (YSlow, DOM Monster) • PhantomJS, Selenium • Real devices, with real OSsThursday, May 3, 12
  • 45. Recap • Prime Directive: Respect the battery. • #1 Don’t rely too much on the network. • #2 Show something while loading. • #3 Use HTML5 extensions. • #4 Use hardware acceleration. • #5 Keep the DOM simple. Use event listeners carefully and appropriately.Thursday, May 3, 12
  • 46. Target ExcellenceThursday, May 3, 12
  • 47. Thanks for all the fish Glan Thomas @glan Future Insights Live 2012 Las Vegas, NVThursday, May 3, 12
  • 48. Useful Links • Steve Souders http://stevesouders.com • Estelle Weyl @estellevw • Joe Hewitt http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit • Jake Archibald @jaffathecake • Thomas Fuchs http://mir.aculo.us/ • Who Killed My Battery http://www2012.wwwconference.org/proceedings/proceedings/p41.pdfThursday, May 3, 12
  • 49. Disney is hiringThursday, May 3, 12