Dyna trace


Published on

Presentation that explains the main concepts used with dynaTrace.
dynaTrace is a tool to perform browser performance analysis (for JS, images, CSS, network, caching, ..etc)

Published in: Technology

Dyna trace

  1. 1. dynaTraceBrowser Performace AnalysisByYasmine M. Gaber13-06-2013
  2. 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. 3. What is dynaTrace ?Offers the most advanced deep-dive webperformance diagnostics into JavaScript execution,DOM access, rendering activities and network trafficfor analyzing and troubleshooting web applications.Quickly trace and profile web apps to understandperformance characteristics.Identify hotspots and isolate performance problems.Works with browsers: Internet Explorer (6 – 10) andFirefox (3.6 – 20) on Windows (XP, 7 , 8).
  4. 4. Why should you use dynaTrace ?Find Whats Causing WebPerformance IssuesInvestigate Potential WebPerformance ImprovementsBuild More Interactive Web Apps FasterUnderstand Exactly What Is Happening in theBrowser
  5. 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. 6. Key Performance Indicators (KPI’s)Tell you how fast or slow your web site is tothe end user.Driven by efforts from web performancespecialists such as Steve Souders andcompanies like Google and Yahoo!Divided into:a) KPI’s on Load Timeb) KPI’s on Resourcesc) KPI’s on Network Connections
  7. 7. KPI’s on Load TimeTime to First ImpressionTime to onLoad EventTime to Fully Loaded
  8. 8. KPI’s on Load Time
  9. 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. 10. KPI’s on Resources
  11. 11. KPI’s on Network ConnectionsDNS TimeConnect TimeServer TimeTransfer TimeWait TimeNumber of Domains / Single ResourceDomains
  12. 12. KPI’s on Network Connections
  13. 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 < 40requests, acceptable sites if < 100 requests, bad sitesif > 100 requestsBrowser Caching, Network Resources,JavaScript/AJAX and Server-Side Activities.
  14. 14. Instant Testhttp://www.gomez.com/website-performance-test
  15. 15. Instant Testhttp://www.gomez.com/website-performance-test
  16. 16. Instant Testhttp://www.gomez.com/website-performance-test
  17. 17. Instant Testhttp://www.gomez.com/website-performance-test
  18. 18. dynaTrace AJAX Edition
  19. 19. Best Practices to improveperformanceBest Practices on Browser CachingBest Practices on Network Requests andRound-tripsBest Practices on JavaScript and AJAXPerformanceBest Practices on Server-Side PerformanceOptimization
  20. 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 5resources with missing cache settings or a setting inthe past.− Calculate the ratio of cached and short-cachedresources to the overall number of resources on thatpage− Penalize objects with NO cache settings or an expiresdate in the past by multiplying the ratio with 1.5
  21. 21. Best Practices on NetworkRequests 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 500sand no images, css and js files that could be merged.− Allows up to 1 css, 6 images and 2 js file from the samedomain− Penalize rank by 1 for each extra file
  22. 22. Best Practices on JavaScript andAJAX 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 usingclass name)− Specify a Tag name if you have to use the ClassName− Specify a parent context− Cache Lookup Results− Reduce the DOM Size
  23. 23. Best Practices on JavaScript andAJAX PerformanceOptimize XHR calls when applicableManipulating the DOMRank Calculations− Allow 2 JavaScript files. Penalize the Rank forevery additional file− Sum the overall execution time of blocks thatexecute longer than 20ms. Every 50ms reducesthe Page Rank by 1 point− Penalize the page for more than 5 XHR calls
  24. 24. Best Practices on Server-SidePerformance 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 additionalrequest 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. 25. Questions ?
  26. 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/community/display/AJAX/dynaTrace+AJAX+Edition+Community+Home
  27. 27. Thank You !Twitter: @yasmine_mohamedEmail: yasmine.gaber@gmail.com