7 tips for javascript rich ajax websites
TRANSCRIPT
7 hard earned lessons from a rich Single Page
Application
Omar AL ZabirChief Architect, SaaS Platform, BT
omaralzabir.comtwitter.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-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/
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/
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?
First things first…
http://www.codinghorror.com/blog/2007/02/choosing-anti-anti-virus-software.html
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, …
#1 Split a class into multiple javascript files
Solution
Minimize initial Javascript payload to absolute minimum.
Split a class into multiple files if it has to be a single class. Functions used before or during onload is in one file, everything else in another file.
Split a class into multiple javascript files
var VeryImportantClass = { importantMethod: function() { DoSomething1(); DoSomething2(); DoSomething3(); DoSomething4(); }, unimportantMethod: function() { DoSomething1(); DoSomething2(); DoSomething3(); DoSomething4(); } };
Split a class into multiple javascript files
Before.js
var VeryImportantClass = { importantMethod: function() { DoSomething1(); DoSomething2(); DoSomething3(); DoSomething4(); } };
After.js
VeryImportantClass.unimportantMethod = function(){ DoSomething1(); DoSomething2(); DoSomething3(); DoSomething4(); }
<script src=“before.js” ></script><body>…</body><script defer=“defer” scr=“after.js”></script>
Doloto analyzes your website and splits the
javascripts into two parts – required for page load and not required for page load.
Microsoft Research Project: Doloto
Problem
Moving functions that aren’t necessary during onload might cause javascript error, if some mousemove or click event handler tries to call them before they are loaded.
<div onmousemove=“unimportantMethod()” />
Solution Create stubs. Event handlers
calling stubs won’t cause Javascript error. Just nothing will happen.
#2 Stub the Functions Which Aren't Called During Initial
LoadBefore.jsvar VeryImportantClass = { importantMethod: function() { DoSomething1(); DoSomething2(); }, unimportantMethod: function() { // No code here }};
After.jsVeryImportantClass.unimportantMethod = function() {......}
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.
#3 Improve performance of pages loading data via AJAX
calls
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>
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.
Mix server side JSON and client side AJAX calls
Loading js, css while fetching data on 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.
#4 Render initial data as html from server
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.
#5 Render placeholder of content loaded
dynamically
#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.
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.
#7 Don’t combine Javascripts!
Bonus #8: Reflection on Connection View
http://www.webpagetest.org/
CSS
Large combine
d JS
.eot!
Suboptimal distribution of link and script tags
Static content loading too late
SSL handshake too slow
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/
That’s all folks!