@media - Even Faster Web Sites
Upcoming SlideShare
Loading in...5
×
 

@media - Even Faster Web Sites

on

  • 13,138 views

 

Statistics

Views

Total Views
13,138
Views on SlideShare
4,793
Embed Views
8,345

Actions

Likes
12
Downloads
79
Comments
0

24 Embeds 8,345

http://www.labnol.org 7707
http://www.webdirections.org 273
http://www.techpeoplesonline.tk 166
http://www.netvibes.com 77
http://godagari.com 24
http://seo-chief.com 23
http://translate.googleusercontent.com 16
http://static.slideshare.net 12
http://techpeoplesonline.blogspot.com 8
url_unknown 7
http://feeds.labnol.org 6
http://www.slideshare.net 5
http://shadowposts.blogspot.in 4
http://shadowposts.blogspot.com 3
http://techpeoplesonline.blogspot.in 2
http://shadowposts.blogspot.ca 2
http://lanyrd.com 2
http://webtweets.blogspot.com 2
http://www.google.com 1
http://www.forum.chotoan.com 1
http://webcache.googleusercontent.com 1
http://shadowposts.blogspot.co.uk 1
http://www.google.de 1
http://rss2.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.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
  • http://www.webpagetest.org/video/view.php?id=100607_5f1b00006d82a016a64b37502ebb0d0ebc73df00
  • http://www.webpagetest.org/video/view.php?id=100608_9111958456564ddc3b2e49fbfda200112dee9fd2
  • http://www.webpagetest.org/video/view.php?id=100608_ab0ebdaa528ad2c480ff16fb4e59e50a52bdd71f
  • http://www.webpagetest.org/video/view.php?id=100608_ecbc76305fba361cafb31c0abd27d46617e65c24
  • 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

@media - Even Faster Web Sites @media - Even Faster Web Sites Presentation Transcript

  • Even Faster Web Sites
    stevesouders.com/docs/atmedia-20100611.pptx
    Disclaimer: This content does not necessarily reflect the opinions of my employer.
    flickr.com/photos/ddfic/722634166/
  • flickr.com/photos/bekahstargazing/318930460/
  • the importance of frontend performance
    9%
    91%
    17%
    83%
    iGoogle, primed cache
    iGoogle, empty cache
    http://www.flickr.com/photos/minami/2458184654/
  • Make fewer HTTP requests
    Use a CDN
    Add an Expires header
    Gzip components
    Put stylesheets at the top
    Put scripts at the bottom
    Avoid CSS expressions
    Make JS and CSS external
    Reduce DNS lookups
    Minify JS
    Avoid redirects
    Remove duplicate scripts
    Configure ETags
    Make AJAX cacheable
    14 Rules
  • Even Faster Web Sites
    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...................Stoyan Stefanov, Nicole Sullivan
    flickr.com/photos/motionblur/3049984012/
  • 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.”
  • en.oreilly.com/velocity2009/public/schedule/detail/8523
  • en.oreilly.com/velocity2009/public/schedule/detail/8523
  • 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
  • blog.mozilla.com/metrics/category/website-optimization/
    …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
  • 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%!
  • en.oreilly.com/velocity2008/public/schedule/detail/3632
  • 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
  • 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
  • Web
    Performance
    Optimization
    WPO
    drives traffic
    improves UX
    increases revenue
    reduces costs
    flickr.com/photos/pedromourapinheiro/3123885534/
  • What makes sites feel slow?
    http://www.flickr.com/photos/kevincollins/234678305/
  • (lack of)
    Progressive Rendering
    [next page being loaded]
    http://www.flickr.com/photos/kevincollins/234678305/
  • Search
  • Sports
  • News
  • Shopping
  • Progressive Enhancement
    deliver HTML
    defer JS
    avoid DOM
    decorate later
  • Progressive Enhancement

    Progressive Rendering
  • <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, FF 3.5, Chr3, Saf 4
    Why focus on JavaScript?
  • 29% avg
    229 K avg
    initial payload and execution
  • 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/
  • Loading Scripts Without Blocking
    XHR Eval
    XHR Injection
    Script in Iframe
    Script DOM Element
    Script Defer
    document.write Script Tag
  • 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
    massage script?
  • 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
    no need to massage JavaScript
    may not preserve execution order
  • 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
  • window.setTimeout(
    function(){
    var a=document.createElement("script");
    a.src="/extern_js/f/CgJlbhz8US8_w.js";
    (document.getElementById("xjsd")||
    document.body).appendChild(a);},
    0);
    Google Search
  • Bootloader.setResourceMap(
    {"CDYbm":
    {"name":"js/32kskxvl4c8w0848.pkg.js",
    "type":"js",
    "src":"http://.../1fakc64i.js"},...});
    var c=a ? document.body : document.getElementsByTagName('head')[0];
    var d=document.createElement('script');
    d.type='text/javascript';
    d.src=f;
    c.appendChild(d);
    Facebook
  • 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
  • <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
  • <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
  • <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>
    eBay
  • <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
    <script src="http://a3.twimg.com/a/1276018586/javascripts/twitter.js?1276019402" type="text/javascript"></script>
    <script src="http://a1.twimg.com/a/1276018586/javascripts/lib/jquery.tipsy.min.js?1276019402" type="text/javascript"></script>
    <script src='http://maps.google.com/maps/api/js?sensor=false' type="text/javascript"></script>
    <script src="http://a1.twimg.com/a/1276018586/javascripts/lib/gears_init.js?1276019402" type="text/javascript"></script>
    <script src="http://a3.twimg.com/a/1276018586/javascripts/geov1.js?1276019402" type="text/javascript"></script>
    <script src="http://a1.twimg.com/a/1276018586/javascripts/api.js?1276019402" type="text/javascript"></script>
    <script src="http://a2.twimg.com/a/1276018586/javascripts/lib/mustache.js?1276019402" type="text/javascript"></script>
    <script src="http://a3.twimg.com/a/1276018586/javascripts/dismissable.js?1276019402" type="text/javascript"></script>
    <script src="http://a1.twimg.com/a/1276018586/javascripts/api.js?1276019402" type="text/javascript"></script>
    <script src="http://a0.twimg.com/a/1276018586/javascripts/controls.js?1276019402" type="text/javascript"></script>
    <script src="http://a1.twimg.com/a/1276018586/javascripts/hover_cards.js?1276019402" type="text/javascript"></script>
    </body>
    </html>
    Twitter
  • var a=_d.createElement("script");
    a.type="text/javascript";
    a.src=b;
    _d.getElementsByTagName("head")[0].appendChild(a);
    Bing
    onload
  • Ray Morgan
    Zappos.com
    MakindeAdeagbo
    Facebook
    Jenn Lukas
    Happy Cog
    http://www.flickr.com/photos/waltzaround/4041024134/
  • speed matters
    focus on the frontend
    run Page Speed and YSlow
    progressive enhancement  progressive rendering
    takeaways
    http://www.flickr.com/photos/34771728@N00/361526991/
  • Steve Souders
    @souders, souders@google.com
    stevesouders.com/docs/atmedia-20100611.pptx
    flickr.com/photos/nj_dodge/187190601/