Web Directions South - Even Faster Web Sites

  • 6,788 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • The            setup            in            the            video            no            longer            works.           
    And            all            other            links            in            comment            are            fake            too.           
    But            luckily,            we            found            a            working            one            here (copy paste link in browser) :            www.goo.gl/i7K0s4
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,788
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
87
Comments
1
Likes
15

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.webpagetest.org/video/view.php?id=100630_734a5096ca2b97a217b756b277520c0a68e911d5.slow
  • http://www.webpagetest.org/video/view.php?id=100608_ecbc76305fba361cafb31c0abd27d46617e65c24
  • http://www.webpagetest.org/video/view.php?id=100608_ab0ebdaa528ad2c480ff16fb4e59e50a52bdd71f
  • http://www.webpagetest.org/video/compare.php?tests=100607_SN,100607_SM,100607_SK,100607_SJ,100607_S6http://www.google.com/search?q=flowershttp://search.yahoo.com/search?p=flowershttp://www.bing.com/search?q=flowershttp://www.ask.com/web?q=flowershttp://search.aol.com/aol/search?q=flowersIE7, Dulles VA, DSL
  • http://www.webpagetest.org/video/compare.php?tests=100608_e6e0257fd833ca1eb5669cd42e49570c%2C100608_7b873ad39b553f0dec08b2ec9fb14db0%2C100608_be6ad18d17fdcbd0ad4d5e5430db4815%2C100608_b8b544a8cf71bf02171a2bf473b56a03&thumbSize=150&ival=1000
  • http://www.webpagetest.org/video/compare.php?tests=100608_1F9%2C100608_1FA%2C100608_1FB%2C100608_1FC%2C100608_1FD&thumbSize=150&ival=1000
  • http://www.webpagetest.org/video/compare.php?tests=100608_1GG%2C100608_1GF%2C100608_1GD%2C100608_1GC%2C100608_1GB&thumbSize=150&ival=2000
  • Data source: Steve Souders, updated April 2010
  • All of these allow for parallel downloads, but none of them allow for parallel JS execution – that's not possible (currently, WebKit is doing some stuff on that).
  • 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
  • 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
  • http://www.webpagetest.org/result/100708_13X0/1/details/
  • http://www.browserscope.org/?category=network&v=1&ua=Android%202,Blackberry%206,Blackberry%208330,Blackberry%209700,Chrome%206,Firefox%203,IE%208,IE%20Mobile%208,iPad%204,iPhone%204,Nokia%2097,Opera%20Mini%204,Opera%20Mobile%2010,Palm%20Pre%201,Safari%204

Transcript

  • 1. Even Faster Web Sites
    stevesouders.com/docs/wdx-20101014.pptx
    Disclaimer: This content does not necessarily reflect the
    opinions of my employer.
    flickr.com/photos/ddfic/722634166/
  • 2. how exciting is web dev?
    flickr.com/photos/joshme17/1557627176/
  • 3. darn exciting!
    flickr.com/photos/dougbrown47/4468708942//
  • 4. flickr.com/photos/halans/5079721630/
  • 5. darn exciting!
    flickr.com/photos/dougbrown47/4468708942//
  • 6. flickr.com/photos/bekahstargazing/318930460/
  • 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. 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
  • 15.
  • 16. Both
    combine scripts
    combine stylesheets
    add an Expires header
    gzip responses
    put stylesheets at the top
    put scripts at the bottom
    avoid CSS expressions
    make JS and CSS external
    reduce DNS lookups
    minify JS and CSS
    avoid redirects
    remove duplicate scripts
    make Ajax cacheable
    reduce cookie size
    use cookie-free domains
    don't scale images
    YSlow
    use CSS sprites
    use a CDN
    configure ETags
    use GET for Ajax requests
    reduce # of DOM elements
    no 404s
    avoid image filters
    optimize favicon
    Page Speed
    defer loading JS
    remove unused CSS
    use efficient CSS selectors
    optimize images
    optimize order of CSS & JS
    shard domains
    leverage proxy caching
  • 17.
  • 18.
  • 19. Web
    Performance
    Optimization
    WPO
    drives traffic
    improves UX
    increases revenue
    reduces costs
    flickr.com/photos/pedromourapinheiro/3123885534/
  • 20. What makes sites feel slow?
    flickr.com/photos/kevincollins/234678305/
  • 21. (lack of)
    Progressive Rendering
    [next page being loaded]
    flickr.com/photos/kevincollins/234678305/
  • 22.
  • 23.
  • 24.
  • 25. Search
  • 26. Sports
  • 27. News
  • 28. Shopping
  • 29. Progressive Enhancement
    deliver HTML
    defer JS
    avoid DOM
    decorate later
  • 30. Progressive Enhancement

    Progressive Rendering
  • 31. <script src="A.js"> blocks parallel downloads and rendering
    9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3
    7 secs: IE 8-9, FF 3.6, Chr6, Saf 4
    Why focus on JavaScript?
  • 32. 29% avg
    229 K avg
    initial payload and execution
  • 33. split the initial payload
    split your JavaScript between what's needed to render the page and everything else
    defer "everything else"
    split manually (Page Speed), automatically (Microsoft Doloto)
    load scripts without blocking
    http://www.flickr.com/photos/devcentre/108032900/
  • 34. Loading Scripts Without Blocking
    XHR Eval
    XHR Injection
    Script in Iframe
    Script DOM Element
    Script Defer
    document.write Script Tag
  • 35. XHR Eval
    varxhrObj = getXHRObject();
    xhrObj.onreadystatechange =
    function() {
    if ( xhrObj.readyState != 4 ) return;
    eval(xhrObj.responseText);
    };
    xhrObj.open('GET', 'A.js', true);
    xhrObj.send('');
    script & page must be same domain
  • 36. Script DOM Element
    var se = document.createElement('script');
    se.src = 'http://anydomain.com/A.js';
    document.getElementsByTagName('head')
    [0].appendChild(se);
    script & page domains can differ
    may not preserve execution order
  • 37. MeeboIframed JS
    var iframe = document.createElement('iframe');
    document.body.appendChild(iframe);
    var doc = iframe.contentWindow.document;
    doc.open().write('<body onload="insertJS()">');
    doc.close();
    loads asynchronously
    delays parent’s load event: FF, Chr, Saf
    great for 3rd party scripts
    better for sandboxing & security
    avoids iframe src roundtrip
  • 38. GMail Mobile
    <script type="text/javascript">
    /*
    var ...
    */
    </script>
    get script DOM element's text
    remove comments
    eval() when invoked
    inline or iframe
    awesome for prefetching JS that might (not) be needed
  • 39.
  • 40. window.setTimeout(
    function(){
    vara=document.createElement("script");
    a.src="/extern_js/f/CgJlbhz8US8_w.js";
    (document.getElementById("xjsd")||
    document.body).appendChild(a);},
    0);
    Google Search
  • 41. Bootloader.setResourceMap(
    {"CDYbm":
    {"name":"js/32kskxvl4c8w0848.pkg.js",
    "type":"js",
    "src":"http://.../1fakc64i.js"},...});
    var c=a ? document.body : document.getElementsByTagName('head')[0];
    vard=document.createElement('script');
    d.type='text/javascript';
    d.src=f;
    c.appendChild(d);
    Facebook
  • 42. YUI.presentation.lazyScriptList =
    ["http://l.yimg.com/a/combo?arc/yui/substitute_0.1.9.js&arc/yui/oop_0.1.10.js&[...58 more!...]"];
    d = w.document;
    h = d.getElementsByTagName("head")[0];
    n = d.createElement("script"),
    n.src = url;
    h.appendChild(n);
    Yahoo! FP
  • 43. <head>
    ...
    <script src="http://s.ytimg.com/yt/jsbin/www-core-vfl1I8mph.jsA"></script>
    ...
    </head>
    YouTube
  • 44. <body>
    <div>
    <table>
    [~40%]
    <script src="http://z-ecx.images-amazon.com/images/G/01/browser-scripts/us-site-wide-1.2.6/site-wide-4183309070.js._V198471533_.js"></script>
    Amazon
  • 45. <script src="/js/jquery-1.4.2.js"></script>
    </body>
    </html>
    subsequent page:
    <script src="/js/jquery-1.4.2.js"></script>
    <script src="/js/toChecklist.js"></script>
    <script src="/js/tocs.js"></script>
    </body>
    </html>
    Craigslist
    prefetching?
  • 46. <body>
    <script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311309442_1_en_US.js"></script>
    <script src="http://include.ebaystatic.com/v4js/en_US/e673/GH-RA_ReskinEbay_e67311309442_1_en_US.js"></script>
    ...
    <script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311252543_opta_en_US.js">
    <script src="http://include.ebaystatic.com/v4js/en_US/e673/CCHP_HomepageV4_SLDR_e67311252543_6_en_US.js"></script>
    </body>
    eBay
  • 47. $LAB
    .wait(function() {
    $LAB
    .script("http://a1.twimg.com/a/1286563368/javascripts/phoenix.bundle.js")
    .wait(function() {
    ...
    });
    $LAB
    .script("http://a1.twimg.com/a/1286563368/javascripts/api.bundle.js")
    .wait(function() {
    ...
    });
    });
    (new)Twitter
    http://labjs.com/
  • 48. vara=_d.createElement("script");
    a.type="text/javascript";
    a.src=b;
    _d.getElementsByTagName("head")[0].appendChild(a);
    Bing
    onload
  • 49. <script src="http://bits.wikimedia.org/skins-1.5/common/wikibits.js?281c" type="text/javascript"></script>
    <script src="http://bits.wikimedia.org/skins-1.5/common/jquery.min.js?281c" type="text/javascript"></script>
    <script src="http://bits.wikimedia.org/skins-1.5/common/ajax.js?281c" type="text/javascript"></script>
    <script src="http://bits.wikimedia.org/skins-1.5/common/mwsuggest.js?281c" type="text/javascript"></script>
    <script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/js/plugins.combined.min.js?281c" type="text/javascript"></script>
    <script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/Vector/Vector.combined.min.js?281c" type="text/javascript"></script>
    <script src="http://upload.wikimedia.org/centralnotice/wikipedia/en/centralnotice.js?281c" type="text/javascript"></script>
    <script src="/w/index.php?title=-&amp;action=raw&amp;gen=js&amp;useskin=vector&amp;281c" type="text/javascript"></script>
    </head>
    Wikipedia
  • 50. frontend SPOF
    8.2secs
    http://en.wikipedia.org/wiki/Flowers (from NZ)
  • 51.
  • 52. Ray Morgan
    Zappos.com
    MakindeAdeagbo
    Facebook
    Jenn Lukas
    Happy Cog
    flickr.com/photos/waltzaround/4041024134/
  • 53. new stuff
  • 54. mobile waterfalls (!)
  • 55.
  • 56. mobile waterfalls (!)
  • 57. carrier transcoding
    wifi
    OPTUS
    ?!
  • 58. http://2.2.2.2/irscripts/imgreload.js
    function FN_ImageReload(){
    var FN_IR_TIMEOUT=2000;
    var FN_IR_SUFFIX="_hyuncompressed";
    var FN_IR_ALT="please wait 2 seconds for an uncompressed image, or press Ctrl+F5 for original quality page";
    varFN_IR_register=function() {
    ...
    vardocAll=document.getElementsByTagName("*");
    for(i=0;i<docAll.length;i++) {
    varcurrEl=docAll[i];
    }
  • 59. WebP image format
    googlecode.blogspot.com/2010/09/webp-new-image-format-for-web.html
    39% size reduction
    based on VP8 codec
    loss of quality?
    http://englishhard.com/2010/10/01/real-world-analysis-of-googles-webp-versus-jpg/
  • 60. W3C Web Timing Spec
    window.[webkit|moz|ms]Performance
    test.w3.org/webperf/specs/NavigationTiming/
  • 61. speed matters
    focus on the frontend
    run Page Speed and YSlow
    progressive enhancement  progressive rendering
    be excited!
    takeaways
    flickr.com/photos/34771728@N00/361526991/
  • 62. Steve Souders
    @souders, souders@google.com
    stevesouders.com/docs/wdx-20101014.pptx
    flickr.com/photos/nj_dodge/187190601/