Sanjeev ghai, Sanjeev ghei, Sanjeev ghai income tax, Sanjeev ghai irs

2. the importance of frontend
performance
9% 91%
17% 83%
iGoogle, primed cache
iGoogle, empty cache

6. Sept 2007

7. 14 RULES
1. MAKE FEWER HTTP REQUESTS
2. USE A CDN
3. ADD AN EXPIRES HEADER
4. GZIP COMPONENTS
5. PUT STYLESHEETS AT THE TOP
6. PUT SCRIPTS AT THE BOTTOM
7. AVOID CSS EXPRESSIONS
8. MAKE JS AND CSS EXTERNAL
9. REDUCE DNS LOOKUPS
10.MINIFY JS
11.AVOID REDIRECTS
12.REMOVE DUPLICATE SCRIPTS
13.CONFIGURE ETAGS
14.MAKE AJAX CACHEABLE

8. June 2009

9. 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

10. Why focus on JavaScript?
WFMaikcyYieSapbepheABoaodOocaoieakyL!
YouTube

11. 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

12. MSN
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)

13. Loading Scripts Without Blocking
XHR Eval
XHR Injection
Script in Iframe
Script DOM Element
Script Defer
document.write Script Tag

14. XHR Eval
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState != 4 ) return;
eval(xhrObj.responseText);
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');
script must have same domain as main page
must refactor script

15. 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

16. Script in Iframe
<iframe src='A.html' width=0 height=0
frameborder=0 id=frame1></iframe>
iframe must have same domain as main page
must refactor script:
// access iframe from main page
window.frames[0].createNewDiv();
// access main page from iframe
parent.document.createElement('div');

17. 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

18. Script Defer
<script defer src='A.js'></script>
only supported in IE (just landed in FF 3.1)
script and main page domains can differ
no need to refactor JavaScript

19. document.write Script Tag
document.write("<script
type='text/javascript' src='A.js'>
</script>");
parallelization only works in IE
parallel downloads for scripts, nothing else
all document.writes must be in same
script block

20. Load Scripts Without Blocking
*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
Script Defer
Script DOM Element
Script DOM Element (FF)
Script Defer (IE)
XHR Eval
XHR Injection
Script in iframe
Script DOM Element (IE)
XHR Injection
XHR Eval
Script DOM Element (IE)
Script DOM Element (FF)
Script Defer (IE)
Managed XHR Eval
Managed XHR Injection
Managed XHR Injection
Managed XHR Eval
Managed XHR Injection
Managed XHR Eval
Script DOM Element
Script DOM Element (FF)
Script Defer (IE)
Managed XHR Eval
Managed XHR Injection
different domains same domains
no order
preserve
order
no order
no busy
show busy
no busy show busy
preserve
order

23. asynchronous JS example: menu.js
<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>
script DOM element approach

24. before
after

25. Loading Scripts Without Blocking
*Only other document.write scripts are downloaded in parallel (in the same script block).
!IE

26. 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 ) {
if ( ! domscript.onloadDone ) { init(); }
domscript.onloadDone = true;
}
}
document.getElementsByTagName('head')[0].appendChild(domscript);
</script>
pretty nice, medium complexity

29. going beyond gzipping
Tony Gentilcore, Chapter 9, Even Faster
Web Sites
Rule 4: Gzip Components from HPWS
HTTP/1.1
request: Accept-Encoding: gzip,deflate
response: Content-Encoding: gzip
Apache 2.x:
AddOutputFilterByType DEFLATE
text/html text/css application/x-javascript

30. benefits of gzipping
70% reduction in transfer size
not just for HTML!!
all text: JavaScript, CSS, XML, JSON
not binary: images, PDF, Flash

31. so what's the issue?
15% of your users get uncompressed responses
surprize! why?
old browsers? no
Netscape Navigator 3 – 0.0%
Netscape Communicator 4 – 0.1%
Opera 3.5 – 0.0%
IE <3 – 0.01%
clue: most prevalent in the Middle East

32. who's stripping?
proxy, A-V software Accept-Encoding header
Ad Muncher stripped
CA Internet Security Suite Accept-EncodXng: gzip, deflate
CEQURUX stripped
Citrix Application Firewall stripped
ISA 2006 stripped
McAfee Internet Security 6.0 XXXXXXXXXXXXXXX: +++++++++++++
Norton Internet Security 6.0 ---------------: -------------
Novell iChain 2.3 stripped
Novell Client Firewall stripped
WebWasher stripped
ZoneAlarm Pro 5.5 XXXXXXXXXXXXXXX: XXXXXXXXXXXXX
proxies and anti-virus software disable
compression for easier response filtering

33. what to do
don't assume compression
go the extra mile to reduce response size
• event delegation (-5%)
• relative URLs (-3%)
• minify HTML, JavaScript, and CSS (-4%)
• use CSS rules over inline styles (-1%)
• alias long JavaScript symbol names (??)
Thanks, Tony!
see Tony's chapter in Even Faster Web Sites

34. homage to Open Source
UA Profiler
Cuzillion
Episodes
Hammerhead
SpriteMe

36. UA Profiler
tracks browser performance traits
http://stevesouders.com/ua/
go to the test page
your browser automatically walks through
the tests (requires JS)
results recorded and shared publicly
currently 20K test results, 13K unique
testers, 70 browsers
help out by running the test!

38. Cuzillion
'cuz there are a zillion pages to check
a tool for quickly constructing web pages to
see how components interact
http://stevesouders.com/cuzillion/

40. Episodes
framework for timing web sites
• based on JavaScript timers
• works on Ajax web apps
• uses window.postMessage (multiple listeners)
• potential industry standard
http://stevesouders.com/episodes/

41. Measuring Performance
Episodes
dev box synthetic
testing
bucket
testing
real user
data
Hammerhead

43. Hammerhead
moving performance testing upstream
http://stevesouders.com/hammerhead/
Firebug extension
load M URLs N times, empty & primed cache
record average & median time
add'l features:
export data
load time measurement
modal cache clearing
combine with bandwidth throttler

45. SpriteMe
don't say "bite me!#*", say "SpriteMe!"
create sprites with ease
http://spriteme.org/
bookmarklet
sprite generator:
coolRunnings by Jared Hirsch
http://jaredhirsch.com/coolrunnings/about/
http://bitbucket.org/jared/coolrunnings/

46. takeaways
focus on the frontend
run YSlow
(http://developer.yahoo.com/yslow)
and Page Speed!
(http://code.google.com/speed/page-speed/)
speed matters

47. Bing:
Yahoo:
Google:
AOL:
Shopzilla:
impact on revenue
+2000 ms ® -4.3% revenue/user1
+400 ms ® -5-9% full-page traffic2
+400 ms ® -0.59% searches/user1
fastest users ® +50% page views3
-5000 ms ® +7-12% revenue4
1 http://en.oreilly.com/velocity2009/public/schedule/detail/8523
2 http://www.slideshare.net/stoyan/yslow-20-presentation
3 http://en.oreilly.com/velocity2009/public/schedule/detail/7579
4 http://en.oreilly.com/velocity2009/public/schedule/detail/7709

48. cost savings
hardware – reduced load
Shopzilla – 50% fewer servers
bandwidth – reduced response size
http://billwscott.com/share/presentations/2008/stanford/HPWP-RealWorld.pdf

49. if you want
better user experience
more revenue
reduced operating costs
the strategy is clear
Even Faster Web Sites

50. 1:00 – book signing at Barnes & Noble
3:20 – free consulting at Google booth
Steve Souders
souders@google.com
http://stevesouders.com/docs/oscon-20090722.ppt