• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web20expo 20080425

Web20expo 20080425



Steve Souders, "Еще более быстрые веб-сайты"

Steve Souders, "Еще более быстрые веб-сайты"



Total Views
Views on SlideShare
Embed Views



6 Embeds 228

http://webcrunch.ru 106
http://www.profyclub.org 105
http://www.i-knowledge.ru 13
http://developers.rambler.ru 2
http://developmant.alpacom.ru 1
http://bizspark.webcrunch.ru 1



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Photo courtesy of Amnemona: http://www.flickr.com/photos/marinacvinhal/379111290/

Web20expo 20080425 Web20expo 20080425 Presentation Transcript

  • Steve Souders [email_address] http://stevesouders.com/ Even Faster Web Sites best practices for faster pages Disclaimer: This content does not necessarily reflect the opinions of my employer.
  • The Importance of Frontend Performance 17% 83% iGoogle, primed cache 9% 91% iGoogle, empty cache
  • Time Spent on the Frontend Empty Cache Primed Cache www.aol.com 97% 97% www.ebay.com 95% 81% www.facebook.com 95% 81% www.google.com/search 47% 0% search.live.com/results 67% 0% www.msn.com 98% 94% www.myspace.com 98% 98% en.wikipedia.org/wiki 94% 91% www.yahoo.com 97% 96% www.youtube.com 98% 97%
  • The Performance Golden Rule 80-90% of the end-user response time is spent on the frontend. Start there. greater potential for improvement simpler proven to work
  • 14 Rules
    • 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
  • High Performance Web Sites YSlow
    • http://conferences.oreilly.com/velocity/ 20% discount: vel08st
  • Even Faster Web Sites
    • Split the initial payload
    • Load scripts without blocking
    • Don't scatter scripts
    • Split dominant content domains
    • Make static content cookie-free
    • Reduce cookie weight
    • Minify CSS
    • Optimize images
    • Use iframes sparingly
    • To www or not to www
  • Why focus on JavaScript? AOL eBay Facebook MySpace Wikipedia Yahoo! YouTube
  • Scripts Block <script src=&quot;A.js&quot;> blocks parallel downloads and rendering What's &quot;Cuzillion&quot;? http://stevesouders.com/cuzillion/?ex=10008
  • Cuzillion 'cuz there are a zillion pages to check a tool for quickly constructing web pages to see how components interact Open Source http://stevesouders.com/cuzillion/
  • Split the Initial Payload: Facebook 43 external scripts, 550K uncompressed 9% of functionality is used before onload
  • Unexecuted Payload 73.6% avg functions not used before onload www.aol.com 70% www.ebay.com 56% www.facebook.com 91% www.google.com/search 55% search.live.com/results 76% www.msn.com 69% www.myspace.com 82% en.wikipedia.org/wiki 68% www.yahoo.com 87% www.youtube.com 82%
  • Split the initial payload split your JavaScript between what's needed to render the page and everything else load &quot;everything else&quot; after the page is rendered separate manually (Firebug); tools needed to automate this (Doloto from Microsoft) load scripts without blocking – how?
  • MSN.com: Parallel Scripts Scripts and other resources downloaded in parallel! How? var p=g.getElementsByTagName(&quot;HEAD&quot;)[0]; var c=g.createElement(&quot;script&quot;); c.type=&quot;text/javascript&quot;; c.onreadystatechange=n; c.onerror=c.onload=k; c.src=e; p.appendChild(c) MSN
  • Advanced Script Loading XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag
  • XHR Eval script must have same domain as main page must refactor script var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; eval(xhrObj.responseText); }; xhrObj.open('GET', 'A.js', true); xhrObj.send(''); http://stevesouders.com/cuzillion/?ex=10009
  • XHR Injection var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; var se=document.createElement('script'); document.getElementsByTagName('head') [0].appendChild(se); se.text = xhrObj.responseText; }; xhrObj.open('GET', 'A.js', true); xhrObj.send(''); script must have same domain as main page http://stevesouders.com/cuzillion/?ex=10015
  • Script in Iframe <iframe src='A.html' width=0 height=0 frameborder=0 id=frame1></iframe>
    • iframe must have same domain as main page
    • must refactor script:
      • // access iframe from main page
      • window.frames[0].createNewDiv();
      • // access main page from iframe
      • parent.document.createElement('div');
    http://stevesouders.com/cuzillion/? ex=10012
  • Script DOM Element var se = document.createElement('script'); se.src = 'http://anydomain.com/A.js'; document.getElementsByTagName('head') [0].appendChild(se); script and main page domains can differ no need to refactor JavaScript http://stevesouders.com/cuzillion/? ex=10010
  • Script Defer <script defer src='A.js'></script> only supported in IE script and main page domains can differ no need to refactor JavaScript http://stevesouders.com/cuzillion/? ex=10013
  • document.write Script Tag document.write (&quot;<scri&quot; + &quot;ipt type='text/javascript' src='A.js'>&quot; + &quot;</scri&quot; + &quot;ipt>&quot;); parallelization only works in IE parallel downloads for scripts, nothing else all document.write s must be in same script block http://stevesouders.com/cuzillion/? ex=10014
  • Browser Busy Indicators
  • Browser Busy Indicators good to show busy indicators when the user needs feedback bad when downloading in the background
  • Ensure/Avoid Ordered Execution
    • Ensure scripts execute in order:
      • necessary when scripts have dependencies
      • IE: http://stevesouders.com/cuzillion/? ex=10017
      • FF: http://stevesouders.com/cuzillion/? ex=10018
    • Avoid scripts executing in order:
      • faster – first script back is executed immediately
      • http://stevesouders.com/cuzillion/? ex=10019
  • Summary of Traits * Only other document.write scripts are downloaded in parallel (in the same script block).
  • and the winner is...
  • Load Scripts without Blocking
    • don't let scripts block other downloads
    • you can still control execution order, busy indicators, and onload event
    • What about inline scripts?
  • Inline Scripts Block Rendering
    • long executing inline scripts block rendering of the entire page
    • http://stevesouders.com/cuzillion/?ex=10020
    • workarounds:
      • initiate execution with setTimeout
      • move JavaScript to external script with advanced downloading techniques
  • Inline Scripts after Stylesheets Block Downloading
    • Firefox blocks parallel downloads when downloading stylesheets
    • IE doesn't...
    • ...unless the stylesheet is followed by an inline script
    • http://stevesouders.com/cuzillion/?ex=10021
    • best to move inline scripts above stylesheets or below other resources
  • Examples of Scattered Scripts eBay MSN MySpace Wikipedia
  • Don't Scatter Scripts remember inline scripts carry a cost avoid long-executing inline scripts don't put inline scripts between stylesheets and other resources
  • Takeaways
    • focus on the frontend
    • run YSlow: http://developer.yahoo.com/yslow
    • Velocity: register before May 5
    • this year's focus: JavaScript
      • Split the Initial Payload
      • Load Scripts without Blocking
      • Don't Scatter Scripts
    • speed matters
    • you CAN make your site even faster!
  • Steve Souders [email_address] http://stevesouders.com/