TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications

Performance Anti-Patterns in Ajax Applications Andreas Grabner Technology Strategist dynaTrace Software Inc. [email_address]

{ “name” : “Andreas Grabner”, “blog” : “http://blog.dynatrace.com”, “worked for” : “Segue Software, Borland Software” “working for” : “dynaTrace Software”, “location”: “Boston, MA”, “Focus” : “Application Performance Management”, “Latest Project” : “dynaTrace AJAX Edition” }

What will we cover today? * Anatomy of Web 2.0 Applications * Impact of End-User Performance on your end-users * Common Performance Anti-Patterns * Real Life Examples of why pages are slow What will you learn? * Avoid common mistakes when using frameworks like jQuery, … * What are expensive operations in AJAX Apps * How to analyze your slow web pages in 5 minutes with free tools

The Anatomy of a Web 2.0 Application Server Latency Datavolume Content Construction Caching Network Browser JavaScript Layouting AJAX/XHR Calls Rendering DOM

Impact of End-User Performance Bing & Google tested end user click behavior with artificially slowed pages http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html Shopzilla boosted business with faster performance http://en.oreilly.com/velocity2009/public/schedule/detail/7709

Performance „Anti“ - Patterns
Too many network requests
Network Latency and Connection Handling
Mistakes when using JavaScript frameworks

Too many resources on page
Have seen up to 50 JavaScript files on a single page
Use CSS Sprites to „merge“ resources
Don‘t do it pre-maturely -> whats the overhead in the browser?
Caching Content
Wrong Cache Headers or simply forgot about caching
Make sure you cache the right things for the right time
Excessive Logging or End-User Monitor Overhead
XHR Requests for every JavaScript trigger
Weight the cost of end-user monitoring

Related Blog Entry
http://blog.dynatrace.com/2009/10/28/101-on-https-web-site-performance-impact/
Too many resources that delay page load

Browsers use different # of connections per domain
Only X resources can be downloaded in parallel
Use Domain Sharding to overcome browser connection limitation
Expensive connects / re-connects
SSL Handshake is expensive – done on multiple domains
Connection-Close header sent by server for every request
Check your server settings and make smart use of your domains
High Network Latency
High latency for certain geographical regions
Investigate in CDN‘s (Content Deliver Networks)

Related Blog Entry
http://blog.dynatrace.com/2009/10/28/101-on-https-web-site-performance-impact/
2/3rd of the time spent in establishing connection

Mistakes when using JavaScript Frameworks
CSS Selectors
$(“.myclass“) is very expensive on IE
$$(“[id=^partialIdName]“) is very expensive on every browser
Be smart with your choice of CSS Selectors
Global Event Handlers
e.g.: jQuery Live Events critical for expensive CSS Selectors
3rd Party Frameworks
Frameworks that manipulate the DOM can be very expensive
Need to iterate through DOM (get slower the bigger the page)
Analyze Frameworks and test with different HTML sizes

Mistakes when using JavaScript Frameworks
Related Blog Entries
http ://blog.dynatrace.com/2009/11/30/101-on-prototype-css-selectors/
http://blog.dynatrace.com/2009/11/23/performance-analysis-of-dynamic-javascript-menus/
http:// blog.dynatrace.com/2009/11/09/101-on-jquery-selector-performance/
$(“.tooltip“) results in Getting ALL DOM Elements Iterating through EVERY SINGLE ONE

Real Life Examples of why pages are slow
Expensive CSS Selectors

Global Lookups on non-existing DOM elements
Lines in Red are lookups that are not on the page In a global event handler these lookups add > 1s to every page load time

How to analyze your slowest web pages
A 5 Minutes Guide to analyze Web Site performance using free tools like dynaTrace AJAX Edition, YSlow, SpeedTracer
It is important to test in every browser
Use the existing tools available for the specific browser
Focus on Client, Server and Network
For IE: http://ajax.dynatrace.com For Chrome: http://code.google.com/webtoolkit/speedtracer/ For FireFox: http://developer.yahoo.com/yslow/

How to analyze your slowest web pages
Live-Demo with dynaTrace AJAX Edition

Questions

http://thatstoday.com	937
http://www.slideshare.net	10
http://static.slidesharecdn.com	1

TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications

by guestc75cdc on Mar 19, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 948

Statistics

TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications — Presentation Transcript