Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dyna trace

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)

  • Login to see the comments

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
  15. 15. Instant Test
  16. 16. Instant Test
  17. 17. Instant 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
  27. 27. Thank You !Twitter: @yasmine_mohamedEmail: