Performance Anti-Patterns in Ajax Applications

Andreas GrabnerTechnology StrategistdynaTrace Software Inc.andreas.grabner@dynatrace.com

{ “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

LatencyDatavolume

ContentConstructio

n

Caching

Network

Browser

JavaScript

Layouting

AJAX/XHRCalls

Rendering

DOM

Impact of End-User Performance

Bing & Google tested end user click behavior with artificially slowed pageshttp://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html

Shopzilla boosted business with faster performancehttp://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 network requests

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

Too many network requests

Related Blog Entry

• http://blog.dynatrace.com/2009/10/28/101-on-https-web-site-performance-impact/

Too many resources that delay page load

Network Latency and Connection Handling

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)

Network Latency and Connection Handling

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 slowExpensive CSS Selectors

Real Life Examples of why pages are slowGlobal 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

Real Life Examples of why pages are slow

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