Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie 7 tips for javascript rich ajax websites
Ähnlich wie 7 tips for javascript rich ajax websites (20)
7 tips for javascript rich ajax websites
- 1. Omar AL Zabir Chief Architect, SaaS Platform, BT omaralzabir.com twitter.com/omaralzabir
- 3. Dropthings – open source Start Page
- 4. Droptiles
- 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-off Amazon: If Amazon increased page load time by +100ms they lose 1% of sales Google: 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. 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. Performance Poverty Line http://www.webperformancetoday.com/2012/06/05/web-performance-poverty-line/
- 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. #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. 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. Split a class into multiple javascript files Before.js After.js var 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. 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. #2 Stub the Functions Which Aren't 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. #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. 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. 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. Loading js, css while fetching data on server
- 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. #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. #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. #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. 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. 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/