1. Even Faster Web Sites
cc:
Disclaimer: This content does not necessarily reflect the opinions of my employer.

2. the importance of frontend performance9%
91%
17%
83%
iGoogle, primed cache
Data source: Steve Souders
Tested on IE6 on Comcast cable modem (~5 mbps) medium powered PC, April 2008.
iGoogle, empty cache

3. time spent on the frontend
Empty Cache
Primed Cache
97%
95%
81%
47% 0%
search.live.com/results
67%
98%
94%
en.wikipedia.org/wiki
91%
96%
Ten top sites according to Alexa.com.
Data source: Steve Souders
Tested on IE6 on Comcast cable modem (~5 mbps) medium powered PC, April 2008.
For Google and Live Search there are so few components (2-4) and they're mostly cacheable so the HTML document is a bigger percentage.
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
If you could cut performance in half, FE changes would be 40-45%, while BE would be only 5-10%.
BE changes are typically more complex: rearchitecture, optimize code, add/modify hw, distribute databases, etc.
FE is simpler: change web server config, place scripts and stylesheets differently in the page, combine requests, etc.
I’ve worked with dev teams to cut response times on 50 properties, often by 25% or more. And feedback from other companies is similar.
Permission to use photo given by Technicolor:
proven to work

8. Sept 2007

9. June 2009

10. 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
14 Rules
photo courtesy of Vicki & Chuck Rogers:

11. Even Faster Web Sites Splitting the initial payload
Loading scripts without blocking
Coupling asynchronous scripts
Positioning inline scripts
Sharding dominant domains
Flushing the document early
Using iframes sparingly
Simplifying CSS Selectors
Understanding Ajax performance Doug Crockford
Creating responsive web apps Ben Galbraith, Dion Almaer
Writing efficient JavaScript Nicholas Zakas
Scaling with Comet Dylan Schiemann
Going beyond gzipping Tony Gentilcore
Optimizing images Stoyan Stefanov, Nicole Sullivan

12. Why focus on JavaScript?
Yahoo!
YouTube
AOL
Wikipedia
eBay
Facebook
MySpace
Data Source: Steve Souders
aol 76%
ebay 45%
facebook 41%
google 42%
live search 9%
msn 37%
myspace 37%
yahoo 45%
youtube 60%
wikipedia 26%
average 42%

13. scripts block
<script src="A.js"> blocks parallel downloads and rendering
9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3
7 secs: IE 8, FF 3.5(?), Chr 2, Saf 4
What's Cuzillion?

14. Splitting the Initial Payload
JavaScript
Functions Executed before onload
115K
30%
183K
44%
1088K 9%
15K
45%
search.live.com/results
17K
24%
131K
31%
297K
18%
en.wikipedia.org/wiki
114K
32%
321K
13%
240K
Data source: Steve Souders
252K avg
26% avg

15. Splitting the Initial Payload
split your JavaScript between what's needed to render the page and everything else
load "everything else" after the page is rendered
separate manually (Firebug); tools needed to automate this (Doloto from Microsoft)
load scripts without blocking – how?
Permission to use photo given by Brian.H -

16. MSN.com: parallel scripts
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)
Of the ten top sites, MSN.com (Script DOM Element), Live Search (Script in Iframe), and Yahoo (Script DOM Element) use advanced script loading techniques.

17. Loading Scripts Without Blocking
XHR Eval
XHR Injection
Script in Iframe
Script DOM Element
Script Defer
document.write Script Tag
All of these allow for parallel downloads, but none of them allow for parallel JS execution – that's not possible (currently, WebKit is doing some stuff on that).

18. Script DOM Element script and main page domains can differ
var se = document.createElement('script');
se.src = '
document.getElementsByTagName('head')
[0].appendChild(se);
script and main page domains can differ
no need to refactor JavaScript

19. browser busy indicators
Audio (IE "click") is another busy indicator.
Delayed rendering and delayed onload ("done") are other busy indicators.
Sometimes busy indicators are bad, sometimes good.

20. Loading Scripts Without Blocking
|| down-loads
domains can differ
existing scripts
browser busy
ensures order
size (bytes)
normal Script Src no
yes
IE,FF
~50
XHR Eval
~500
XHR Injection
Script in Iframe
Script DOM Element FF
~200
Script Defer IE
document.write Script Tag
IE*
~100
Data source: Steve Souders
*Only other document.write scripts are downloaded in parallel (in the same script block).

21. and the winner is... XHR Eval XHR Injection Script in iframe
Script DOM Element
Script Defer
Script DOM Element (FF)
Script Defer (IE)
Script DOM Element (IE)
Managed XHR Injection
Managed XHR Eval
different domains
same domains
no order
preserve order
no busy
show busy
I'll do JavaScript and PHP implementations of this logic soon.

23. asynchronous JS example: menu.js
script DOM element approach
<script type="text/javascript"> var domscript = document.createElement('script'); domscript.src = "menu.js"; document.getElementsByTagName('head')[0].appendChild(domscript); var aExamples = [ ['couple-normal.php', 'Normal Script Src'], ['couple-xhr-eval.php', 'XHR Eval'], ... ['managed-xhr.php', 'Managed XHR'] ]; function init() { EFWS.Menu.createMenu('examplesbtn', aExamples); } init(); </script>

24. before
after

25. Loading Scripts Without Blocking
|| down-loads
domains can differ
existing scripts
browser busy
ensures order
size (bytes)
normal Script Src no
yes
IE,FF
~50
XHR Eval
~500
XHR Injection
Script in Iframe
Script DOM Element FF
~200
Script Defer IE
document.write Script Tag
IE*
~100
!IE
Data source: Steve Souders
*Only other document.write scripts are downloaded in parallel (in the same script block).

26. that depends on the script?
what about
inlined code
that depends on the script?

27. coupling techniques
hardcoded callback window onload timer degrading script tags script onload

28. technique 5: script onload
<script type="text/javascript">
var aExamples = [['couple-normal.php', 'Normal Script Src'], ...];
function init() {
EFWS.Menu.createMenu('examplesbtn', aExamples); }
var domscript = document.createElement('script');
domscript.src = "menu.js";
domscript.onloadDone = false;
domscript.onload = function() {
if ( ! domscript.onloadDone ) { init(); }
domscript.onloadDone = true; };
domscript.onreadystatechange = function() {
if ( "loaded" === domscript.readyState ) {
document.getElementsByTagName('head')[0].appendChild(domscript);
</script>
pretty nice, medium complexity

29. asynchronous loading & coupling
async technique: Script DOM Element
easy, cross-browser
doesn't ensure script order
coupling technique: script onload
fairly easy, cross-browser
ensures execution order for external script and inlined code
multiple interdependent external and inline scripts:
much more complex (see hidden slides)
concatenate your external scripts into one!

30. bad: stylesheet followed by inline script
browsers download stylesheets in parallel with other resources that follow...
...unless the stylesheet is followed by an inline script
best to move inline scripts above stylesheets or below other resources
use Link,
Joseph Smarr from Plaxo advocates interspersing setTimeout through JavaScript threads every n00 ms.

31. Positioning Inline Scripts
Wikipedia
MySpace
eBay
MSN
Data source: Steve Souders

32. Sharding Dominant Domains
but Rule 9 says "Reduce DNS lookups"?!
remove DNS lookups that aren't heavily used
split domains that are on the critical path
how find "critical path"?

34. news.google.com

35. connections per server by browser
HTTP/1.1
HTTP/1.0
IE 6,7 2 4
IE 8 6
Firefox 1.5, 2 8
Firefox 3
Safari 3,4
Chrome
Opera 9
newer browsers open more connections* best to shard across 2-4 domains** * **

36. flushing the document early
html
image
script
html
image
script
call PHP's flush()
gotchas:
PHP output_buffering – ob_flush()
Transfer-Encoding: chunked
gzip – Apache's DeflateBufferSize before 2.2.8
proxies and anti-virus software
browsers – Safari (1K), Chrome (2K)
HTML document blocks resources
other languages:
$| or FileHandle autoflush (Perl), flush (Python), ios.flush (Ruby)
esp. good when your HTML document takes more than 10-20%, and when users have high latency.

37. successful flushing
Google Search external resource downloaded early content visible to the user
google
image
script
204

38. Using Iframes Sparingly
most expensive DOM element blocks parent's onload workaround: set iframe src via setTimeout
<iframe id=if1 src=""></iframe>
<script type="text/javascript">
function setSrc() {
document.getElementById('if1').src="url"; }
setTimeout(setSrc, 0);
</script>

39. types of CSS selectors
ID selectors: #toc {} class selectors: .chapter {} type selectors: A {} adjacent sibling selectors: H1 + #toc {} child selectors: #toc > LI {} descendant selectors: #toc A {} universal selectors: * {} attribute selectors: href="#index"] {} psuedo classes and elements: A:hover {}

40. writing efficient CSS #toc > LI { font-weight: bold; }
"The style system matches a rule by starting with the rightmost selector and moving to the left through the rule's selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch."
#toc > LI { font-weight: bold; }
find every LI whose parent is id="toc"
#toc A { color: #444; }
find every A and climb its ancestors until id="toc" or DOM root (!) is found

41. real world levels of CSS
# Rules
# elements
Avg Depth
AOL
2289
1628 13
eBay
305
588 14
Facebook
2882
1966 17
Google Search 92
552 8
Live Search
376
449 12
MSN.com
1038
886 11
MySpace
932
444 9
Wikipedia
795
1333 10
Yahoo!
800
564
YouTube
821
817
average
1033
923

42. testing typical CSS 1K rules (vs. 20K)
same amount of CSS in all test pages
30 ms avg delta
"costly"selectors aren't always costly (at typical levels)
are these selectors "costly"?
DIV DIV DIV P A.class0007 { ... }

43. testing expensive selectors
1K rules (vs. 20K)
same amount of CSS in all test pages
2126 ms avg delta!
truly expensive selector
A.class0007 * { ... }
compare to:
DIV DIV DIV P A.class0007 { ... }
the key is the key selector – the rightmost argument

44. Simplifying CSS Selectors
efficient CSS comes at a cost – page weight focus optimization on selectors where the key selector matches many elements reduce the number of selectors
reflow times measured in FF 3.0

45. Performance Tools
HttpWatch Firebug Page Speed YSlow Smush.it CSS Sprite Generator performance.org/ SpriteMe (in progress) Hammerhead Cuzillion

46. Performance Analyzers: HPWS rules
YSlow
Page Speed
Pagetest
VRTA
neXpert
combine JS & CSS X
use CSS sprites
use a CDN
set Expires in the future
gzip text responses
put CSS at the top
put JS at the bottom
avoid CSS expressions
make JS & CSS external
reduce DNS lookups
minify JS
avoid redirects
remove dupe scripts
remove ETags

47. Performance Analyzers: EFWS rules
YSlow
Page Speed
Pagetest
VRTA
neXpert
don't block UI thread
split JS payload X
load scripts async
inline JS b4 stylesheet
write efficient JS
min. uncompressed size
optimize images
shard domains
flush the document
avoid iframes
simplify CSS selectors

48. Performance Analyzers: other rules
YSlow
Page Speed
Pagetest
VRTA
neXpert
use persistent conns X
reduce cookies
2.0
avoid net congestion
increase MTU, TCP win
avoid server congestion
remove unused CSS
specify image dims
use GET for Ajax
reduce DOM elements
avoid 404 errors
avoid Alpha filters
don't scale images
optimize favicon

49. Top 10 Performance YSlow Page Speed AOL ?* yellow eBay 82 Facebook 68
red
Google Search 95
green
Live Search 93
MSN.com 72
MySpace 84
Wikipedia 66
Yahoo! 96
YouTube 77
* YSlow wouldn't start.

50. Wikipedia
combine 6 scripts, 8 stylesheets add Expires header minify JavaScript, save 39K (36%) avoid inline script after stylesheet 31K (41%) unused CSS remove ETags

51. Yahoo!
shard l.yimg.com 46K (49%) unused CSS ~90 very inefficient CSS selectors

52. www.ebay.com long HTML doc response flush (good)1 2 3 4 4 4 5 4
long HTML doc response
flush (good)
inline script blocks .js
var pageName='HomePagePortal';
scripts block
ads .js non-blocking (good)
26 bg images – no sprites
sharded domains – pics & rtm (good)
compress images by 20%
thumbs load slowly – HTTP/1.0?
remove ETags (?)
~40 inefficient CSS selectors
.playgrnd * {} 6 7 8 9

53. AOL shard portal.aolcdn.com combine 8 scripts simplify CSS selectors
avoid inline script after stylesheet
jQueryEnabled = true;
remove 97K (49%) unused CSS

54. Facebook
combine 13 scripts, 6 stylesheets sprite 31 background images reduce images by 106K (44%) put stylesheets above scripts remove 102K (50%) unused CSS

55. MSN.com
combine 13 scripts sprite 26 background images put stylesheets above scripts avoid inline script after stylesheet

56. YouTube
add Expires header (can't?) minify JavaScript, save ~29K (14%

57. CNet Performance Analysis
requests: 107
load time: 3.7 secs
xfer size: 436K
YSlow: F (48)
cool
flushed document
HTTP/1.0 downgrade
opportunities
load oreo.moo.rb.combined.js async
split i.i.com.com across two domains
concatenate 10 scripts
sprite 25 CSS background images
30 resources with short Expires
62% (62K) of CSS not used

58. http://www.shopping.com slow spots: use CSS sprites (42 bg images)
top – shard CSS and JS, flush
middle – shard images
bottom – scripts (async?)
use CSS sprites (42 bg images)
add future Expires header
optimize images (50K, 20%)
remove ETags

59. takeaways focus on the frontend run Page Speed and YSlow speed matters
72 years = 2,270,592,000 seconds = 500ms * 4.4B page views

60. impact on revenue Google: Yahoo: Amazon: +500 ms  -20% traffic1
+400 ms  -5-9% full-page traffic2
+100 ms  -1% sales1
72 years = 2,270,592,000 seconds = 500ms * 4.4B page views 1 2

61. cost savings hardware – reduced load bandwidth – reduced response size
72 years = 2,270,592,000 seconds = 500ms * 4.4B page views

62. Even Faster Web Sites if you want better user experience more revenue
reduced operating expenses
the strategy is clear
Even Faster Web Sites
72 years = 2,270,592,000 seconds = 500ms * 4.4B page views

63. Steve Souders souders@google.com
"thank you" by nj dodge:
Steve Souders