Your SlideShare is downloading. ×
[JSDC 2013] Optimizing your mobile web apps
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

[JSDC 2013] Optimizing your mobile web apps


Published on

Published in: Technology, Design

  • 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: Hsu @ JSDC 20132013/05/18
  • 2. Source:
  • 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:“ 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:
  • 13. Network Latency
  • 14. Browser Creates Images= 0 HTTP requests
  • 15. • Use only CSS for simple Images.• Use Data URIs for {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:
  • 17. Ref:
  • 18. EmbeddingCSS and JavaScript
  • 19. 蛤?
  • 20. * Only on the first page view.EmbeddingCSS and JavaScriptCase Study:
  • 21. Study:
  • 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:
  • 23. Case Study:
  • 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:
  • 25. Ref:
  • 26. Less is More• Reduce number of DNS lookups.• Reduce HTTP requests.• Use CSS & Data URIs for Images.• Leverage localStorage
  • 27. MemorySource:
  • 28. Serve the Right Image• Dont send bigimages to smallscreens!• High memoryusage causes aslow UI
  • 29. Serve the Right ImageUsage:
  • 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:
  • 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:
  • 32. Reduce Image Size - TinyPngTinyPng:
  • 33. * Supported: Chrome, Opera., Android 4+Reduce Image Size - WebP
  • 34. CSS Masking+ <12.3 KB 2.73 KB 71.7 {background-image:url(images/view.jpg);-webkit-mask: url(mask.png);}Ref:
  • 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:
  • 37. Reflow & RepaintReflowSource:
  • 38. Reflow & RepaintRepaintSource:
  • 39. Source:
  • 40. Hardware AccelerationRef:
  • 41. requestAnimationFrameRef:
  • 42. BatterySource:
  • 43. Ref:
  • 44. TL;DRRef:
  • 45. • Use JPEGs > PNGs & GIFs• Use background images, instead offoreground images.• Rendering energy is proportional to size ofimages.Ref:
  • 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: Event• Touch event:300 ~ 500msdelay• Instead of click,use touch event.onClick Delay:
  • 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:
  • 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:
  • 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:
  • 51. Phones arent laptop,mobile device has limitations.
  • 52. But we make itBetter!!
  • 53. Thanks ! Kuro Hsu kurotanshi @