High Performance Mobile (SF/SV Web Perf)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

High Performance Mobile (SF/SV Web Perf)

on

  • 33,411 views

 

Statistics

Views

Total Views
33,411
Views on SlideShare
33,185
Embed Views
226

Actions

Likes
24
Downloads
193
Comments
0

19 Embeds 226

http://ws20.ciwebgroup.com 63
http://www.st-albertus.sch.id 27
http://dekhloo.blogspot.com 22
http://blog.websourcing.fr 22
http://st-albertus.sch.id 22
http://localhost 12
http://twitter.com 12
http://us-w1.rockmelt.com 9
http://dekhloo.blogspot.in 9
http://trunk.ly 8
http://www.metinvest.com 4
https://twitter.com 4
http://apps.myams.org 3
http://www.netvibes.com 3
http://www.foundersus.com 2
http://www.techgig.com 1
http://stalbert.w06.winhost.com 1
http://newsrivr.com 1
http://www.verious.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

High Performance Mobile (SF/SV Web Perf) Presentation 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