1 / 45

High Performance Widgets

High Performance Widgets. Steve Souders souders@google.com http://stevesouders.com/docs/widget-summit-2008.ppt. Disclaimer: This content does not necessarily reflect the opinions of my employer. The Importance of Frontend Performance. 9%. 91%. 17%. 83%. iGoogle, primed cache.

benjamin
Download Presentation

High Performance Widgets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. High Performance Widgets Steve Souders souders@google.com http://stevesouders.com/docs/widget-summit-2008.ppt Disclaimer: This content does not necessarily reflect the opinions of my employer.

  2. The Importance of Frontend Performance 9% 91% 17% 83% iGoogle, primed cache iGoogle, empty cache

  3. Time Spent on the Frontend April 2008

  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. YSlow High Performance Web Sites

  7. http://conferences.oreilly.com/velocity/ June 22-24, 2009

  8. High Performance Web Sites, Vol 2 • Split the initial payload • Load scripts without blocking • Don't scatter inline scripts • Split dominant 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? Yahoo! Wikipedia eBay AOL MySpace YouTube Facebook

  10. Scripts Block <script src="A.js"> blocks parallel downloads and rendering http://stevesouders.com/cuzillion/?ex=10008 What's "Cuzillion"?

  11. MSN.com: Parallel Scripts MSN Scripts and other resources downloaded in parallel! How? Secret sauce?! var p= g.getElementsByTagName("HEAD")[0]; var c=g.createElement("script"); c.type="text/javascript"; c.onreadystatechange=n; c.onerror=c.onload=k; c.src=e; p.appendChild(c)

  12. Advanced Script Loading XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag

  13. XHR Eval varxhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; eval(xhrObj.responseText); }; xhrObj.open('GET', 'A.js', true); xhrObj.send(''); script must have same domain as main page must refactor script http://stevesouders.com/cuzillion/?ex=10009

  14. XHR Injection varxhrObj = 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

  15. 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

  16. 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

  17. Script Defer <script defer src='A.js'></script> only supported in IE (just landed in FF 3.1) script and main page domains can differ no need to refactor JavaScript http://stevesouders.com/cuzillion/?ex=10013

  18. document.write Script Tag document.write("<scr" + "ipt type='text/javascript' src='A.js'>" + "</scr" + "ipt>"); parallelization only works in IE parallel downloads for scripts, nothing else all document.writes must be in same script block http://stevesouders.com/cuzillion/?ex=10014

  19. Browser Busy Indicators

  20. Browser Busy Indicators good to show busy indicators when the user needs feedback bad when downloading in the background

  21. 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

  22. Summary of Traits *Only other document.write scripts are downloaded in parallel (in the same script block).

  23. and the winner is... XHR Eval XHR Injection Script in iframe Script DOM Element Script Defer same domains different domains Script DOM Element Script Defer no order preserve order XHR Eval XHR Injection Script in iframe Script DOM Element (IE) Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection no order preserve order Script DOM Element no busy show busy Script DOM Element (FF) Script Defer (IE) Managed XHR Injection Managed XHR Eval Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection no busy show busy XHR Injection XHR Eval Script DOM Element (IE) Managed XHR Injection Managed XHR Eval Script DOM Element

  24. Load Scripts without Blocking don't let scripts block other downloads you can still control execution order, busy indicators, and onload event

  25. Get Satisfaction Widget

  26. Get Satisfaction Widget <div id="gsfn_content">Loading...</div> <script_src="http://getsatisfaction.com/oreilly/widgets/javascripts/5977e91/widgets.js" type="text/javascript"></script> <script_src="http://getsatisfaction.com/oreilly/topics.widget?callback=gsfnTopicsCallback&amp;length=120&amp;limit=5&amp;sort=recently_active" type="text/javascript"></script> ... function gsfn_populate(id, template) { document.getElementById(id).innerHTML = template; }

  27. 3 requests 8K xfer size 8K JS (uncompr) good • small improve • add future Expires header – widgets.js, favicon.gif (not topics.widget) • gzip – wigets.js, topics.widget • minify widgets.js • remove ETags • use only one: getsatisfaction.com or www.getsatisfaction.com • load scripts async

  28. Google Calendar Widget

  29. Google Calendar Widget <iframe_ src="//www.google.com/calendar/embed ?mode=AGENDA &amp;height=600 &amp;wkst=1 &amp;bgcolor=%23FFFFFF &amp;src=v9ke3029e8k53qjtbf506jumu8ktapjh%40import.calendar.google.com &amp;color=%235A6986 &amp;ctz=America%2FLos_Angeles" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"> </iframe>

  30. 10 requests 65K xfer size 135K JS (uncompr) good • gzip turned on • no ETags • future Expires headers improve • big! 135K JS, 18K CSS (uncompressed) • set iframe SRC dynamically • 44% of JS unused • sprite 6 images into 1 • /feeds/ is slow (only 2K, but longer than 133K JS)

  31. Google Friend Connect Widget

  32. Google Friend Connect Widget <div id="div-08054659623916314855-members"></div> <script type="text/javascript"> var skin = {}; skin['HEIGHT'] = '150'; skin['HEADER_FOOTER_BG_COLOR'] = '#BFEECC'; skin['MEMBERS_LIST_BG_COLOR'] = '#D9FFE4'; skin['MEMBERS_LIST_FRIEND_LINK_COLOR'] = '#339966'; skin['MEMBERS_LIST_HEADER_FONT_COLOR'] = '#339966'; skin['INVITE_LINK_COLOR'] = '#339966'; google.friendconnect.container.renderMembersGadget( { id: 'div-08054659623916314855-members', site: '08054659623916314855' }, skin); </script>

  33. 39 requests 188K xfer size 471K JS (uncompr) (3 widgets) good • gzip turned on • no ETags • future Expires headers improve • big! (really 3 widgets) • 3 redirects – max-age=0 • 74% of JS unused • 22 requests expire in 24 hours • 173K of images – lossless compression cuts 87% • 4 text/html responses not gzipped (total 19K) • 6 CSS expressions • 3 duplicate scripts – iframes

  34. MyBlogLog Widget

  35. MyBlogLog Widget varmbl_widget = ''; mbl_widget += ''; mbl_widget += ' <style>'; mbl_widget += ' a.mbl_widget {…}'; mbl_widget += ' a.mbl_widget_u {…}'; mbl_widget += ' a.mbl_widget_a {…}'; mbl_widget += ''; [321 lines later...] mbl_widget += ' </div>'; mbl_widget += ' </div>'; mbl_widget += ''; document.write(mbl_widget);

  36. js 14 requests 60K xfer size 62K JS (uncompr) good • sprite (v3_1_default_black.gif) • domain sharding • images optimized improve • add future Expires (nopic_48.gif, close12_1.gif) • 5 DNS lookups • avoid document.write • 80% of JS unused • load script asynchronously

  37. Plaxo Widget

  38. Plaxo Widget <div id="plaxo-pulse-widget"></div> <script_src="http://pulse.plaxo.com/pulse/widget/get?authTicket=265...4%3D&amp;type=frame&amp;version=2&amp;height=480&amp;width=125"></script> iframe is appended to div

  39. js 14 requests 41K xfer size 2K JS (uncompr) good • 10 day future Expires • gzip enabled • domain sharding (Flickr) • backend stitching improve • /badge is slow – start with previous request • do away with iframe altogether – one script • load script asynchronously – set size of div • 4 images could be sprited into 1

  40. Announcement 1: UA Profiler tracks browser performance traits http://stevesouders.com/ua/ go to the test page your browser automatically walks through the tests (requires JS) results recorded and shared publicly currently ~3K tests, ~2K unique testers, ~120 browsers help out by running the test!

  41. Measuring Performance Episodes dev box synthetic testing bucket testing real user data Hammerhead

  42. Announcement 2: Hammerhead"moving performance testing upstream" http://stevesouders.com/hammerhead/ Firebug extension load M URLs N times, empty & primed cache record average & median time add'l features: export data load time measurement modal cache clearing combine with bandwidth throttler

  43. Takeaways focus on the frontend run YSlow: http://developer.yahoo.com/yslow this year's focus: JavaScript Split the Initial Payload Load Scripts without Blocking Don't Scatter Inline Scripts speed matters life's too short, write fast code

  44. Steve Souders souders@google.com http://stevesouders.com/docs/widget-summit-2008.ppt

More Related