This document discusses the browser performance analysis tool dynaTrace. It provides an overview of dynaTrace's capabilities such as cross-browser diagnostics, code-level visibility, and deep JavaScript and DOM tracing. It also covers key performance indicators (KPIs) like load time, resource usage, and network connections that dynaTrace measures. Best practices for improving performance, such as browser caching, network optimization, JavaScript handling and server-side performance are outlined. The document aims to explain why and how dynaTrace can help users find and address web performance issues.

1. dynaTrace
Browser Performace Analysis
By
Yasmine M. Gaber
13-06-2013

2. Agenda

What is dynaTrace ?

Why should you use dynaTrace ?

dynaTrace Capabilities

Key Performance Indicators (KPI’s)

Instant Test

dynaTrace AJAX Edition

Best Practices to improve performance

3. What is dynaTrace ?

Offers the most advanced deep-dive web
performance diagnostics into JavaScript execution,
DOM access, rendering activities and network traffic
for analyzing and troubleshooting web applications.

Quickly trace and profile web apps to understand
performance characteristics.

Identify hotspots and isolate performance problems.

Works with browsers: Internet Explorer (6 – 10) and
Firefox (3.6 – 20) on Windows (XP, 7 , 8).

4. Why should you use dynaTrace ?

Find What's Causing Web
Performance Issues

Investigate Potential Web
Performance Improvements

Build More Interactive Web Apps Faster

Understand Exactly What Is Happening in the
Browser

5. dynaTrace Capabilities

Cross-Browser Diagnostics

Code-Level Visibility Into Frameworks

Speed Up Page Load Times

Optimize Page Rendering

Compare Website To Peers

Deep Javascript And Dom Tracing

Share Data With Your Peers

6. Key Performance Indicators (KPI’s)

Tell you how fast or slow your web site is to
the end user.

Driven by efforts from web performance
specialists such as Steve Souders and
companies like Google and Yahoo!

Divided into:
a) KPI’s on Load Time
b) KPI’s on Resources
c) KPI’s on Network Connections

7. KPI’s on Load Time

Time to First Impression

Time to onLoad Event

Time to Fully Loaded

8. KPI’s on Load Time

9. KPI’s on Resources

Total Number of Requests

Total Number of HTTP 300s/400s/500s

Total Size of Web Site

Total Size of Images/CSS/JS

Total Number of XHR Requests

10. KPI’s on Resources

11. KPI’s on Network Connections

DNS Time

Connect Time

Server Time

Transfer Time

Wait Time

Number of Domains / Single Resource
Domains

12. KPI’s on Network Connections

13. Rank Calculations

Time to First Impression: great if < 1s, acceptable if
< 2.5s, slow if > 2.5s

Time to onLoad: great if < 2s, acceptable if < 4s,
slow if > 4s

Time to Fully Loaded: great if < 2s, acceptable if <
5s, slow if > 5s

Number of total HTTP Requests: great sites if < 40
requests, acceptable sites if < 100 requests, bad sites
if > 100 requests

Browser Caching, Network Resources,
JavaScript/AJAX and Server-Side Activities.

14. Instant Test
http://www.gomez.com/website-performance-test

15. Instant Test
http://www.gomez.com/website-performance-test

16. Instant Test
http://www.gomez.com/website-performance-test

17. Instant Test
http://www.gomez.com/website-performance-test

18. dynaTrace AJAX Edition

19. Best Practices to improve
performance

Best Practices on Browser Caching

Best Practices on Network Requests and
Round-trips

Best Practices on JavaScript and AJAX
Performance

Best Practices on Server-Side Performance
Optimization

20. Best Practices on Browser Caching

HTTP Caching Headers
− Expires Headers
− Cache-Control using max-age setting in seconds

Rank Calculations
− Page scores a 100 if there are fewer than 5
resources with missing cache settings or a setting in
the past.
− Calculate the ratio of cached and short-cached
resources to the overall number of resources on that
page
− Penalize objects with NO cache settings or an expires
date in the past by multiplying the ratio with 1.5

21. Best Practices on Network
Requests and Round-trips

Avoid Redirects, HTTP 400s and HTTP 500s

Optimize:
− Images (CSS Sprites and Compacting)
− Style Sheets (Merge CSS Files)
− JavaScript (Merge and Minimize JavaScript Files)

Rank Calculations
− Page scores a 100 if there are no redirects, 400s or 500s
and no images, css and js files that could be merged.
− Allows up to 1 css, 6 images and 2 js file from the same
domain
− Penalize rank by 1 for each extra file

22. Best Practices on JavaScript and
AJAX Performance

Blocking and long running script tags
− Delay Loading JavaScript Files
− Optimizing JavaScript Execution

Slow CSS Selectors with jQuery/Prototype
− Use Unique ID when possible (95% faster than using
class name)
− Specify a Tag name if you have to use the Class
Name
− Specify a parent context
− Cache Lookup Results
− Reduce the DOM Size

23. Best Practices on JavaScript and
AJAX Performance

Optimize XHR calls when applicable

Manipulating the DOM

Rank Calculations
− Allow 2 JavaScript files. Penalize the Rank for
every additional file
− Sum the overall execution time of blocks that
execute longer than 20ms. Every 50ms reduces
the Page Rank by 1 point
− Penalize the page for more than 5 XHR calls

24. Best Practices on Server-Side
Performance Optimization

Server requests:
− First request on the page
− Requests that return HTML
− Requests that send GET or POST parameters
− All XHR/AJAX Requests

Rank Calculations
− Allow up to 6 Server-Side requests. Every additional
request is penalized by 1 rank
− For each request, penalize rank by

1 if server time from 200ms to 400ms

2 if server time between 400ms and 1000s

4 if server time longer than 1s.

25. Questions ?

26. Resources

http://www.compuware.com/en_us/application-
performance-management/products/user-
experience-management/real-user-monitoring-
web-and-mobile/capabilities.html

https://apmcommunity.compuware.com/comm
unity/display/AJAX/dynaTrace+AJAX+Edition+
Community+Home

27. Thank You !
Twitter: @yasmine_mohamed
Email: yasmine.gaber@gmail.com