Building high performance web apps.

Building High Performance Web Apps.
Essential rules and common practice
Author: Arshak Movsisyan
Email: arshak.movsissian@gmail.com

5 Rules For High Performance
1. Use a Content Delivery Network (CDN)
2. Add an Expires or a Cache-Control Header
3. Work with Scripts (Make External, Position, Group,
Minify, Compress)
4. Reduce the Number of DOM Elements
5. Develop Smart Event Handlers

1. Use a CDN
What is CDN?
CDN is a collection of web servers distributed across multiple locations to
deliver content more efficiently to users. E.g. CloudFlare, Coral Content
Distribution Network, Incapsula, etc.
How CDN works?
The server with the fewest network hops or the server with the quickest
response time is chosen.
Results
Researches showed that it improves end-user response times by 20% or
more, meanwhile 80-90% of the end-user response time is spent
downloading all the components in the page: images, stylesheets, scripts,
etc.

2. Add an Expires or a Cache-Control Header
For static components: implement "Never expire" policy by setting far
future Expires header.
Example: Expires: Thu, 15 Apr 2020 20:00:00 GMT
But keep in mind, if you use a far future Expires header you have to change the component's filename
whenever the component changes.
For dynamic components: use an appropriate Cache-Control header to help the
browser with conditional requests
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
</FilesMatch>
This goes in your root .htaccess file but if you have access to httpd.conf that is better.

3. Work with Scripts - Make JavaScript and CSS External
Why making scripts external is faster?
Using external files generally produces faster pages because the JavaScript
and CSS files are cached by the browser.
Results
External files are cached by the browser, the size of the HTML document is
reduced without increasing the number of HTTP requests.

3. Work with Scripts – Positioning JavaScript and CSS
How do we generally position scripts?
<html>
<head>
<title>Positioning Scripts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src=“//cdnjs.cloudflare.com/js/script_1.js"></script>
</head>
<body>
<p>Not a good practice!</p>
</body>
</html>

Code Execution Flow
Each file must wait until the previous one has been downloaded and executed before the next download can
begin. In the meantime, the user is met with a blank screen as the files are being downloaded one at a time.
This is the behavior of most major browsers today.
How it works.

What is the recommended solution!
it’s recommended to place all <script> tags as close to the bottom of the <body> tag as possible so as not to
affect the download of the entire page.
For example:
<html>
<head>
<title>Positioning Scripts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Good practice!</p>
</body>
</html>

3. Work with Scripts – Group JavaScript and CSS
Downloading one single 100 KB file will be faster than downloading four 25 KB files. Instead of three separate
requests you could do the following and utilize a single request using CDNJS Combo Loader or heeep.it*.
<script type="text/javascript“ src=“//cdnjs.cloudflare.com
?js/script_1.js
&js/script_2.js
&js/script_3.js"></script>
* See more about CDNJS Combo Loader and heeep.it
<script type="text/javascript“
src=“//go.heeep.it?, js/script_1.js, js/script_2.js, js/script_3.js"></script>
CDNJS Combo Loader
heeep.it Loader

3. Work with Scripts – Minify JavaScript and CSS
Minifying is the process of removing unnecessary characters (comments, space, newline and tab) from code. As
a result it reduce file size thereby improving load times.
There are two popular tools for minifying JavaScript code are JSMin and YUI Compressor.
Before:
// 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
// Mozilla 4. Netscape 6 claims to be version 5.
var is =
{
ie: navigator.appName == 'Microsoft Internet Explorer',
java: navigator.javaEnabled(),
ns: navigator.appName == 'Netscape',
ua: navigator.userAgent.toLowerCase(),
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;
}
After:
var is={ie:navigator.appName=='Microsoft Internet
xplorer',java:navigator.javaEnabled(),ns:navigator.appName=='Netscape',ua:navigator.userAgent.toLowerCase(),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;}

3. Work with Scripts – Compress Content
How we do now (Server without gzip)
Compression is a simple, effective way to save bandwidth and speed up your site.
What is compression?
1. Browser: GET /index.html
2. Server: Ok, let me see if index.html is lying around...
3. Server: Found it! Here's your response code (200 OK) and I'm sending the file.
4. Browser: 100KB? Vay qu ara... waiting, waiting... ok, it's loaded.

How we should do (Server with gzip)
Compression is a simple, effective way to save bandwidth and speed up your site.
What is compression?
1. Browser: Hey, can I GET index.html? I'll take a compressed version if you've got it.
2. Server: Let me find the file... yep, it's here. And you'll take a compressed version? Awesome.
3. Server: Ok, I've found index.html (200 OK), am zipping it and sending it over.
4. Browser: Great! It's only 10KB. I'll unzip it and show the user.
The formula is simple: Smaller file = faster download = happy user.

1. Browser: change your .htaccess file
2. Server: For IIS enable compression in the settings
So when a file's too big, just zip it, but how?
Results
This can reduce the size of pages and style sheets by up to 70%!
http://www.whatsmyip.org/http-compression-test/

4. Reduce the Number of DOM Elements
A complex page means more bytes to download and it also means slower DOM access in
JavaScript. It makes a difference if you loop through 500 or 5000 DOM elements on the
page when you want to add an event handler for example.
Overview
What should we do?
A great help with layouts are the YUI CSS utilities: grids.css can help you with the overall
layout, fonts.css and reset.css can help you strip away the browser's defaults formatting.
This is a chance to start fresh and think about your markup, for example use <div>s only
when it makes sense semantically, and not because it renders a new line.
Just type in Firebug's console: document.getElementsByTagName('*').length
How to check you Dom elements number
How many DOM elements should we have on the sigle page
It is tested by Yslow and goes green when count of DOM Element is up to 1800. But there
is no set standard as to how many DOM elements are too many. Check other similar pages
that have good markup. Eg. Yahoo! Home Page is a pretty busy page and still under 700
elements (HTML tags).

5. Develop Smart Event Handlers
Generally we attach event handler to different elements of the DOM tree. Which makes
page dummy because of handlers execution. Instead, the event handler can be added to
one parent. This approach is called Event Delegation.
Overview
How it works?
In DOM tree Events bubble up so you'll be able to catch the event and figure out which
element has fired an event.
<ul id="parent-">
<li id="child-1">Item 1</li>
</ul>
Example
<script>
document.getElementById("parent-list").addEventListener("click“, function(e)
{
if(e.target && e.target.nodeName == "LI")
{
console.log("List item ", e.target.id.replace(“child-")," was clicked!");
}
});
</script>

Summary
1. CDN deliver content by choosing server with the quickest response time from
different geographical locations. It will improve end-user response time up to
20%.
2. By using the Expires header you avoid unnecessary HTTP requests on
subsequent page views. Expires headers are most often used with images, but
they should be used on all components including scripts.
3. Make JavaScript and CSS external, minify them and set up GZIP compress
settings. Keep JavaScript on the bottom, CSS on the top. These will improve
your application performance up to 70%.
4. Use tags only when it makes sense semantically, and not because it renders a
new line. Reducing DOM Elements means downloading less bytes and also
higher DOM access in JavaScript.
5. Using Event Delegation is a good approach. You will take advantage of Event
Bubbling and will minimize the use of separate handlers for different
elements. This will reduce execution time and speed up page responsiveness.

References
1. “High Performance JavaScript, by Nicholas C. Zakas. Copyright 2010 Yahoo!,
Inc., 978-0-596-80279-0.”
2. http://developer.yahoo.com/performance/rules.html
3. http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-
compression/
4. http://gtmetrix.com/enable-gzip-compression.html
5. http://www.whatsmyip.org/http-compression-test/
6. https://developers.google.com/speed/articles/gzip
7. http://betterexplained.com/articles/speed-up-your-javascript-load-time/
Author: Arshak Movsisyan
Email: arshak.movsissian@gmail.com

Building high performance web apps.

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Building high performance web apps.

Similar to Building high performance web apps. (20)

Recently uploaded

Recently uploaded (20)

Building high performance web apps.