Sanjeev ghai 12

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

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

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

Why focus on JavaScript?
WFMaikcyYieSapbepheABoaodOocaoieakyL!
YouTube

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

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)

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

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

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

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');

Script DOM Element
var se = document.createElement('script');
se.src = 'http://anydomain.com/A.js';
[0].appendChild(se);
script and main page domains can differ
no need to refactor JavaScript

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

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

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

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 Defer (IE)
Managed XHR Eval
Managed XHR Injection
Managed XHR Eval
Managed XHR Eval
Script DOM Element
Script Defer (IE)
Managed XHR Eval
different domains same domains
no order
preserve
order
no order
no busy
show busy
no busy show busy
preserve
order

asynchronous JS example: menu.js
<script type="text/javascript">
var domscript = document.createElement('script');
domscript.src = "menu.js";
[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

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

what about
inlined code
that depends on the script?

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

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

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

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

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

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

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

homage to Open Source
UA Profiler
Cuzillion
Episodes
Hammerhead
SpriteMe

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!

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/

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/

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

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

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/

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

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

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

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

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

Sanjeev ghai 12

Recommended

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Sanjeev ghai 12 (20)

More from Praveen kumar (10)

Recently uploaded (20)

Sanjeev ghai 12

Editor's Notes