7 tips for javascript rich ajax websites
Upcoming SlideShare
Loading in...5

7 tips for javascript rich ajax websites






Total Views
Views on SlideShare
Embed Views



1 Embed 13

https://twitter.com 13



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

7 tips for javascript rich ajax websites 7 tips for javascript rich ajax websites Presentation Transcript

  • Omar AL ZabirChief Architect, SaaS Platform, BT omaralzabir.com twitter.com/omaralzabir
  • Stories from Pageflakes 
  • Dropthings – open source Start Page 
  • Droptiles 
  • Why Page load time matters? Facebook: Facebook pages that are 500ms slower result in a 3% drop-off in traffic, 1000ms is 6% drop-offAmazon: If Amazon increased page load time by +100ms they lose 1% of salesGoogle: If Google increased page load by +500 ms they get 25% fewer searches. http://www.guypo.com/business/17-statistics-to-sell-web-performance-optimization/
  • What is general User expectation General:• 47% of web users expect a page load of 2 seconds or less• 14% of users will start shopping at a different site if a page loads too slow• 40% of users will abandon a website that takes more than 3 seconds to load• 64% of shoppers who are dissatisfied with their site visit will go somewhere else to shop next time• 52% of online shoppers claim that quick page loads are important for their loyalty to a site http://www.guypo.com/business/17-statistics-to-sell-web-performance-optimization/
  • Performance Poverty Line http://www.webperformancetoday.com/2012/06/05/web-performance-poverty-line/
  • First things first… Do you browse your websites on a low-  end consumer grade laptop with only 1 GB RAM, one or two cores, heavily fragmented hard disk, browser cache full of gigabytes of trash? Do you browse your website on a browser infested with toolbars, adbots, malwars? Do you browse your website with super slow antivirus and internet security products? Like Norton, McAfee? Do you browse your website from the lowest broadband packages available in the market? http://www.codinghorror.com/blog/2007/02/choosing-anti-anti-virus-software.html
  • #1 Split a class into multiple javascript files  This is not what people tell you to do, I know. Problem:  Like stylesheets, scripts must be downloaded, parsed, and executed before the browser can begin to render a web page.  Even if a script is contained in an external file that is cached, processing of all elements below the <script> tag is blocked until the browser loads the code from disk and executes it.  For some browsers, the situation is worse than for stylesheets: while JavaScript is being processed, the browser blocks all other resources from being downloaded.  For AJAX-type applications that use many bytes of JavaScript code, this can add considerable latency. Loading jquery, jquery UI, plugins, frameworks, site specific code, …
  • Split a class into multiple javascript files  var VeryImportantClass = { Solution importantMethod: function() {  Minimize initial DoSomething1(); DoSomething2(); Javascript payload to DoSomething3(); absolute minimum. DoSomething4(); },  Split a class into unimportantMethod: function() { multiple files if it has DoSomething1(); to be a single class. DoSomething2(); DoSomething3(); Functions used before DoSomething4(); or during onload is in } }; one file, everything else in another file.
  • Split a class into multiple javascript files Before.js After.jsvar VeryImportantClass = { VeryImportantClass.unimportantMethod importantMethod: function() = function() { { DoSomething1(); DoSomething1(); DoSomething2(); DoSomething2(); DoSomething3(); DoSomething3(); DoSomething4(); DoSomething4(); } }}; <script src=“before.js” ></script> <body> … </body> <script defer=“defer” scr=“after.js”></script>
  • Microsoft Research Project: Doloto  Doloto analyzes your website and splits the javascripts into two parts – required for page load and not required for page load.
  • #2 Stub the Functions Which Arent Called During Initial Load  Before.js Problem var VeryImportantClass = {  Moving functions that aren’t importantMethod: function() { necessary during onload might DoSomething1(); cause javascript error, if some DoSomething2(); mousemove or click event }, unimportantMethod: function() handler tries to call them { before they are loaded. // No code here <div } }; onmousemove=“unimportantM ethod()” /> After.js Solution VeryImportantClass.unimportantMethod = function()  Create stubs. Event handlers { calling stubs won’t cause ... Javascript error. Just nothing ... } will happen.
  • #3 Improve performance of pages loading data via AJAX calls  Problem  The initial page load does not show any content to the user.  On page load complete event, you make webservice calls to load initial data in order to render page content. Until then, the page is more or less empty.  The initial calls only happen when the necessary javascripts are loaded. This causes perceived slowness. Solution  Embed JSON needed for initial page loading as part of the page output.
  • Embed JSON as part of page output • Deliver initial data inside a script block.• As soon as necessary javascripts load, it will use the data inside script block instead of making webservice calls.• Problem: Gathering all data on server means nothing happening on browser. <head> <script type="text/javascript"> var data = {<%= GenerateJSON() %>}; </script> <body> . . <script src=“AbsoluteMinimal.js”></script> <script type="text/javascript"> render(data); </script>
  • Mix server side JSON and client side AJAX calls  Spend max 1 sec on server preparing the embedded JSON.  Take data that has been loaded within 1 sec and serialize into JSON.  In parallel, load and cache the rest of the data for the AJAX call to pickup. Embed only the JSON that renders the visible part of the screen. Problem: For 1 sec user stares at blank screen. Nothing happening on browser.
  • Loading js, css while fetching data on server 
  • #4 Render initial data as html from server  Instead of using scripts to render page from embedded JSON, render the html directly from server. User gets the page as if it’s a static page. No waiting for JS to download. No waiting for Webservice calls. There’s nothing faster than this.
  • #5 Render placeholder of content loaded dynamically  Generate placeholder for content where further data is loaded dynamically. This gives a feeling that the page is building progressively and gives better perceived performance.
  • #6 Grow the page vertically • Content should grow uniformly, vertically. Do not shrink any placeholder or element on the page. It causes a disturbing rendering experience.
  • #7 Don’t combine Javascripts!  Everyone tells you to combine all your Javascripts into a combined file. Don’t! Instead of one large combined js file across the entire website, create smaller grouped js files. For ex,  jQueryStuffCombined.js  Jquery, jqueryui  jQueryPluginsCombined.js  Jquery validator, animations, effects  Thirdparties  KnockoutJS, UnderscoreJS  MyCommonStuff.js Don’t use your homepage to cache all JS you would ever need.
  • Bonus #8: Reflection on Connection View  CSS Large combined .eot! JS Suboptimal distribution of link and script tags Static SSL content handshake loading too too slow late http://www.webpagetest.org/
  • That’s all folks!  Do not deliver a giant combined javascript to browser during home page load, no matter who says so, even if it is Steve Souders. For homepage, make special combined javascript that delivers absolute minimum scripts. It’s hard, extra maintenance effort, but worth it. Every 500ms saving in home page load can retain 20% more users. Difference between 3 sec and 4 sec is life changing. Do not use your homepage to download and cache as much stuff on user’s browser as possible. It is the other way around. Learn more about Production Performance and Scalability ideas from: http://omaralzabir.com/scaling-asp-net-websites-from- thousands-to-millionslidnug/