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 ...
What is general User expectation                                   General:• 47% of web users expect a page load of 2 sec...
Performance Poverty Line                                  http://www.webperformancetoday.com/2012/06/05/web-performance-p...
First things first… Do you browse your websites on a low-                                            end consumer grade ...
#1 Split a class into multiple             javascript files                                This is not what people tell ...
Split a class into multiple            javascript files                                                              var ...
Split a class into multiple             javascript files                                     Before.js                   ...
Microsoft Research Project:             Doloto                          Doloto analyzes your website and splits the  jav...
#2 Stub the Functions Which    Arent Called During Initial Load                                                          ...
#3 Improve performance of pages     loading data via AJAX calls                           Problem   The initial page lo...
Embed JSON as part of page output                               •   Deliver initial data inside a script block.•   As soo...
Mix server side JSON and client           side AJAX calls                             Spend max     1 sec on server prep...
Loading js, css while fetching data on server                    
#4 Render initial data as          html from server                                     Instead of using scripts to rend...
#5 Render placeholder of    content loaded dynamically                                Generate placeholder for content w...
#6 Grow the page vertically                              • Content should grow uniformly, vertically. Do not shrink any  ...
#7 Don’t combine Javascripts!                                   Everyone tells you to combine all your Javascripts into ...
Bonus #8: Reflection on  Connection View                                          CSS                                Larg...
That’s all folks!                    Do not deliver a giant combined javascript to browser during  home page load, no ma...
Upcoming SlideShare
Loading in …5
×

7 tips for javascript rich ajax websites

2,545 views
2,345 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,545
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
10
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

7 tips for javascript rich ajax websites

  1. 1. Omar AL ZabirChief Architect, SaaS Platform, BT omaralzabir.com twitter.com/omaralzabir
  2. 2. Stories from Pageflakes 
  3. 3. Dropthings – open source Start Page 
  4. 4. Droptiles 
  5. 5. 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/
  6. 6. 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/
  7. 7. Performance Poverty Line http://www.webperformancetoday.com/2012/06/05/web-performance-poverty-line/
  8. 8. 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
  9. 9. #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, …
  10. 10. 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.
  11. 11. 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>
  12. 12. 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.
  13. 13. #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.
  14. 14. #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.
  15. 15. 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>
  16. 16. 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.
  17. 17. Loading js, css while fetching data on server 
  18. 18. #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.
  19. 19. #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.
  20. 20. #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.
  21. 21. #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.
  22. 22. 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/
  23. 23. 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/

×