Presentation Tier optimizations


Published on

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

No notes for slide

Presentation Tier optimizations

  1. 1. Presentation Tier Optimizations Optimization of Web UI layer Presentation By Anup Hariharan Nair Date: 16 April 2011 using :
  2. 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. 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. 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. 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. 6. JavaScript Development Patterns Load JavaScript On-Demand. Compress Your JavaScript (minify files) Place JavaScript at end of Mark-up.
  7. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. HTTP Cache Oldest trick of the trade
  18. 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. 19. HTTP Caching – ETag (Entity tags) Etag Caching
  20. 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. 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. 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. 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. 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. 25. Reference Yahoo Client/Server Developer reference  Google Client/Server Developer reference  W3C standards compliant Web sites 