[JSDC 2013] Optimizing your mobile web apps

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


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Optimizing Your Mobile Web AppsSource: http://slides.calvinf.com/wpo-slideshow/#slide-24Kuro Hsu @ JSDC 20132013/05/18
  • 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. BUT
  • 4. Mobile Web isSLOW… 
  • 5. Why
  • 6. Because …We are doing itWRONG!
  • 7. “ Our Biggest Mistake Was Betting Too Much On HTML5 “「 將行動應用的賭注押在HTML5 上,這是我們最大的錯誤。 」
  • 8. 鐵拳制裁。
  • 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. Phones arent laptop,mobile device has limitations.
  • 11. Both get you where you need to go,but they do it differently, andhave a different purpose.
  • 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. Network Latency
  • 14. Browser Creates Images= 0 HTTP requestshttp://dimox.net/making-pretty-feedburner-counter-with-only-css3/
  • 15. • Use only CSS for simple Images.• Use Data URIs for images..dot {background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==);}
  • 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. Ref: http://davidbcalhoun.com/2011/mobile-performance-manifesto
  • 18. EmbeddingCSS and JavaScript
  • 19. 蛤?
  • 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. m.bing.comCase Study: http://www.stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/
  • 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. Case Study: http://www.stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/
  • 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. Ref: http://jsperf.com/localstorage-string-size-retrieval
  • 26. Less is More• Reduce number of DNS lookups.• Reduce HTTP requests.• Use CSS & Data URIs for Images.• Leverage localStorage
  • 27. MemorySource: http://www.maximumpc.com/article/news/contract_prices_desktop_dram_spiking_sharply_2013
  • 28. Serve the Right Image• Dont send bigimages to smallscreens!• High memoryusage causes aslow UI
  • 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. 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. <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. Reduce Image Size - TinyPngTinyPng: http://tinypng.org/
  • 33. * Supported: Chrome, Opera., Android 4+Reduce Image Size - WebP
  • 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. 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. Reflow & RepaintSource: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
  • 37. Reflow & RepaintReflowSource: http://www.nowamagic.net/librarys/veda/detail/2168
  • 38. Reflow & RepaintRepaintSource: http://www.nowamagic.net/librarys/veda/detail/2168
  • 39. Source: http://jsperf.com/reflow-and-repaint
  • 40. Hardware AccelerationRef:http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/http://www.html5rocks.com/en/mobile/optimization-and-performance/
  • 41. requestAnimationFrameRef: http://msdn.microsoft.com/zh-tw/library/ie/hh920765%28v=vs.85%29.aspx
  • 42. BatterySource: http://gigaom.com/2011/04/27/a-battery-that-breathes-air-too-good-to-be-true/
  • 43. Ref: http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf
  • 44. TL;DRRef: http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf
  • 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. • 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. 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. 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. 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. 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. Phones arent laptop,mobile device has limitations.
  • 52. But we make itBetter!!
  • 53. Thanks ! Kuro Hsu kurotanshi @ gmail.com http://kuro.tw http://www.plurk.com/kurotanshi http://www.facebook.com/kurotanshi