High Performance Ajax Applications
Siarhei Barysiuk
s.barysiuk@sam-solutions.net

Our roadmap

Introduction: What will we cover today?
• How to speed up site loading time?
• How to speed up JavaScript performance?
• Which tools use to do it?

Best Practices from Yahoo!
34 best practices divided into 7 categories.
• Content
• Server
• Cookie
• CSS
• JavaScript
• Images
• Mobile

Server

Server
1. Use a Content Delivery Network
2. Add an Expires or a Cache-Control Header
3. Gzip Components
4. Configure ETags
5. Flush the Buffer Early
6. Use GET for AJAX Requests

Server: Use a CDN
Performance Golden Rule. “80-90% of the end-user response time is spent
downloading all the components in the page: images, stylesheets, scripts, Flash,
etc.”
20% end-user response time improvement at Yahoo!

Server: Add an Expires or a Cache-Control Header
Static content:
Implement \"Never expire\" policy by setting far future Expires header.
For dynamic components:
Use an appropriate Cache-Control header to help the browser with conditional
requests.

Server: Add an Expires or a Cache-Control Header
A web server uses the Expires header in the HTTP response to tell the
client how long a component can be cached.
Expires: Thu, 15 Apr 2010 20:00:00 GMT
If you use a far future Expires header you have to change the component's
filename whenever the component changes.
yahoo_2.0.6.js
yahoo.js?ver=2.0.6

Server: Add an Expires or a Cache-Control Header
Loading http://www.yahoo.com with
an empty cache a full cache

Server: Gzip Components
Accept-Encoding: gzip, deflate
Content-Encoding: gzip

Server: Gzip Components
Gzipping generally reduces the response size by about 70%.
Apache 1.3 mod-gzip
Apache 2.0 mod-deflate
IIS
...

Server: Configure ETags
GET /i/yahoo.gif HTTP/1.1
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: \"10c24bc-4ab-457e1c1f\"
Content-Length: 12195
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: \"10c24bc-4ab-457e1c1f\"
HTTP/1.1 304 Not Modified

Server: Configure ETags
Not very good for cluster environment.
The end result is ETags generated by Apache and IIS for the exact same
component won't match from one server to another.

Server: Use GET for AJAX Requests
POST through XMLHttpRequest is a two-step process:
• Sending headers
• Sending data
So it's best to use GET, which only takes one TCP packet to send (unless you
have a lot of cookies).
The maximum URL length in IE is 2K, so if you send more than 2K data you
might not be able to use GET.

Questions?

Content

Content
1. Make Fewer HTTP Requests
2. Reduce DNS Lookups
3. Avoid Redirects
4. Make Ajax Cacheable
5. Post-load Components
6. Preload Components
7. Reduce the Number of DOM Elements
8. Split Components Across Domains
9. Minimize the Number of iframes
10. No 404s

Content: Make fewer HTTP Requests
80% of the end-user response time is spent on the front-end.
Most of this time is tied up in downloading all the components in the page:
images, stylesheets, scripts, Flash, etc.
One way to reduce the number of components in the page is to simplify the
page's design.
Other techniques:
• Combined files
• CSS Sprites
• Image maps
• Inline Images

Content: Make fewer HTTP Requests
Very interesting statistics:
40-60% of Yahoo!’s users have an empty cache experience and
~20% of all page views are done with an empty cache.

Content: Make Ajax Cacheable
“asynchronous” != “instantaneous”
Do not need to request some parts each time, for example region-city list.
Use Expires and Cache-Control headers
Use additional parameter e.g. timestamp.

Content: Post-load Components
You can take a closer look at your page and ask yourself: \"What's absolutely
required in order to render the page initially?\"
The rest of the content and components can wait.
JavaScript:
• Separate out a core
• Add other components as extensions
• Load them on demand
Good for loading hidden content and images.

Content: Preload Components
You can take advantage of the time the browser is idle and request components
(like images, styles and scripts) you'll need in the future.
Several types of preloading:
• Unconditional (google.com and sprites)
• Conditional
• Anticipated (redesign)

Content: Reduce the Number of DOM Elements
complex page = more bytes for download = slower DOM access
High number of DOM elements can be a symptom that there's something that
should be improved with the markup of the page without necessarily removing
content.

Content: Reduce the Number of DOM Elements

Content: Split Components Across Domains
Splitting components allows you to maximize parallel downloads.
Make sure you're using not more than 2-4 domains because of the DNS lookup
penalty.
example.com
static1.example.com
static2.example.com

Content: Split Components Across Domains
HTTP/1.1 spec suggests that browsers download two components in parallel
per hostname.
Downloading 2 Downloading 4
components in components in
parallel parallel

Content: Split Components Across Domains
What if we use additional aliases to increase parallel downloads in our pages?
Loading an Empty HTML Document with 20 images using Various Number of Aliases

Content: Minimize the Number of iframes
It's important to understand how iframes work so they can be used effectively.
Pros:
•
Helps with slow third-party content like badges and ads
•
Security sandbox
•
Download scripts in parallel
Cons:
•
Costly even if blank
•
Blocks page onload
•
Non-semantic

Content: Minimize the Number of iframes
Demo

Questions?

Cookie

Cookie
1. Reduce Cookie Size
2. Use Cookie-free Domains for Components

Cookie: Reduce Cookie Size
HTTP cookies are used for a variety of reasons such as authentication and
personalization.
GET www.yahoo.com/index.php HTTP/1.1
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Set-Cookie: C=abcde; path=/; domain=.yahoo.com
GET / HTTP/1.1
Host: finance.yahoo.com
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; ...
Cookie: C=abcde;

Cookie: Reduce Cookie Size
2x
Response times for various cookie sizes

Cookie: Reduce Cookie Size
Analysis of Cookie Sizes across the Web
Total Cookie Sizes *(for home page)

Cookie: Reduce Cookie Size
Conclusion:
• Eliminate unnecessary cookies.
• Keep cookie sizes as low as possible to minimize the impact on the user
response time.
• Be mindful of setting cookies at the appropriate domain level so other
sub-domains are not affected.
• Set an Expires date appropriately. An earlier Expires date or none removes
the cookie sooner, improving the user response time.

Cookie: Use Cookie-free Domains for Components
When the browser makes a request for a static image and sends cookies
together with the request, the server doesn't have any use for those cookies.
Create a subdomain and host all your static components there.
static.example.com

Questions?

CSS

CSS
1. Put Stylesheets at the Top
2. Avoid CSS Expressions
3. Choose <link> over @import
4. Avoid Filters

CSS: Put Stylesheets at the Top
Moving stylesheets to the document HEAD makes pages appear to be loading
faster. This is because putting stylesheets in the HEAD allows the page to render
progressively.
The problem with putting stylesheets near the bottom of the document is that it
prohibits progressive rendering in many browsers, including Internet Explorer.
These browsers block rendering to avoid having to redraw elements of the page if
their styles change.

CSS: Avoid CSS Expressions
CSS expressions are a powerful (and dangerous) way to set CSS properties
dynamically.
background-color: expression( (new Date()).getHours()%2 ? \"#B8D4FF\" : \"#F08A00\" );
The problem with expressions is that they are evaluated more frequently than
most people expect.
Moving the mouse around the page can easily generate more than 10,000
evaluations.

CSS: Choose <link> over @import
One of the previous best practices states that CSS should be at the top in order
to allow for progressive rendering.
In IE @import behaves the same as using <link> at the bottom of the page, so it's
best not to use it.

CSS: Avoid Filters
The IE-proprietary AlphaImageLoader filter aims to fix a problem with semi-
transparent true color PNGs in IE versions < 7.
The problems:
• blocks rendering
• freezes the browser while the image is being downloaded
• increases memory consumption and is applied per element

Questions?

JavaScript

JavaScript
1. Put Scripts at the Bottom
2. Make JavaScript and CSS External
3. Minify JavaScript and CSS
4. Remove Duplicate Scripts
5. Minimize DOM Access
6. Develop Smart Event Handlers

JavaScript: Put Scripts at the Bottom
The problem caused by scripts is that they block parallel downloads.
The HTTP/1.1 specification suggests that browsers download no more than
two components in parallel per hostname.
DEFER

JavaScript: Make JavaScript and CSS External
Should JavaScript and CSS be contained in external files, or inlined in the page
itself?
Pages which reuse
External:
the same scrips and styles
• Cached by the browser
• Parallel download
Inline: Yahoo!'s front page
• Less HTTP responses

JavaScript: Minify JavaScript and CSS
Minification is the practice of removing unnecessary characters from code to
reduce its size thereby improving load times.
// is.js
// (c) 2001 Douglas Crockford
// 2001 June 3
// is
// The -is- object is used to identify the browser. Every browser edition
// identifies itself, but there is no standard way of doing it, and some of
// the identification is deceptive. This is because the authors of web
// browsers are liars. For example, Microsoft's IE browsers claim to be var is={ie:navigator.appName=='Microsoft Internet
// Mozilla 4. Netscape 6 claims to be version 5. Explorer',java:navigator.javaEnabled(),ns:navigator.appName=='Net
scape',ua:navigator.userAgent.toLowerCase(),version:parseFloat(na
var is = { vigator.appVersion.substr(21))||
ie: navigator.appName == 'Microsoft Internet Explorer', parseFloat(navigator.appVersion),win:navigator.platform=='Win32'}
java: navigator.javaEnabled(), is.mac=is.ua.indexOf('mac')>=0;if(is.ua.indexOf('opera')>=0)
ns: navigator.appName == 'Netscape', {is.ie=is.ns=false;is.opera=true;}
ua: navigator.userAgent.toLowerCase(), if(is.ua.indexOf('gecko')>=0){is.ie=is.ns=false;is.gecko=true;}
version: parseFloat(navigator.appVersion.substr(21)) ||
parseFloat(navigator.appVersion),
win: navigator.platform == 'Win32'
}
is.mac = is.ua.indexOf('mac') >= 0;
if (is.ua.indexOf('opera') >= 0) {
is.ie = is.ns = false;
is.opera = true;
}
if (is.ua.indexOf('gecko') >= 0) {
is.ie = is.ns = false;
is.gecko = true;
}

JavaScript: Minify JavaScript and CSS
Tools:
Client
Remove Remove white Rename local
safe performance
comments spaces variables
impact
Dan Edward’s negative
packer (uses eval)
YUI Compressor neutral
JSMin neutral
qooxdoo positive
generator.py (string optimizer)

JavaScript: Remove Duplicate Scripts
It hurts performance to include the same JavaScript file twice in one page.
• Extra HTTP request in IE
• Time to process duplicated scripts
Sounds stupid?
A review of the ten top U.S. web sites shows that two of them contain a
duplicated script.

JavaScript: Minimize DOM Access
Accessing DOM elements with JavaScript is slow so in order to have a more
responsive page:
•
Cache references to accessed elements
•
Update nodes \"offline\" and then add them to the tree
•
Avoid fixing layout with JavaScript

JavaScript: Develop Smart Event Handlers
Sometimes pages feel less responsive because of too many event handlers
attached to different elements of the DOM tree which are then executed too
often.
That's why using event delegation is a good approach.
<div class=\"container\" id=\"container\">
<div class=\"color\" style=\"background-color:#000033\"></div>
<div class=\"color\" style=\"background-color:#000066\"></div>
<div class=\"color\" style=\"background-color:#000099\"></div>
<div class=\"color\" style=\"background-color:#0000FF\"></div>
var c = document.getElementById(\"container\")
<div class=\"color\" style=\"background-color:#003300\"></div>
<div class=\"color\" style=\"background-color:#006600\"></div>
c.addEventListener(\"click\", function(e){
<div class=\"color\" style=\"background-color:#009900\"></div>
<div class=\"color\" style=\"background-color:#00FF00\"></div>
alert(e.target.style.backgroundColor)
},false);
<div class=\"color\" style=\"background-color:#330000\"></div>
<div class=\"color\" style=\"background-color:#660000\"></div>
<div class=\"color\" style=\"background-color:#990000\"></div>
<div class=\"color\" style=\"background-color:#FF0000\"></div>
<div class=\"color\" style=\"background-color:#333333\"></div>
<div class=\"color\" style=\"background-color:#666666\"></div>
<div class=\"color\" style=\"background-color:#999999\"></div>
<div class=\"color\" style=\"background-color:#FFFFFF\"></div>
</div>

Questions?

... more JavaScript performance

JavaScript: Reduce the amount of symbolic lookups
var globalVar = 0;
now = new Date();
(function(){
var globalVar = 0;
var i,l,localVar;
(function(){
l = arr.length;
var i=0;
for(i-0;i<arr.length;i++) {
localVar = globalVar;
globalVar++;
for(i=0;i<l;i++){
}
localVar++;
})();
}
globalVar = localVar;
})();
100 000 iterations

JavaScript: Reduce the amount of symbolic lookups
var Foo3 = function() {};
Foo3.prototype.bar = function() {return false};
var Foo = function() {};
Foo.prototype = new Foo3();
var Foo2 = {
bar: function() {
return false;
}
}

JavaScript: Reduce the amount of symbolic lookups
var foo = new Foo();
for(var j=0;j<iterations;j++) {
for(var i=0;i<iterations;i++) {
Foo2.bar();
foo.bar();
}
}
10 000 000 iterations

JavaScript: String concatenation
var i,s=[];
var i,s=\"\";
for(i=0;i<10000;i++){
for(i=0;i<10000;i++){
s[i] = \"x\";
s+=\"x\";
}
}
s=s.join(\"\");
100 000 iterations
3438 ms 157 ms

Questions?

Images

Images
1. Optimize Images
2. Optimize CSS Sprites
3. Don't Scale Images in HTML
4. Make favicon.ico Small and Cacheable

Images: Optimize Images
Tools:
imagemagick
pngcrush
jpegtran

Images: Optimize CSS Sprites
What is CSS Sprite?
http://www.google.com/images/nav_logo3.png
http://images.apple.com/global/nav/images/globalnavbg.png

Images: Optimize CSS Sprites
Demo

Images: Don't Scale Images in HTML
Don't use a bigger image than you need just because you can set the width and
height in HTML. If you need
<img width=\"100\" height=\"100\" src=\"mycat.jpg\" alt=\"My Cat\" />
then your image (mycat.jpg) should be 100x100px rather than a scaled down
500x500px image.

Images: Make favicon.ico Small and Cacheable
The favicon.ico is an image that stays in the root of your server.
Even if you don't care about it the browser will still request it, so it's better not to
respond with a 404 Not Found.
Also since it's on the same server, cookies are sent every time it's requested.
IE: When you request extra components in the onload, the favicon will be
downloaded before these extra components.
How to improve:
• Make it small (under 1K)
• Set appropriate Expires header

Questions?

Tools

Tools: Firebug

Tools:YSlow?

Tools: Drosera (WebKit)

Questions?