Website Monitoring

Concepts

Website monitoring, often called End-User Monitoring (EUM) or Real-User Monitoring (RUM), is an important tool to understand digital user experience.

Instana supports website monitoring by analyzing actual browser request times and route loading times. This allows detailed insights into the web browsing experience of end-users, as well as deep visibility into application call paths. The Instana website monitoring solution works by means of a lightweight JavaScript agent which is embedded into the monitored website.

Website Monitoring Overview

Loaded asynchronously into the website, the agent will report its findings to Instana in the form of beacons. This beacon data can be found in an aggregated form within the website dashboards in the Instana UI. These dashboards help explore behavior and speed of websites. They are designed to be accessible to a wide audience and to answer the most common questions. More specific questions and hypotheses can be answered via the analyze capabilities.

The following screenshot shows collected data for a page load. Which combines an end-user’s browser activity and links to backend tracing.

Website Trace

Installation

The JavaScript agent is easy to install. Go to the Websites section within Instana to start tracking website performance data. The Instana user interface will guide you through the installation process.

Instana user interface guiding through the setup process

Wordpress Monitoring

If you want to use website monitoring with Wordpress, you can use our WP Instana EUM Plugin.

Dashboards

Getting started with Instana website monitoring is as easy as entering your website name and copying over a JavaScript snippet. Check out the installation section if you haven’t yet.

Speed

The speed tab focuses on the throughput, latency, and metrics that describe page load times.

Website Monitoring Speed

Resources

Third-party resources (like scripts and images) are often responsible for slow page loads. With our new resource overview, you will find it much easier to identify slow resource providers.

Broken down by origin, this table shows you all the resource providers that are actively used by your website. Clicking on the origin will reveal more detailed information including load time breakdowns and caching performance. Users can see changes in caching statistics over time and how this relates to loading times.

Website Monitoring Resources

Errors

Uncaught errors can have a large impact on a business. This is especially true for critical processes such as checkout of purchased items in an online storefront. Errors here can often cause dual purchases, resulting in dissatisfied customers who now have to deal with credit card refunds.

While seeing uncaught errors in traces is helpful, sometimes you don’t care about a single issue. When many teams are involved, or many errors occur, it is much more useful to get an overview of the situation. This is where the error breakdown is helpful. This breakdown is located in the website dashboard and helps you understand the following:

  • What types or errors are occurring, and how many are there?
  • In which browsers do they occur?
  • On what pages do they occur?

Insights into affected users are available as well once user information is made available to the JavaScript agent.

Uncaught Errors Breakdown

HTTP Requests

Learn which of your HTTP requests, i.e. requests issues via the XMLHttpRequest and fetch APIs, are slow or problematic. Selecting a specific origin provides insight into throughput and latency, as well as error rates and latency breakdown.

HTTP Request Details

Pages

Often it’s important to isolate specific pages and analyze their performance. This view is also a great one to find your page with the most traffic, or the slowest response times.

After selecting a specific page, you see all of the metrics just for this single page.

AJAX Details

Analyze

Similar to our analyze capabilities for traces and call, the analyze view for website monitoring data can be used to answer very specific questions that aren’t covered by any preconfigured dashboards. A single piece of website monitoring data is called a beacon. A few beacon types exist, i.e. page loads, HTTP requests, resources and JavaScript errors. For convenience purposes, each beacon type has its own main navigation item within the analyze view.

Beacon data can be used to filter and group. Filters are connected with AND logic operator so a beacon needs to match all the filters. The default grouping depends on the selected beacon type. Grouping can be removed to inspect the individual beacon that match filters.

Grouped View

Within the grouped analyze view, beacon data is grouped by a certain tag. By default, we group…

  • page loads by the name of the page (beacon.page.name),
  • resources by resource origin (beacon.http.origin),
  • HTTP requests by call target origin (beacon.http.origin) and
  • JavaScript errors by error message (beacon.error.message).

The following screenshot shows page loads grouped by browser name (beacon.browser.name) with a chart visualizing page load time (mean) distribution across these browsers for a website called Shop Shop.

Groups of page loads

Metric Selection

The analyze table shows a default set of metrics for every beacon type that are helpful in most cases. To answer more specific questions, we support the selection of metrics for these tables. This enables analysis using different aggregations, e.g. percentiles, as well as completely separate metrics, e.g. TCP/SSL times.

The combination of filtering, grouping, metric selection and charting is so powerful that almost all of the tables and charts found within the website dashboards can be rebuild in analyze!

Selectable columns in analyze

Ungrouped View

The ungrouped view is accessible once the grouping criteria is removed. It lists every single beacon that matches the given filters. The ungrouped view is also the gateway to the page load view.

Selectable columns in analyze

Page Load View

Similar to the trace view for traces and calls, the page load view is the highest detail level within Instana. A page load is defined as the retrieval of the initial HTML document and everything that follows after that until the next full-page navigation.

This view is designed to give you a quick overview about the occurred page load. Additionally, one can see each and every piece of data that was received by Instana for this page load. This means that context is always available when analyzing problems. For example when analyzing JavaScript errors, this view adds an understanding of what happened before

The page load view is modeled after common web developer tools’ network tabs. Filtering and searching is possible to handle even a lot of data. Even navigation to backend traces is possible to gain a full understanding why something is behaving the way it is!

Selectable columns in analyze

Trace View Integration

Enabling website monitoring for your websites also enhances the trace views. The trace views are enriched with website monitoring data as the following screenshot shows.

The page load summary is visible in the trace view