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.
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
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
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
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.
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.