Your SlideShare is downloading. ×
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
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

High Performance Mobile (SF/SV Web Perf)

32,782

Published on

Published in: Technology, Design
0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
32,782
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
196
Comments
0
Likes
25
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
  • Fred Wilson is Managing Partner of two venture capital firms, Flatiron Partners (Yoyodyne, Geocities) and Union Square Ventures (Twitter, delicious,Etsy, Feedburner).SpeedInstant utilitySoftware is mediaLess is moreMake it programmableMake it personalRESTfulDiscoverabilityCleanPlayful
  • “if we’re able to achieve a similar performance boost across ourothertoplanding pages, we’ll drive in excess of 60 million yearly Firefox downloads.”
  • This was a ~5 second speed up.
  • Time measurements from real users.
  • http://www.nytimes.com/2011/04/18/technology/18mobile.html
  • Generallyasync & defer scripts start downloading immediately. I wish they’d wait, esp. defer scripts, so they don’t hog connections from the limited pool.
  • GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.htmlSproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval
  • Transcript

    • 1. High Performance Mobile
      stevesouders.com/docs/sfsv-webperf-20110830.pptx
      Disclaimer: This content does not necessarily reflect the opinions of my employer.
    • 2. Cuzillion
      SpriteMe
      YSlow
      Hammerhead
      flickr.com/photos/bekahstargazing/318930460/
    • 3.
    • 4.
    • 5. 1. WPO
    • 6. 2004
    • 7. carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/
      #1. Speed: “First and foremost, we believe that speed is more than a feature. Speed is the most important feature.”
    • 8. en.oreilly.com/velocity2009/public/schedule/detail/8523
    • 9. en.oreilly.com/velocity2009/public/schedule/detail/8523
    • 10. Yahoo!
      0.4 sec slower
      traffic  5-9%
      slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications
      slideshare.net/stoyan/yslow-20-presentation
    • 11. blog.mozilla.com/metrics/category/website-optimization/
      …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
    • 12. en.oreilly.com/velocity2009/public/schedule/detail/7709
      blog.mozilla.com/metrics/category/website-optimization/
      …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
    • 13. en.oreilly.com/velocity2008/public/schedule/detail/3632
    • 14. slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377
    • 15. Site speed in search rank
      Screen shot of blog post
      …we've decided to take site speed into account in our search rankings.
      googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
    • 16. Web
      Performance
      Optimization
      WPO
      drives traffic
      improves UX
      increases revenue
      reduces costs
      flickr.com/photos/pedromourapinheiro/3123885534/
    • 17. 2. Why Mobile?
    • 18.
    • 19. slideshare.net/CMSummit/ms-internet-trends060710final
    • 20. slideshare.net/CMSummit/ms-internet-trends060710final
    • 21. nytimes.com/2011/04/18/technology/18mobile.html
    • 22. slideshare.net/CMSummit/ms-internet-trends060710final
    • 23.
    • 24.
    • 25.
    • 26.
    • 27.
    • 28.
    • 29. the road isn’t clear
      flickr.com/photos/davidandheidi/2320489837/
    • 30. 3. Mobile Best Practices
    • 31. [just a reminder]
    • 32. 3. Mobile Best Practices
    • 33. 1. Make fewer HTTP requests
      2. Use a CDN
      3. Add an Expires header
      4. Gzipcomponents
      5. Put stylesheets at the top
      6. Put scripts at the bottom
      7. Avoid CSS expressions
      8. Make JS and CSS external
      9. Reduce DNS lookups
      10. Minify JS
      11. Avoid redirects
      12. Remove duplicate scripts
      13. Configure ETags
      14. Make AJAX cacheable
      14 Rules
    • 34. 1. Make fewer HTTP requests
      2. Use a CDN
      3. Add an Expires header
      4. Gzipcomponents
      5. Put stylesheets at the top
      6. Put scripts at the bottom
      7. Avoid CSS expressions
      8. Make JS and CSS external
      9. Reduce DNS lookups
      10. Minify JS
      11. Avoid redirects
      12. Remove duplicate scripts
      13. Configure ETags
      14. Make AJAX cacheable
      14 Rules
    • 35. 1. Make fewer HTTP requests
      2. Use a CDN
      3. Add an Expires header
      4. Gzipcomponents
      5. Put stylesheets at the top
      6. Put scripts at the bottom
      7. Avoid CSS expressions
      8. Make JS and CSS external
      9. Reduce DNS lookups
      10. Minify JS
      11. Avoid redirects
      12. Remove duplicate scripts
      13. Configure ETags
      14. Make AJAX cacheable
      14 Rules
    • 36. Splitting the initial payload
      Loading scripts without blocking
      Coupling asynchronous scripts
      Positioning inline scripts
      Sharding dominant domains
      Flushing the document early
      Using iframes sparingly
      Simplifying CSS Selectors
      Understanding Ajax performance Doug Crockford
      Creating responsive web apps Ben Galbraith, Dion Almaer
      Writing efficient JavaScript Nicholas Zakas
      Scaling with Comet Dylan Schiemann
      Going beyond gzipping Tony Gentilcore
      Optimizing images StoyanStefanov, Nicole Sullivan
    • 37. Splitting the initial payload
      Loading scripts without blocking
      Coupling asynchronous scripts
      Positioning inline scripts
      Sharding dominant domains
      Flushing the document early
      Using iframes sparingly
      Simplifying CSS Selectors
      Understanding Ajax performance Doug Crockford
      Creating responsive web apps Ben Galbraith, Dion Almaer
      Writing efficient JavaScript Nicholas Zakas
      Scaling with Comet Dylan Schiemann
      Going beyond gzipping Tony Gentilcore
      Optimizing images StoyanStefanov, Nicole Sullivan
    • 38. Splitting the initial payload
      Loading scripts without blocking
      Coupling asynchronous scripts
      Positioning inline scripts
      Sharding dominant domains
      Flushing the document early
      Using iframes sparingly
      Simplifying CSS Selectors
      Understanding Ajax performance Doug Crockford
      Creating responsive web appsBen Galbraith, Dion Almaer
      Writing efficient JavaScript Nicholas Zakas
      Scaling with Comet Dylan Schiemann
      Going beyond gzipping Tony Gentilcore
      Optimizing images StoyanStefanov, Nicole Sullivan
    • 39. reduce HTTP requests
      sprites
      data: URIs
      CSS3:
      border-radius
      box-shadow
      linear-gradient
      transform: rotate, scale, skew, translate
      Canvas, SVG
      flickr.com/photos/mrd00dman/2358726807/
    • 40. responsive images
      resize images based on screen size
      example: Sencha.ioSrc
      UA classification: DeviceAtlas
      domain sharding: src[1-4].sencha.io
      also: http://adaptive-images.com/
      http://github.com/filamentgroup/Responsive-Images
      <imgsrc=‘http://src.sencha.io/http://mydomain.com/logo.gif’>
      flickr.com/photos/johnkay/3539939004/
    • 41. script async & defer
      parsing doesn’t wait for script:
      • async– executed when available
      • 42. defer – executed when parsing finished
      when is it downloaded?
      missing:
      • defer download AND execution
      • 43. async/defer download, execute on demand
      flickr.com/photos/gevertulley/4771808965/
    • 44. GMail Mobile
      <script type="text/javascript">
      /*
      var ...
      */
      </script>
      get script DOM element's text
      remove comments
      eval() when invoked
      awesome for prefetching JS that might (not) be needed
      http://goo.gl/l5ZLQ
    • 45. ControlJSa JavaScript module for making scripts load faster
      just change HTML
      inline & external scripts
      <script type="text/cjs"
      data-cjssrc="main.js">
      </script>
      <script type="text/cjs">
      var name = getName();
      </script>
    • 46. ControlJSa JavaScript module for making scripts load faster
      download without executing
      <script type="text/cjs"
      data-cjssrc="main.js”
      data-cjsexec=false>
      <script>
      Later if/when needed:
      CJS.execScript(src);
    • 47. app cache
      flickr.com/photos/india-nepal-iran/203982474/
    • 48. yuiblog.com/blog/2007/01/04/performance-research-part-2/
    • 49. blaze.io/mobile/understanding-mobile-cache-sizes/
    • 50. app cache
      offline apps, longer cache
      <!doctype html>
      <html manifest=“myapp.appcache”>
      myapp.appcache:
      CACHE MANIFEST
      # Revision: 1.28
      CACHE:
      /images/logo.gif
      NETWORK:
      /login.html
      FALLBACK:
      /index.html /offline.html
      Content-Type: text/cache-manifest
      flickr.com/photos/india-nepal-iran/203982474/
    • 51. app cache gotchas
      html docs w/ manifest are cached
      404 => nothing is cached
      size: 5MB+
      must rev manifest to update resources
      update is served on 2nd reload (?!?!)
      flickr.com/photos/97657657@N00/1918688483/
    • 52. app cache
      reload
      1
      2
      push app
      logo.gif =
      user loads app
      app cache is empty
      fetch manifest
      fetch logo.gif
      app cache =
      user sees
      3
      4
      5
      push app
      logo.gif =
      rev manifest
      user loads app
      app cache =
      user sees
      fetch manifest
      fetch logo.gif
      app cache =
      user loads app again
      app cache =
      user sees
      fetch manifest (304)
    • 53. load twice workaround
      window.applicationCache.addEventListener('updateready',
      function(e) {  if ( window.applicationCache.status==
      window.applicationCache.UPDATEREADY) {
      if ( confirm(“Load new content?”) ) {
      ...
      http://www.webdirections.org/blog/get-offline/
      http://www.html5rocks.com/en/tutorials/appcache/beginner/
      flickr.com/photos/presley_m/5152304885/
    • 54. localStorage
      window.localStorage:
      setItem()
      getItem()
      removeItem()
      clear()
      also sessionStorage
      all popular browsers, 5MB max
      http://dev.w3.org/html5/webstorage/
      http://diveintohtml5.org/storage.html
      flickr.com/photos/bryanpearson/564703455/
    • 55. localStorage as cache
      1st doc: write JS & CSS blocks to localStorage
      JUX.UXBaseControls.252CB7BF: (function(){...
      JUX.FrameworkCore.A39F6425: (function(){...
      set cookie with entries & version
      RMSM=JUX.UXBaseControls.252CB7BF~ JUX.FrameworkCore.A39F6425~
      later docs: read JS & CSS from localStorage
      script.text = localStorage.getItem(JUX.UXBaseControls.252CB7BF)
      http://stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/
      flickr.com/photos/nelsoncruz/431244400/
    • 56. there’s more
      audio & video tags
      WebSockets
      onTouchEnd instead of onClick
      History
      <a ping
      requestAnimationFrame– not timers
      native JSON parse/stringify
      flickr.com/photos/dualphoto/2609096047/
    • 57. Thanks to…
      Max Firtman
      Tony Gentilcore
      Josh Fraser
      Kyle Scholz
      StoyanStefanov
      Lindsey Simon
      Annie Sullivan
      Tim Kadlec
      Paul Irish
      Brad Neuberg
      flickr.com/photos/robertvega/3944132320/
    • 58. 4. Mobile Tools
    • 59.
    • 60.
    • 61.
    • 62. http://pmuellr.github.com/weinre/
    • 63. speed matters - WPO
      mobile winners will be fast
      mobile performance – reduce reqs, resize images, async JS, app cache, localStorage
      mobile tools – pcapperf, Jdrop, Blaze.io, Weinre
      takeaways
      flickr.com/photos/myklroventine/4062102754/
    • 64.
    • 65.
    • 66.
    • 67. Top 100: bytes downloaded
      desktop
      mobile
    • 68. Top 100: size & requests
      desktop
      mobile
    • 69. the open web
      flickr.com/photos/donnr/3696038262/
    • 70. Steve Souders
      @souders
      http://stevesouders.com/docs/sfsv-webperf-20110830.pptx

    ×