High Performance Ajax Applications

High Performance Ajax Applications

Siarhei Barysiuk
s.barysiuk@sam-solutions.net

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
1. Use a Content Delivery Network
2. Add an Expires or a Cache-Control Header
3. Gzip Components
4. Conﬁgure 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 quot;Never expirequot; policy by setting far future Expires header.

For dynamic components:
Use an appropriate Cache-Control header to help the browser with conditional
requests.

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
ﬁlename whenever the component changes.

yahoo_2.0.6.js
yahoo.js?ver=2.0.6

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-deﬂate

IIS

...

Server: Conﬁgure ETags
GET /i/yahoo.gif HTTP/1.1

HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: quot;10c24bc-4ab-457e1c1fquot;
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: quot;10c24bc-4ab-457e1c1fquot;

HTTP/1.1 304 Not Modified

Server: Conﬁgure 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.

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 ﬁles
• 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: quot;What's absolutely
required in order to render the page initially?quot;
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

HTTP/1.1 spec suggests that browsers download two components in parallel
per hostname.

Downloading 2 Downloading 4
components in components in
parallel parallel

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

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;

2x

Response times for various cookie sizes

Analysis of Cookie Sizes across the Web

Total Cookie Sizes *(for home page)

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

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 ? quot;#B8D4FFquot; : quot;#F08A00quot; );

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 ﬁlter aims to ﬁx 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

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 speciﬁcation 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 ﬁles, 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
Miniﬁcation 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 ﬁle 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 quot;ofﬂinequot; and then add them to the tree
•
Avoid ﬁxing 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=quot;containerquot; id=quot;containerquot;>
<div class=quot;colorquot; style=quot;background-color:#000033quot;></div>
<div class=quot;colorquot; style=quot;background-color:#0000FFquot;></div>

var c = document.getElementById(quot;containerquot;)
c.addEventListener(quot;clickquot;, function(e){
<div class=quot;colorquot; style=quot;background-color:#00FF00quot;></div>
alert(e.target.style.backgroundColor)
},false);
<div class=quot;colorquot; style=quot;background-color:#FF0000quot;></div>

<div class=quot;colorquot; style=quot;background-color:#FFFFFFquot;></div>
</div>

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

var Foo3 = function() {};
Foo3.prototype.bar = function() {return false};

var Foo = function() {};
Foo.prototype = new Foo3();

var Foo2 = {
bar: function() {
return false;
}
}


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=quot;quot;;
for(i=0;i<10000;i++){
for(i=0;i<10000;i++){
s[i] = quot;xquot;;
s+=quot;xquot;;
}
}
s=s.join(quot;quot;);

100 000 iterations

3438 ms 157 ms

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=quot;100quot; height=quot;100quot; src=quot;mycat.jpgquot; alt=quot;My Catquot; />

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

High Performance Ajax Applications

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to High Performance Ajax Applications

Similar to High Performance Ajax Applications (20)

Recently uploaded

Recently uploaded (20)

High Performance Ajax Applications