1. CS193H: High Performance Web Sites Lecture 10: Rule 6 – Put Scripts at the Bottom Steve Souders Google souders@cs.stanford.edu

2. Announcements alternate final exam slot Tues, Dec 9, 12:15-3:15 exam will also be given during default time slot: Dec 12, 12:15-3:15 locations TBD

3. Parallel downloads HTTP spec recommends only two connections (parallel downloads) per hostname http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4 results in a stairstep pattern general rule: page load time increases for every two resources added

4. More connections newer browsers open more connections per hostname Chrome 6 Firefox 2 2 Firefox 3 6 IE 6,7 2 IE 8 6 Opera 8 Safari 4 domain sharding – split resources across multiple domains to increase parallelization previous example using two domains browser looks at name, not IP address

5. parallelization is an opportunity for improving load times

6. Scripts block unfortunately, scripts block in two ways downloading resources below the script rendering elements below the script http://stevesouders.com/hpws/js-middle.php moving the scripts lower means less blocking

7. Challenges document.write scripts that perform document.write must be placed where the content is to be inserted alternative: set element.innerHTML ads ads typically are at the top of the page and include scripts alternative: use iframes or lazy-load ads code dependencies some JavaScript must occur higher in the page, and it depends on other scripts alternative: move scripts as low as possible, combine them

8. Script defer IE only currently; just added to Firefox 3.1 defers scripts a little bit, but non-deterministic so may still block downloads and rendering if you can defer a script, better to move it to the bottom

9. Opera delayed scripts opera:config#Extensions|DelayedScriptExecution delays (defers) script loading with some nice enhancements deferred to the very end remembers script location so document.write still works huge improvement for ads prototype for future implementation of defer http://www.stevesouders.com/blog/2008/09/11/delayed-script-execution-in-opera/

10. Parallel script loading execute scripts in order, but download them in parallel with other resources available in IE8 and Safari 4 coming in Firefox 3.1 and Chrome IE6&7 will be around for years, we have to keep them in mind, so… put scripts at the bottom

11. HTTP/1.0 vs. HTTP/1.1 back to parallel downloads 2 per hostname... older browsers open more connections for HTTP/1.0 vs. HTTP/1.1 IE 6,7: 4 vs. 2 Firefox 2: 8 vs. 2 since HTTP/1.1 supports persistent connections, this was an attempt to reduce load on servers downgrading to HTTP/1.0 might be faster for older (hugely popular) browsers: aol.com

12. Homework "Improving Top Site" class project: improvements for Rules 1-3 due today 11:59pm Rule 4 – waiting for Stanford IT to turn on gzip, so not required for this deliverable read Chapter 7 of HPWS

13. Questions How many connections per hostname is suggested in the HTTP spec? Do all browsers follow this recommendation? What's domain sharding? In what way do scripts block a web page? Give a situation where you can't just move a script to the bottom of the page. Which browsers support parallel script loading? How does HTTP/1.0 vs. HTTP/1.1 affect parallel downloads?