presentation tier optimizations
DESCRIPTION
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.TRANSCRIPT
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 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