CS193H: High Performance Web Sites Lecture 10: Rule 6 – Put Scripts at the Bottom Steve Souders Google

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

Parallel downloads HTTP spec recommends only two connections (parallel downloads) per hostname results in a stairstep pattern general rule: page load time increases for every two resources added

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

parallelization is an opportunity for improving load times

Scripts block unfortunately, scripts block in two ways downloading resources below the script rendering elements below the script moving the scripts lower means less blocking

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

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

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

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

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

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

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?