Presentation Tier optimizations

Presentation Tier
Optimizations
Optimization of Web UI layer
Presentation By
Anup Hariharan Nair
Date: 16 April 2011
http://HiFiCoding.com/

Prepared using :

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>


<button type="button" onclick="displayDate()">Display Date</button>


<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
 Arranging the images in the sprite Horizontal Merge
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.

Vertical Merge

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-
compression/
 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

Presentation Tier optimizations

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Presentation Tier optimizations (20)

Recently uploaded (20)

Presentation Tier optimizations