Skip to content

Commit

Permalink
test(browser intro): Trying to streamline more
Browse files Browse the repository at this point in the history
  • Loading branch information
barbnewrelic committed Jul 8, 2022
1 parent 295c68c commit ac7ea0c
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 71 deletions.
Expand Up @@ -58,6 +58,14 @@ The **Core web vitals** show how your browser performs according to [Google's Co
* FID: First input delay
* CLS: Cumulative layout shift

Learn how to use the core web vitals you see in the UI by checking out our [self-paced training course at learn.newrelic.com](https://learn.newrelic.com/self-paced-core-web-vitals). The course covers:

* What each core web vital metric measures
* What are the recommended thresholds for each
* What are some common causes that affect the metrics and their respective value rating
* How to collect timing metrics that you'll be able to review in the browser monitoring UI
* How to query the data in order to understand a user's experience on a website

## User time on the site [#user_time]

The **User time on the site** widget shows the time a user remains on the site.
Expand Down
Expand Up @@ -35,60 +35,29 @@ With browser monitoring in New Relic, you can see actionable data about your end
src={browserSummaryPage}
/>

## More than Real User Monitoring (RUM) [#life-cycle-monitoring]

Many websites contain dynamic content that is loaded after the initial page has finished loading, and complex JavaScript code increases the need for error reporting. Browser monitoring in New Relic provides a Real User Monitoring (RUM) solution that measures speed and performance as your end users navigate to your site from different web browsers, devices, operating systems, and networks.

But browser monitoring in New Relic goes far beyond the initial page load to measure [full page life cycle data](/docs/browser/new-relic-browser/page-load-timing-resources/page-load-timing-process). For example, our browser UI shows you:

* Detailed performance data, such as by [page view popularity](/docs/browser/new-relic-browser/additional-standard-features/page-views-insights-your-sites-popularity) and [user satisfaction (Apdex)](/docs/apm/new-relic-apm/apdex/apdex-measuring-user-satisfaction) scores
* [Perceived performance data](#pageviewtiming) that measures how quickly your async or dynamic visuals and interactive page contents display
* [JavaScript error analytics](/docs/browser/new-relic-browser/browser-pro-features/js-errors-dashboard-examining-errors-over-time), stack traces, and line-of-code visibility, to show you the end-user steps leading up to an error itself
* [Session performance](/docs/browser/new-relic-browser/browser-pro-features/session-traces-exploring-webpages-life-cycle) with a detailed timeline and heat map of the load and interaction events during a webpage's full life cycle
* [AJAX requests](/docs/browser/new-relic-browser/browser-pro-features/ajax-dashboard-identifying-time-consuming-calls) indicating problems with timing, end points, and specific locations in the webpage
* Hash-based route changes in apps with [single-page application (SPA)](#spa) architectures

These tools (and more!) help your teams optimize your end users' page load experience, eliminate bugs, and troubleshoot faster across your full stack.

## Core web vitals [#core-web-vitals]

The browser monitoring [**Summary** page](/docs/browser/browser-monitoring/getting-started/browser-summary-page/) includes important core web vitals, including largest contentful paint (LCP), first input delay (FID), and cumulative layout shift (CLS). You can also use the [`PageViewTiming` event](/attribute-dictionary/?event=PageViewTiming) for a more real-time delivery mechanism that does not have a dependency on any other event.

Learn how to use the core web vitals you see in the UI by checking out our [self-paced training course at learn.newrelic.com](https://learn.newrelic.com/self-paced-core-web-vitals). The course covers:

* What each core web vital metric measures
* What are the recommended thresholds for each
* What are some common causes that affect the metrics and their respective value rating
* How to collect timing metrics that you'll be able to review in the browser monitoring UI
* How to query the data in order to understand a user's experience on a website
Real user monitoring (RUM) gives insights into actual page performance, but you also need to look into your users' perceptions of your site's performance. Pages can load content in many different ways, and users control when they interact with that content.

## Examine user perceptions [#pageviewtiming]
The [browser monitoring **Summary** page](/docs/browser/browser-monitoring/getting-started/browser-summary-page/) shows important core web vital scores for:

Real user data gives insights into actual page performance, but you also need to look into your users' perception of your site's performance. Pages can load content in many different ways, and users control when they interact with that content.
* Largest contentful paint (LCP): how quickly your page content loads
* First input delay (FID): how quickly the browser can respond to user input
* Cumulative layout shift (CLS): how unstable is the content being loaded

This is why some [user-centric performance metrics](/docs/browser/new-relic-browser/page-load-timing-resources/pageviewtiming-async-or-dynamic-page-details) happen outside the standard window onload (page load time) in the browser monitoring agent. Use this data to help you understand how users experience your site, both from visual and responsiveness standpoints.
You can also use the [`PageViewTiming` event](/attribute-dictionary/?event=PageViewTiming) for a more real-time delivery mechanism that does not have dependencies on any other event.

## Improve interactive app performance [#spa]

Our [single-page app (SPA)](/docs/browser/single-page-app-monitoring/browser-ui/view-spa-data-new-relic-browser) monitoring automatically tracks route changes, initial page loads, and synchronous and asynchronous activity during browser interactions. You can also use our [browser agent and SPA API](/docs/browser/new-relic-browser/browser-agent-spa-api) to monitor virtually anything that executes inside the browser.

If you are a developer, SPA monitoring can help you:

* Create faster, more responsive, highly interactive apps.
* Monitor the throughput and performance that real users are experiencing.
* Troubleshoot and resolve problems within the context of the page load.
* Query and visualize the data to assist with business decisions.
* Bring better apps to the marketplace more quickly.
## More than Real User Monitoring (RUM) [#life-cycle-monitoring]

## Correlate front-end and back-end problems [#full-stack]
Browser monitoring in New Relic provides a real user monitoring (RUM) solution that measures speed and performance as your end users navigate to your site from different web browsers, devices, operating systems, and networks.

With our platform, you can instrument any type of data you need, such as [metrics, events, logs, and traces](/docs/using-new-relic/data/understand-data/new-relic-data-types). This helps you find actionable data about your end users' experience across the stack. For example:
But browser monitoring goes far beyond the initial page load.

<table>
<thead>
<tr>
<th style={{ width: "200px" }}>
Type of data
Types of data
</th>

<th>
Expand All @@ -100,53 +69,41 @@ With our platform, you can instrument any type of data you need, such as [metric
<tbody>
<tr>
<td>
Locations or domains
Measure [full page life cycle data](/docs/browser/new-relic-browser/page-load-timing-resources/page-load-timing-process).
</td>

<td>
Limit browser monitoring to focus on specific [geographical locations](/docs/browser/new-relic-browser/browser-pro-features/filterable-geography-webpage-metrics-location) or specific types of end-user activity. You can also monitor or block specific [domains](/docs/browser/new-relic-browser/installation-configuration/monitor-or-block-specific-domains).
Use the browser monitoring UI to get:

* Detailed performance data by [page view popularity](/docs/browser/new-relic-browser/additional-standard-features/page-views-insights-your-sites-popularity) and [user satisfaction scores (Apdex)](/docs/apm/new-relic-apm/apdex/apdex-measuring-user-satisfaction)
* [Perceived performance data](/docs/browser/new-relic-browser/page-load-timing-resources/pageviewtiming-async-or-dynamic-page-details/) that measures how quickly your async or dynamic visuals and interactive page content display
* [JavaScript error analytics](/docs/browser/new-relic-browser/browser-pro-features/js-errors-dashboard-examining-errors-over-time), stack traces, and line-of-code visibility, to show you the end-user steps leading up to an error itself
* [Session performance](/docs/browser/new-relic-browser/browser-pro-features/session-traces-exploring-webpages-life-cycle) with a detailed timeline and heat map of the load and interaction events during a webpage's full life cycle
* [AJAX requests](/docs/browser/new-relic-browser/browser-pro-features/ajax-dashboard-identifying-time-consuming-calls) indicating problems with timing, end points, and specific locations in the webpage
* Hash-based route changes, initial page loads, and activity during browser interactions for apps with [single-page application (SPA)](/docs/browser/single-page-app-monitoring/get-started/introduction-single-page-app-monitoring) architectures
</td>
</tr>

<tr>
<td>
Trends in interactions
Correlate front-end and back-end problems
</td>

<td>
Use our [comparative charting feature](/docs/synthetics/new-relic-synthetics/administration/compare-page-load-performance-browser-synthetics) for a direct page load time comparison between real user (browser) interactions and trends appearing in [Synthetic monitors.](/docs/synthetics/new-relic-synthetics/getting-started/introduction-new-relic-synthetics)
</td>
</tr>
Instrument any type of data you need, such as [metrics, events, logs, and traces](/docs/using-new-relic/data/understand-data/new-relic-data-types), so you can:

<tr>
<td>
Distributed tracing
</td>

<td>
Isolate latency from the web browser through back-end services with [distributed tracing](/docs/browser/new-relic-browser/browser-pro-features/browser-data-distributed-tracing). The UI helps you see the connection across across a full transaction, from browser activity, to time spent in network, to back-end activity.
</td>
</tr>

<tr>
<td>
Browser types
</td>

<td>
Explore your end users' experience with your app segmented by any [types of browsers](/docs/browser/new-relic-browser/additional-standard-features/browsers-problem-patterns-type-or-platform) they use, including:

* Top browsers by throughput
* Average page load time by platform type (mobile, desktop, and other)
* Selected browser type by version (for example, Chrome 31, 32, 33, etc.)


This helps you quickly determine whether problems with page load timing may be related to a specific browser type or platform, or whether the problem is more widespread.
* Focus on specific [geographical locations](/docs/browser/new-relic-browser/browser-pro-features/filterable-geography-webpage-metrics-location) or specific types of end-user activity.
* Monitor or block specific [domains](/docs/browser/new-relic-browser/installation-configuration/monitor-or-block-specific-domains).
* Compare real user browser interactions and synthetic monitoring trends with [comparative charting](/docs/synthetics/new-relic-synthetics/administration/compare-page-load-performance-browser-synthetics).
* Isolate latency across a full transaction, from browser activity to time spent in network to back-end activity, with [distributed tracing](/docs/browser/new-relic-browser/browser-pro-features/browser-data-distributed-tracing).
* Determine whether problems are related to [specific types of browsers](/docs/browser/new-relic-browser/additional-standard-features/browsers-problem-patterns-type-or-platform), platforms (mobile, desktop, etc.), or browser versions.
</td>
</tr>
</tbody>
</table>

These tools (and more!) help your teams optimize your end users' page load experience, eliminate bugs, and troubleshoot faster across your full stack.

## Get started with browser monitoring [#next]

Follow these basic steps, and you'll quickly be up and running in New Relic with browser monitoring!
Expand Down

0 comments on commit ac7ea0c

Please sign in to comment.