Prepared using :

Presentation By Anup Hariharan Nair

Date: 16 April 2011

http://HiFiCoding.com/

Presentation Tier Optimizations

Optimization of Web UI layer

Why bother ?

Google found that the page with 10 results took 0.4 seconds to generate. The page with 30 results took 0.9 seconds. Half a second delay caused a 20% drop in traffic. Half a second delay killed user satisfaction.

In A/B tests, Amazon tried delaying the page in increments of 100 milliseconds and found that even very small delays would result in substantial and costly drops in revenue.

Reference : http://www.codinghorror.com/blog/2011/06/performance-is-a-feature.html

Focus of Web Optimization

Organizations focus process optimization of Data Tier Application Tier

Presentation Tier is usually ignored. Presentation Tier is responsible for more than 30% of Client/Server

application performance

Who is to be blamed? In early days, there were no articles on patterns or engineering practices to

optimize the Presentation Tier. Still need specialists to Understand the loading pattern of HTTP-Response objects. Optimize the Load pattern of HTTP-Response objects.

What should be considered?

Optimizing Presentation Tier requires an engineering approach.

Two most important aspects of optimizing the presentation Tier are Reduce HTTP Requests

• Reducing the total number of HTTP Requests made to the server by the Clients browser.

Optimize HTTP Response Objects• Reduce the total HTTP Response objects sent from server to client.• Reduce the size of response objects.• Re-Engineer the load pattern for response objects.

What should be considered?

Total size of data to be loaded on HTTP calls. (Minify Html, CSS and JavaScript to reduce size of response objects)

Time it takes for the browser to read (Parse) the mark-up language, and client side scripts. (W3C compliant mark-up are rendered quickly by the Web-Browser.)

Number and size of the multimedia contents like video, photo, and flash.

HTTP server Caching of repeated object requests.

Number of Content Delivery Networks (CDN) available  from the point of HTTP request.

JavaScript Development Patterns

Load JavaScript On-Demand.

Compress Your JavaScript (minify files)

Place JavaScript at end of Mark-up.

Load JavaScript On-Demand.

<script type='text/javascript' src='snip.js'></script>Vs.

If(event ==“true”){var script = document.createElement('script');script.type = 'text/javascript';script.src = 'snip.js'; /*Only import the Library on the occurrence of an event.*/document.getElementsByTagName('head')[0].appendChild(script); }

/* import with a random query parameter to avoid caching */function $importNoCache(src){ var ms = new Date().getTime().toString(); var seed = "?" + ms; $import(src + seed);}

Compress (minify) JavaScript

Analyze your code and make sure it is well-formatted.

Compress your JavaScript. Remove spaces, comments and shorten variable names where appropriate. We should pack the original JavaScript and deploy the packed version to

website.

Standard Naming Convention : “.min” in file name usually a prefix just before the extension.

Minify JavaScript

Before Minifying:function todaydate(){

/*Variable declaration*/var today_date= new Date();var myyear=today_date.getYear();var mymonth=today_date.getMonth()+1 /*No semicolon, but will work */var mytoday=today_date.getDate();

/*Action*/document.write(myyear+"/"+mymonth+"/"+mytoday)

}

--------------------------------------------------------------------------------------------------------------After Minifying:function todaydate(){var today_date= new Date(); var myyear=today_date.getYear();var mymonth

=today_date.getMonth()+1; var mytoday=today_date.getDate(); document.write(myyear+"/"+mymonth+"/"+mytoday)}

-----------------------------------------------------------------------------------------------------------------Standard Naming Convention Sample :

jquery-1.6.2.js (Source version or Developer version) jquery-1.6.2.min.js (Minified version or Deployment Version)

Place your JavaScript at the end of your HTML.

Place your JavaScript at the end of your HTML file if possible. Notice how Google analytics and other statistics tracking

software wants to be right before the closing </body> tag. This allows the majority of page content (like images, tables, text)

to be loaded and rendered first by the Parser. The user sees content loading, so the page looks responsive. At this point, the heavy JavaScript's can begin loading near the

end. Online SEO : Google/MSN/Yahoo AI crawling Bots also prefer

this pattern. Search Engine Crawlers only index Mark-up. They do not index Client Side Scripts.

Place your JavaScript at the end of your HTML.

Sample

<html><head></head><body>

<!--Some Body Code--><button type="button" onclick="displayDate()">Display Date</button><!--Some Body Code-->

<script type="text/javascript">function displayDate(){document.getElementById("demo").innerHTML=Date();}

</script><script src="myjs.js"></script></body></html>

Load Media On-Demand

Yahoo.com loads images when they are in browsers viewable zone.

jQuery-Images-OnDemand Library. http://code.google.com/p/jquery-images-ondemand/ Library takes care of most of the operation. All that is needed is to append an additional CSS Class to the “img” object as

follows :

<img class=‘class1 img-ondemand' longdesc='my_pic.jpg' src='pix.gif' />

This is a very simple script to load images On-Demand. Using this you avoid to load all page images and get a faster web page. Also

adds delayed load of Image objects. With HTML5, Multimedia objects can also be extracted using jQuery or DOM,

as they can be specified by Tags instead of embedding using an OBJECT Tag.

CSS Sprites

To reduce the number of requests the browser makes to the server, some web designers combine numerous small images or icons into a larger image called a sprite sheet or tile set.

CSS is used to select the parts of the composite image to display at different points in the page. If a page has ten 1 kB images, they can be combined into one 10 kB image, downloaded with a single HTTP request, and then positioned with CSS.

Reducing the number of HTTP requests can make a Web page load much faster. In this usage, the sprite sheet format that had been developed for use in game and animation engines is being applied to static images

Before CSS Sprite

CSS Code : /* Three different images.*/

#item1 a:hover{background: url('img_1.gif')}

#item2 a:hover{background: url('img_2.gif') }

#item3 a:hover{background: url('img_3.gif') }

HTML/XHTML Code : <div id=“item1”> </div> <!—This will show the first image-->

<div id=“item2”> </div> <!—This will show the second image-->

<div id=“item3”> </div> <!—This will show the third image-->

After CSS Sprite

CSS Code : /*One image. Parts of the image are referenced.*/

#item1 a:hover{background: url('img_sprites.gif') 0 -45px;}

#item2 a:hover{background: url('img_sprites.gif') -47px -45px;}

#item3 a:hover{background: url('img_sprites.gif') -91px -45px;}

HTML/XHTML Code : <div id=“item1”> </div> <!—This will show the first image-->

<div id=“item2”> </div> <!—This will show the second image-->

<div id=“item3”> </div> <!—This will show the third image-->

CSS Sprites – Merged Image

Horizontal Merge

Vertical Merge

Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size.

Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.

HTTP Cache

Oldest trick of the trade

HTTP Caching – ETag (Entity tags)

Comparing versions with the modification time generally works, but could lead to problems.

What if the server’s clock was originally wrong and then got fixed? What if daylight savings time comes early and the server isn’t updated? The caches could be inaccurate.

ETags to the rescue. An ETag is a unique identifier given to every file. It’s like a hash or fingerprint: every file gets a unique fingerprint, and if you change the file (even by one byte), the fingerprint changes as well.

Instead of sending back the modification time, the server can send back the ETag (fingerprint):

Etag example : ead145f File Contents could be an image, HTML, CSS, JavaScript..)

The ETag can be any string which uniquely identifies the file. The next time the browser needs logo.png, it can have a conversation like this

HTTP Caching – ETag (Entity tags)

Etag Caching

CDN

A content delivery network or content distribution network (CDN) is a system of computers containing copies of data, placed at various points in a network so as to maximize bandwidth for access to the data from clients throughout the network.

A client accesses a copy of the data near to the client, as opposed to all clients accessing the same central server, so as to avoid bottlenecks near that server.

Content types include web objects, downloadable objects (media files, software, documents), applications, real time media streams, and other components of internet delivery (DNS, routes, and database queries).

Not Replicated Servers.

Commercial CDN

Akamai Technologies Amazon CloudFront AT&T Bitgravity CDNetworks Chinacache Cotendo EdgeCast Networks Highwinds Network Group Internap Level 3 Communications Limelight Networks Microsoft Windows Azure CDN Mirror Image Internet NetDNA

Runtime – HTTP Compressions

Runtime HTTP Compressions

Configuring HTTP Compression in IIS http://technet.microsoft.com/en-us/library/cc771003%28WS.10%29.aspx

Note : It is not enabled by default.

Configuring HTTP GZIP Compression in APACHE http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-co

mpression/

Note : Need to install GZIP modules and configure with Apache.

Valid W3C compliant page

http://validator.w3.org/

Not just for cross browser rendering & validation.

Helps browsers to quickly read the documents & render it without getting confused. This avoid a delay in page processing at clients browser.

How do I test my Application Performance?

Online Test (Online Testing) WebPageTest.ORG from AOL.

• URL : http://www.webpagetest.org It provides :

• Waterfall Load Pattern • HTTP Response Object Load Pattern and time.• Optimization Checklist.

Test on Workstation (Offline Testing) YSlow plug-in for Firebug in Firefox, from Yahoo Developer Network. URL : http://developer.yahoo.com/yslow/

• Does not provide Waterfall Load Pattern• Only provides Optimization Checklist.

Reference

Yahoo Client/Server Developer reference http://developer.yahoo.com/performance/rules.html

Google Client/Server Developer reference http://code.google.com/speed/page-speed/docs/rules_intro.html

W3C standards compliant Web sites http://www.w3.org/QA/2002/07/WebAgency-Requirements