The document discusses techniques for improving frontend web performance, including splitting codepayloads, loading scripts without blocking, and not scattering scripts across pages. It recommends focusing first on optimizing frontend performance since 80-90% of end user response time is spent loading frontend resources. Specific techniques include splitting JavaScript payloads into above-the-fold and below-the-fold code, using techniques like XHR and iframes to load scripts asynchronously without blocking page rendering, and avoiding placing inline scripts between stylesheets and other page resources.

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

6. High Performance Web Sites YSlow

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

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

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

27. and the winner is...

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

34. Steve Souders [email_address] http://stevesouders.com/