[JSDC 2013] Optimizing your mobile web apps


Published on

Published in: Technology, Design

[JSDC 2013] Optimizing your mobile web apps

  1. 1. Optimizing Your Mobile Web AppsSource: http://slides.calvinf.com/wpo-slideshow/#slide-24Kuro Hsu @ JSDC 20132013/05/18
  2. 2. Source: http://wearesocial.sg/blog/2013/04/social-brands-go-mobile-or-stand-still/Source: http://wearesocial.sg/blog/2013/04/social-brands-go-mobile-or-stand-still/
  3. 3. BUT
  4. 4. Mobile Web isSLOW… 
  5. 5. Why
  6. 6. Because …We are doing itWRONG!
  7. 7. “ Our Biggest Mistake Was Betting Too Much On HTML5 “「 將行動應用的賭注押在HTML5 上,這是我們最大的錯誤。 」
  8. 8. 鐵拳制裁。
  9. 9. Source: http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story“ So, when Mark Zuckerberg said HTML5 wasnt ready,we took a little offense to the comment.”「HTML5 絕不是 Facebook 行動 App 龜速的原因!」fastbook
  10. 10. Phones arent laptop,mobile device has limitations.
  11. 11. Both get you where you need to go,but they do it differently, andhave a different purpose.
  12. 12. “80-90% of the end-user responsetime is spent on the frontend.”- Steve Souders: the Performance Golden RuleSource: http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
  13. 13. Network Latency
  14. 14. Browser Creates Images= 0 HTTP requestshttp://dimox.net/making-pretty-feedburner-counter-with-only-css3/
  15. 15. • Use only CSS for simple Images.• Use Data URIs for images..dot {background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==);}
  16. 16. <script id="lazy">/* ........ (JavaScript of lazy module) */</script><script>function lazyLoad() {var lazyElement = document.getElementById(lazy);var lazyElementBody = lazyElement.innerHTML;var jsCode = stripOutCommentBlock(lazyElementBody);eval(jsCode);}</script><div onclick="lazyLoad()"> Lazy Load </div>Reducing Startup LatencyRef: http://davidbcalhoun.com/2011/mobile-performance-manifesto
  17. 17. Ref: http://davidbcalhoun.com/2011/mobile-performance-manifesto
  18. 18. EmbeddingCSS and JavaScript
  19. 19. 蛤?
  20. 20. * Only on the first page view.EmbeddingCSS and JavaScriptCase Study: http://www.stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/
  21. 21. m.bing.comCase Study: http://www.stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/
  22. 22. <style data-rms="done" id="CUX.Site.FD66E1A3"rel="stylesheet" type="text/css">......</style><script data-rms="done" id="JUX.Home.FDsd6EG1A3"type="text/javascript">......</script>First RequestCase Study: http://www.stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/
  23. 23. Case Study: http://www.stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/
  24. 24. <script type="text/javascript">RMS.Load("CUX.Site.FD66E1A3")</script>Second Request<script type="text/javascript">RMS.Load("JUX.Home.FDsd6EG1A3")</script>Case Study: http://www.stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/
  25. 25. Ref: http://jsperf.com/localstorage-string-size-retrieval
  26. 26. Less is More• Reduce number of DNS lookups.• Reduce HTTP requests.• Use CSS & Data URIs for Images.• Leverage localStorage
  27. 27. MemorySource: http://www.maximumpc.com/article/news/contract_prices_desktop_dram_spiking_sharply_2013
  28. 28. Serve the Right Image• Dont send bigimages to smallscreens!• High memoryusage causes aslow UI
  29. 29. Serve the Right ImageUsage:http://src.sencha.io/320/480/http://original.jpgRef: http://www.sencha.com/learn/how-to-use-src-sencha-io/
  30. 30. The srcset attribute<img alt="responsive image"src="small.jpg"srcset="large.jpg 1600w,large.jpg 800w 1.95x,medium.jpg 800w,medium.jpg 400w 1.95x">[W3C] The srcset attribute: http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
  31. 31. <picture> Element<picture alt="responsive image"><source src="large.jpg"media="(min-width:1600px),(min-resolution: 136dpi) and (min-width:800px)" ><source src="medium.jpg"media="(min-width:800px),(min-resolution: 136dpi) and (min-width:400px)" ><source src="small.jpg"><!-- fallback --><img src="small.jpg" alt="responsive image"></picture>[W3C] The picture element: http://picture.responsiveimages.org
  32. 32. Reduce Image Size - TinyPngTinyPng: http://tinypng.org/
  33. 33. * Supported: Chrome, Opera., Android 4+Reduce Image Size - WebP
  34. 34. CSS Masking+ <12.3 KB 2.73 KB 71.7 KB.circle-mask {background-image:url(images/view.jpg);-webkit-mask: url(mask.png);}Ref: http://css-tricks.com/webkit-image-wipes/
  35. 35. CSS3 is Good. But some UI Featuresmay ruin your web app.• Enlarged Fonts• Box Shadow (inset)• Text Indent• Gradients• Sprites (of large images)• Recalculating / Repainting the UI
  36. 36. Reflow & RepaintSource: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
  37. 37. Reflow & RepaintReflowSource: http://www.nowamagic.net/librarys/veda/detail/2168
  38. 38. Reflow & RepaintRepaintSource: http://www.nowamagic.net/librarys/veda/detail/2168
  39. 39. Source: http://jsperf.com/reflow-and-repaint
  40. 40. Hardware AccelerationRef:http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/http://www.html5rocks.com/en/mobile/optimization-and-performance/
  41. 41. requestAnimationFrameRef: http://msdn.microsoft.com/zh-tw/library/ie/hh920765%28v=vs.85%29.aspx
  42. 42. BatterySource: http://gigaom.com/2011/04/27/a-battery-that-breathes-air-too-good-to-be-true/
  43. 43. Ref: http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf
  44. 44. TL;DRRef: http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf
  45. 45. • Use JPEGs > PNGs & GIFs• Use background images, instead offoreground images.• Rendering energy is proportional to size ofimages.Ref: http://software.intel.com/zh-cn/articles/html5
  46. 46. • Minimize the DOM• Use DARKER COLORs if you can• Avoid reflows and repaints• All scripts loaded and parsed(even if not used)• Minimize JavaScript to whats needed.CPU Drains the battery.
  47. 47. Source: http://static.lukew.com/TouchGestureGuide.pdfTouch Event• Touch event:300 ~ 500msdelay• Instead of click,use touch event.onClick Delay: https://developers.google.com/mobile/articles/fast_buttons?#touchevents
  48. 48. ViewportIf <meta> is set to disable zoom,in Chrome and Firefox there is no delay on onClick events.<meta name="viewport"content="width=device-width, user-scalable=no">Ref: http://www.html5rocks.com/en/mobile/touchandmouse/
  49. 49. Resource: YSLOW• Make fewer HTTP requests• Avoid empty src or href• Compress components withgzip• Put CSS at top• Put JavaScript at bottom• Avoid CSS expressions• Reduce DNS lookups• Minify JavaScript and CSS• Avoid URL redirects• Remove duplicate JavaScriptand CSS• Reduce the number of DOMelements• Avoid HTTP 404 (Not Found)error• Avoid AlphaImageLoader filter• Do not scale images in HTML• Make favicon small andcacheableRef: http://developer.yahoo.com/yslow/
  50. 50. Resource: Page Speed• Leverage browser caching• Enable compression• Defer parsing of JavaScript• Minimize request size• Specify a cache validator• Optimize images• Minify JavaScript• Minify HTML• Specify image dimensions• Specify a character set• Specify a Vary: Accept-Encodingheader• Reduce request serialization• Eliminate unnecessary reflows• Avoid long-running scripts• Avoid CSS @import• Avoid bad requests• Enable Keep-Alive• Make landing page redirects cacheable• Minify CSS• Minimize redirects• Optimize the order of styles and scripts• Put CSS in the document head• Remove query strings from staticresources• Serve resources from a consistent URL• Serve scaled imagesRef: https://developers.google.com/speed/pagespeed/?hl=zh-TW
  51. 51. Phones arent laptop,mobile device has limitations.
  52. 52. But we make itBetter!!
  53. 53. Thanks ! Kuro Hsu kurotanshi @ gmail.com http://kuro.tw http://www.plurk.com/kurotanshi http://www.facebook.com/kurotanshi