Your SlideShare is downloading. ×
Presentation Tier optimizations
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Presentation Tier optimizations


Published on

Organizations focus process optimization of …

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.

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Presentation Tier Optimizations Optimization of Web UI layer Presentation By Anup Hariharan Nair Date: 16 April 2011 using :
  • 2. 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 : feature.html
  • 3. 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.
  • 4. 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.
  • 5. 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.
  • 6. JavaScript Development Patterns Load JavaScript On-Demand. Compress Your JavaScript (minify files) Place JavaScript at end of Mark-up.
  • 7. 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); }
  • 8. 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.
  • 9. Minify JavaScriptBefore 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)
  • 10. 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 JavaScripts 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.
  • 11. 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>
  • 12. Load Media On-Demand loads images when they are in browsers viewable zone. jQuery-Images-OnDemand Library.   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.
  • 13. 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
  • 14. 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-->
  • 15. 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-->
  • 16. 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
  • 17. HTTP Cache Oldest trick of the trade
  • 18. 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
  • 19. HTTP Caching – ETag (Entity tags) Etag Caching
  • 20. 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.
  • 21. 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
  • 22. Runtime – HTTP Compressions Runtime HTTP Compressions  Configuring HTTP Compression in IIS   Note : It is not enabled by default.  Configuring HTTP GZIP Compression in APACHE  compression/  Note : Need to install GZIP modules and configure with Apache.
  • 23. Valid W3C compliant page 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.
  • 24. How do I test my Application Performance? Online Test (Online Testing)  WebPageTest.ORG from AOL. • URL :  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 : • Does not provide Waterfall Load Pattern • Only provides Optimization Checklist.
  • 25. Reference Yahoo Client/Server Developer reference  Google Client/Server Developer reference  W3C standards compliant Web sites 