Your SlideShare is downloading. ×

Dyna trace


Published on

Presentation that explains the main concepts used with dynaTrace. …

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
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. dynaTraceBrowser Performace AnalysisByYasmine M. Gaber13-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 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. 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. 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 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. 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 ResourceDomains
  • 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 < 40requests, acceptable sites if < 100 requests, bad sitesif > 100 requestsBrowser Caching, Network Resources,JavaScript/AJAX and Server-Side Activities.
  • 14. Instant Test
  • 15. Instant Test
  • 16. Instant Test
  • 17. Instant Test
  • 18. dynaTrace AJAX Edition
  • 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. 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. 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. 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. 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. 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. Questions ?
  • 26. Resources
  • 27. Thank You !Twitter: @yasmine_mohamedEmail: