• Save
Measuring Performance in the Browser
Upcoming SlideShare
Loading in...5

Measuring Performance in the Browser



Presented by Alois Reitbauer, Technology Strategist, dynaTrace Center of Excellence October 2011

Presented by Alois Reitbauer, Technology Strategist, dynaTrace Center of Excellence October 2011



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Measuring Performance in the Browser Measuring Performance in the Browser Presentation Transcript

  • Performance in the BrowserAlois Reitbauer
  • Our challenges today  No standardized way to measure end user performance  Measuring on the server side is not enough  Measuring in the browser is complex  Best Practices are only one side of the story  Today’s approaches are only suitable for development/troubleshooting
  • The level of detail we want View slide
  • Request Start Time Business Event Time Time-to-First-ByteOnLoad Time DNS/Network Time Bandwidth Rendering TimeLatency (Geo)Location JS Execution Time Browser Info Resource Download TimeRendering Time View slide
  • … we want to get all thisinformation non intrusively (aka hacking)
  • OnLoad Time Measurement<html> <head> <script type="text/javascript"> var start = new Date().getTime(); function onLoad() { var now = new Date().getTime(); var latency = now - start; alert("page loading time: " + latency); } </script> </head> <body onload="onLoad()"> ……
  • Resource Time Measurement……<script type="text/javascript"> downloadStart(“myimg”);</script><img src=“./myimg.jpg” onload=“downloadEnd(„myimg‟)” />…..
  • … browsers have all thisinformation, so why not expose it
  • W3C PerformanceWorking Group
  • Web Performance Specifications (relevant in this context)  Navigation Timing  Basic page navigation information  Resource Timing  Information about page resources (own & third party)  User Timing  Custom actions and “Business Events”  Timeline  Unified Access to Performance Data
  • Navigation Timing window.performance.timing.
  • Web Timing Example (Chrome)
  • Resources
  • Resource Timing  Timing for Resources  Initiator tells origin of request  Issues with privacy of third party content  Issues with iframes (only root resource tracked)  Timing-Allow-Origin Header for Third Party Content  Missing information on failed requests
  • Resource Timing window.performance.getEntriesByType(window.performance.PERF_RESOURCE)[].
  • Business Events
  • Marks vs.Measures
  • Working with Marks  mark (markName)  add a new mark with the current timestamp  getMarks (markName)  Retrieve all marks with the specified name. If none is specified all marks will be returned  Result Structure: { <markName> : [<val1>, <val2>, …] ….. }
  • Pre-Defined Marks  MARK_FULLY_LOADED  Custom mark for fully loaded state of page  MARK_FULLY_VISIBLE  Defines page is fully visible  MARK_ABOVE_THE_FOLD  All above the fold content is visible  MARK_TIME_TO_USER_ACTION  Custom mark to define that page can be used.
  • Measures  Used to calculate durations  measure ()  fetchStart -> now  measure (startTime)  startTime -> now  measure(startTime, endTime)  startTime -> endTime 
  • Where are we today?
  • Browser Support  Navigation Timing   Resource Timing   User Timing   Performance Timeline 
  • Open Issues  How to send the data back to the server  Rendering and JS Execution  Implementing the backend services
  • A synthetic monitoringreplacement?
  • The impact on WPO?
  • A game changer for mobile?
  • Alois Reitbaueralois.reitbauer@dynaTrace.com @AloisReitbauer http://blog.dynatrace.com
  • Download the latest Application Performance almanac: Web | Cloud | DevOps | Mobile | Automation | Tuningwww.dynatrace.com/almanac