\u00a0Setting up client performance metrics<\/h2>\n
How long does it take to load your web page, and which parts of the process take the most time? If you\u2019re wondering which pages are slow to load and why, look at the client performance metrics.<\/p>\n
These metrics are measured in your web page, and you have to add a snippet of JavaScript to each page, or to a master page. There are detailed instructions in this video<\/a> and in this help page<\/a>.\u00a0 But if you added Application Insights when you created a new web app project, it will already be set up for you.<\/p>\n As soon as you run your application either locally (clicking F5) or on the server after publishing the website, you should start seeing data almost immediately in your application\u2019s overview page in the Azure portal<\/a>.<\/p>\n The Application Health section on the overview page is a lens into your application\u2019s health as we have defined it by the set of metrics related to performance, load and failures.<\/p>\n The top section (1) shows key indicators of the client-side performance.<\/p>\n \u00a0<\/p>\n Click it to get to the detailed performance blade. This blade is a Metrics Explorer view that we\u2019ve initialized with a relevant set of charts.<\/p>\n \u00a0<\/p>\n The layout of Metrics Explorer is always the same, although the content of the parts depends on how you got there.<\/p>\n \u00a0\u00a0 The top chart<\/strong> (2) in Metrics Explorer is always the bigger version of the chart that you clicked through from Overview page.<\/p>\n **Subsidiary charts **(3) of related metrics. With the client performance overview, we\u2019ve chosen to show server response times, browser exceptions and page views.\u00a0 I would certainly love to get feedback on what set of metrics you would like to see here.<\/p>\n Grids<\/strong> (4).\u00a0 In this case, the first grid shows you average browser page load time by base URL.\u00a0We also give you the count of the hits for the page.\u00a0 The second grid gives you the browser exceptions by file name.<\/p>\n As you play around with the ME and drill through I would love to get feedback as to what type of information in the drill through would be more useful: what charts\/metrics and what kind of grids<\/span>.\u00a0\u00a0<\/p>\n It is a stacked chart which breaks the total page load time into the standard navigation timing steps defined by W3C<\/a>.<\/p>\n \n Select it and you\u2019ll see the list of standard metrics that you can choose from. (The grids and segmented charts, like the client performance metrics chart, are currently read only, but will be editable in the next release.)\n <\/p>\n \n You can customize the type chart i.e. (Line, Area or Bar), or select additional metrics you want to chart.\u00a0 In future, you’ll be able to add charts, segment charts and much more.\n <\/p>\nDrill through from Overview<\/h2>\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/11\/8233.2014-11-Overview-Application-Health.png\")
<\/p>\nWhat\u2019s in Metrics Explorer?<\/h2>\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/11\/8640.2014.-ME-Blade-CP-Drill20Through-1.png\")
<\/a><\/p>\nWhat do the client timing metrics mean?<\/h2>\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/11\/2816.2014-11-CP-Metrics.png\")
<\/p>\n\n Customizing a chart\n <\/h2>\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/11\/7416.2014-11-ME-Metric-Selection.png\")
<\/a>\n <\/p>\n