CS193H:
High Performance Web Sites
Lecture 10: Rule 6 – Put Scripts
at the Bottom
Steve Souders
Google
[email protected]
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
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
More connections
newer browsers open more
connections per hostname
domain sharding – split
resources across multiple
domains to increase
parallelization
• previous example using two
domains
• browser looks at name, not IP
address
Chrome
6
Firefox 2
2
Firefox 3
6
IE 6,7
2
IE 8
6
Opera
8
Safari
4
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
http://stevesouders.com/hpws/js-middle.php
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
http://www.stevesouders.com/blog/2008/09/11/delayed-script-execution-in-opera/
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?