Your SlideShare is downloading. ×
Web20expo 20080425
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

Web20expo 20080425

1,302
views

Published on

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

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

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,302
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
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
  • Photo courtesy of Amnemona: http://www.flickr.com/photos/marinacvinhal/379111290/
  • Transcript

    • 1. 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.
    • 2. The Importance of Frontend Performance 17% 83% iGoogle, primed cache 9% 91% iGoogle, empty cache
    • 3. 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%
    • 4. 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
    • 5. 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
    • 6. High Performance Web Sites YSlow
    • 7.
      • http://conferences.oreilly.com/velocity/ 20% discount: vel08st
    • 8. 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
    • 9. Why focus on JavaScript? AOL eBay Facebook MySpace Wikipedia Yahoo! YouTube
    • 10. Scripts Block <script src=&quot;A.js&quot;> blocks parallel downloads and rendering What's &quot;Cuzillion&quot;? http://stevesouders.com/cuzillion/?ex=10008
    • 11. 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/
    • 12. Split the Initial Payload: Facebook 43 external scripts, 550K uncompressed 9% of functionality is used before onload
    • 13. 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%
    • 14. 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?
    • 15. 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
    • 16. Advanced Script Loading XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag
    • 17. 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
    • 18. 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
    • 19. 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
    • 20. 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
    • 21. 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
    • 22. 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
    • 23. Browser Busy Indicators
    • 24. Browser Busy Indicators good to show busy indicators when the user needs feedback bad when downloading in the background
    • 25. 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
    • 26. Summary of Traits * Only other document.write scripts are downloaded in parallel (in the same script block).
    • 27. and the winner is...
    • 28. 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?
    • 29. 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
    • 30. 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
    • 31. Examples of Scattered Scripts eBay MSN MySpace Wikipedia
    • 32. 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
    • 33. 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!
    • 34. Steve Souders [email_address] http://stevesouders.com/

    ×