7. According to Yahoo:
“80% of end-user response time is
spent on the front-end”
According to Steve Souders (Google performance guru):
“80-90% of end-user response
time is spent on the front-end”
8.
9. Ads
CDN’s
Services
Syndicated Content
Integration is happening on the client-side
10. OPTIMIZING FRONT END
• Majority of end user response time spent on front end
• Easier to optimize front end
• Time spent optimizing here will have greatest impact
12. PAGE LOAD TIME
IS IMPORTANT
Page load time is critical to the success of a web site/app
Google: +500 ms → -20% traffic
Yahoo: +400 ms → -5-9% full-page traffic
Amazon: +100 ms → -1% sales
Small performance flucutations affect traffic and sales!!!
13. BEST PRACTICES
• Reduce HTTP Requests
• reduce overhead of page load
• combine javascript and css into less number of files
• combine images into sprites
• Use a Content Delivery Network (CDN)
• static content delivered by fast distributed network with low latency
• content delivered closer to “last mile”
14. BEST PRACTICES
• Make Pages Cacheable
• add expires header to pages
• use on all static content
• reduces HTTP requests
• Use GZIP Page Compression
• all modern browsers support GZIP compression
• 60-80% savings on text-based content
• No code changes required!
15. BEST PRACTICES
• Place Stylesheets at the Top
• browser needs style info first to avoid repaints/reflows later
CSS
• keep stylesheets external
• use <link>, do not use @import
• Place Scripts at the Bottom
• allow page content to be rendered first
• keep scripts external to allow caching
JavaScript
16. BEST PRACTICES
• Minify JavaScript and CSS
• save bandwidth / download time
• lots of tools to automate this for you
• Post/pre Load Components
• consider how you are loading content and scripts
17. BEST PRACTICES
• Maximize Paralell Downloads
• Split components across domains
• each browser limits paralell downloads per domain
• enables browser to load more stuff in parallel
• Optimize Images
• avoid high-res images unless it is intentional
• don’t let the browser scale your images
• combine into sprites
18. CSS SPRITES
• One image contains
multiple web images
• CSS styles used to
display correct web
image, i.e. position,
background-position
21. SINGLE THREAD
IMPLICATIONS
• Single UI Thread for both UI updates and JavaScript execution
• only one of these can happen at a time!
• Reason: JavaScript may cause UI updates...
Page downloading and rendering
must stop and wait for scripts to be
downloaded and executed
22. “0.1 second is about the limit for having the user feel
that a system is reacting instantaneoulsy”
- Jakob Nielsen, Usability Expert
Translation: No single JavaScript should execute for
more than 100 mS to ensure a responsive UI.
23. No limit to how long this can run...
function processData(items, processor, callback) {
for (var i=0, len=items.length; i<len; i++) {
processor(items[i]);
}
callback();
}
Will run no more than 50 mS...
funcion timedProcessData(items, processor, callback) {
var todo = items.concat(); // clone items
setTimeout(funcion() {
var start = new Date();
do {
processor(todo.shift());
} while (todo.length > 0 && (new Date() - start < 50));
if (todo.length > 0) {
setTimeout(arguments.callee, 25);
}
else {
callback(items);
}
}, 25);
}
24. WEB WORKERS
• Commonly associated with HTML5
• Allow for asynchronous JavaScript execution
• JS runs in a seperate thread isolated from the DOM
• Does not delay UI updates
• Data can be passed to/from Web Workers
25. Calling a Web Worker
var worker = new Worker("worker.js");
// Watch for messages from the worker
worker.onmessage = function(e){
// The message from the client:
e.data
};
worker.postMessage("start");
The Web Worker client (worker.js)
onmessage = function(e){
if ( e.data === "start" ) {
// Do some computation
done()
}
};
function done(){
// Send back the results to the parent page
postMessage("done");
}
31. MINIFY JAVASCRIPT
• Removes all unecessary space/comments from your JS files
• Replace variables with short names
• Easy to do at built-time with a tool
• Checkout YUI Compressor, Closure Compiler...
Avoid manual code-size optimization!
32. NON-BLOCKING LOADS
• AddJavaScript to a page in a way that does not block the
browser thread
‣ Dynamic Script Elements
‣ Script Injection
33. DYNAMIC SCRIPT ELEMENTS
• JavaScript
is downloaded and executed without blocking
other page processes.
var script = document.createElement(‘script’);
script.type = “text/javascript”;
script.src = “file1.js”;
document.getElementsByTagName(“head”)[0].appendChild(script);
34. SCRIPT INJECTION
• Use Ajax to get script
• Can control when script is parsed/executed
• JavaScript must be served from same domain
var xhr = XMLHttpRequest();
xhr.open(“get”, “file.js”, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
var script = document.createElement(“script”);
script.type = “text/javascript”;
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
};
xhr.send(null);
35. RECOMMENDED
NONBLOCKING LOAD
• Include the code necessary to dynamically load the the rest
of the JS required for page init
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
loadScript("the-rest.js", function(){
Application.init();
});
</script>
Optionally include the loadScript function directly in the page
36. REAL WORLD USE
• This
technique is used by many JavaScript libraries including
YUI and Dojo.
<script type="text/javascript"
src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js"></script>
YUI().use("dom", function(Y){
Y.DOM.addClass(document.body, "loaded");
});
Dynamically loads the DOM utility and calls ‘loaded’ function
when loading is complete.
37. OPEN SOURCE JS LOADERS
Lots of libraries available to help with the JS load problem:
• ControlJS
• LabJS
• RequireJS
38. CONTROLJS
• Progessive Enhancement is core to ControlJS philosophy
• downloads scripts asynchronously
• delays script execution until aftr the page has rendered
• allows scripts to be downloaded and not executed
39. CONTROLJS
Async JS Loading
var cjsscript = document.createElement('script');
cjsscript.src = "control.js";
var cjssib = document.getElementsByTagName('script')[0];
cjssib.parentNode.insertBefore(cjsscript, cjssib);
Replace these script includes:
<script type="text/javascript" src="main.js"></script>
with:
<script type="text/cjs" data-cjssrc="main.js"></script>
40. CONTROLJS
Delayed Execution
<script data-cjsexec=false type="text/cjs" data-cjssrc="jquery.min.js"></script>
<script data-cjsexec=false type="text/cjs" data-cjssrc="fg.menu.js"></script>
Execute at a later time...
examplesbtn.onclick = function() {
CJS.execScript("jquery.min.js");
CJS.execScript("fg.menu.js", createExamplesMenu);
};
42. SUMMARY
• Browser UI and JS share a single thread
• Code execution blocks other browser processes such as UI
painting
• Put script tags at the bottom of page
• Load as much JS dynamically as possible
• Minimize and compress your JS
47. DOCUMENT OBJECT MODEL
• Document Object Model (DOM) is a language
independent API for working with HTML and XML
• DOM Scripting is expensive and a common cause of
performance problems
48. DOM/JS ISOLATION
• DOM and JavaScript implementations are independent
of each other in all major browsers
• This causes overhead performance costs as these two
pieces of code must interface
JavaScri
DOM
pt
Minimize how many times you cross this bridge
49. BAD DOM SCRIPTING
Bad (we cross the bridge 1500 times!)
function innerHTMLLoop() {
for (var count = 0; count < 1500; count++) {
document.getElementById('here').innerHTML += 'a';
}
}
Good (we cross the bridge 1 time)
function innerHTMLLoop2() {
var content = '';
for (var count = 0; count < 1500; count++) {
content += 'a';
}
document.getElementById('here').innerHTML += content;
}
50. REPAINTS AND REFLOWS
A reflow occurs whenever you change the
geometry of an element that is displayed on the
page.
A repaint occurs whenever you change the
content of an element that is displayed on the
screen.
These are both expensive operations in terms of performance!
51. AVOIDING REPAINTS/REFLOWS
This will potentially cause 3 repaints/reflows...
var el = document.getElementById('mydiv');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';
Better... 1 repaint/reflow
var el = document.getElementById('mydiv');
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';
or...
var el = document.getElementById('mydiv');
el.className = 'active';
53. TOOLS ARE YOUR FRIEND
The right tools can help a developer identify and fix
performance problems related to client-side behaviour.
Profiling
Timing functions and operations during script
execution
Network Analysis
Examine loading of images, stylesheets, and scripts
and their effect on page load and rendering
62. SHOWSLOW
collects:
YSlow
PageSpeed
Dyantrace
Integrate with
WebPageTest
to run tests.
http://www.showslow.com/
63. WEB PAGE TEST
Tests against
dedicated nodes.
Agent deployed
on test nodes.
Image capture
http://www.webpagetest.org/
64. BOOMERANG
<html>
<head>
JavaScript library for Real
<script src="boomerang.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
User Monitoring (RUM)
beacon_url: "http://yoursite.com/path/to/beacon.php"
});
BOOMR.plugins.RT.startTimer("t_head");
</script>
Released by Yahoo in <title>page title</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
2010 <link rel="stylesheet" type="text/css" href="../boomerang-docs.css">
<script type="text/javascript">
BOOMR.plugins.RT.endTimer("t_head").startTimer("t_body");
</script>
</head>
Beacon metrics to a <body>
page body here
central server <script type="text/javascript">
BOOMR.plugins.RT.endTimer("t_body");
</script>
</body>
</html>
https://github.com/yahoo/boomerang
65. W3C WEB PERFORMANCE
New W3C Working Group focused on web performance.
First recommendations:
Navigation Timing - how fast does the page load
Resource Timing - how fast do page resources load
User Timing - user defined custom timing events
http://www.w3.org/2010/webperf/
68. RESOURCES
• Yahoo Exceptional Performance
http://developer.yahoo.com/performance/
• Google Web Performance
http://code.google.com/speed
• JavaScript: The Good Parts by Douglas Crockford
• High Performance JavaScript by Nicholas Zakas
• Even Faster Websites by Steve Souders
• Steve Souders Site
http://www.stevesouders.com
• John Resig’s Blog
http://www.ejohn.org