Live Platform
  • Introduction
  • Release Notes
    • Live 3
      • 3.59.0
      • 3.58.0
      • 3.57.0
      • 3.56.0
      • 3.55.0
      • 3.54.0
      • 3.53.0
      • 3.52.0
      • 3.51.0
      • 3.50.0
      • 3.49.0
      • 3.48.0
      • 3.47.0
      • 3.46.0
      • 3.45.0
      • 3.44.0
      • 3.43.0
      • 3.42.0
      • 3.41.0
      • 3.40.0
      • 3.39.0
      • 3.38.0
      • 3.37.0
      • 3.36.0
      • 3.35.0
      • 3.34.0
      • 3.33.0
      • 3.32.0
      • 3.31.0
      • 3.30.0
      • 3.29.0
      • 3.28.0
      • 3.27.0
      • 3.26.0
      • 3.25.0
      • 3.24.0
      • 3.23.0
      • 3.22.0
      • 3.21.0
      • 3.20.0
      • 3.19.0
      • 3.18.0
      • 3.17.0
      • 3.16.0
      • 3.15.0
      • 3.14.0
      • 3.13.0
      • 3.12.0
      • 3.11.0
      • 3.10.0
      • 3.9.0
      • 3.8.0
      • 3.7.0
      • 3.6.0
      • 3.5.0
      • 3.4.0
      • 3.3.0
      • 3.2.0
      • 3.1.0
      • 3.0.0
    • Live 2
  • Articles
    • Creating an aggregation
    • Creating a pipe
  • Theoretical Background
    • Fundamentals
    • Key Advantages
  • Platform Architecture
    • Introduction
    • Queries
    • Glossary
  • Featured plugins
    • Annotations
    • Groovy support
    • Messenger
    • Microsoft Teams
    • MongoDB
    • MongoDB Timeseries
    • MongoDB Kit
    • Purge plugin
    • SQL
    • TCP Input
    • TimescaleDB
  • Data visualization
    • Pipes widgets
      • Temporal
      • Cartesian
      • Multi-value snapshot
      • Single-value snapshot
      • Tables
      • Heatmap
      • JSX Widgets
      • Lollipop
      • Histogram
      • State Timeline
      • Boxplot
    • Pipes modifiers on Pipes charts
  • Alerts and notifications
    • Pipes modifiers on rules
  • Pipes Queries
    • Introduction
    • Dynamic filters
    • Meta parameters
    • Reducer
      • Uniform compress
      • PIP
    • Storage Hints
    • Execution Context
    • Event flow modifiers
  • Developers
    • Plugins
    • Packages
    • Backend API
      • Lookup Tables
      • Extensions
      • Settings
      • Storage Providers
      • Web Services
      • Web Setup
      • Entity Audit
    • Web application
      • Services
        • Point service
        • Menu service
      • Browser Compatibility
      • Runtime modules
        • Core Javascript modules
        • Library modules
        • Adding modules to runtime
      • Localization (i18n)
      • Date formatting
      • Dashboard and Widgets
        • Widget API
        • Custom widget editors
        • Live Event Types
        • Live Widget Configuration
        • Live Widget Packaging
        • Widget Request Interceptors
      • React Contexts
        • Dashboard
        • Dashboard widget
      • Registering Home Page options
    • Python application
    • Subscribing to Live Events
  • Administration
    • Configuration
      • Home Page Customization
      • live.properties
    • Infrastructure Monitoring
    • Storage Monitoring
    • Queries Monitoring
    • Logs Monitoring
    • Data Purging
  • Features
    • Access Permission
    • Datasources
    • Export Dashboard
    • Partial Indexes
    • WebApp Metrics
    • Entity Audit
Powered by GitBook
On this page
  • Metrics
  • Web Metrics Dashboard Template

Was this helpful?

  1. Features

WebApp Metrics

Live continuously and automatically collects metrics about the webapp front end performance, those metrics can be accessed using pipes.

PreviousPartial IndexesNextEntity Audit

Last updated 4 years ago

Was this helpful?

Metrics

All the metrics are related to the frontend performance and can be accessed via query pipes. In total there are five metrics, three of which are from the initiative and the remaining two are from the .

LCP (Largest Conteful Paint)

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, the idea being that the largest element might be the most important one to the user.

If a page is reporting high values for this metric, it means that the most important element in that page takes too long to appear on the screen.

This metric is available in pipes through the following filter:

webhit type:"webapp_performance" hit->category:"web-vitals" hit->variable:"LCP"

FID (First Input Delay)

With this metric is possible to measure how long does it take for the browser to react to the user's first input. During page load, if the browser is busy doing something and the user interacts with a button, the time it takes for the browser to start responding to the user interaction is the FID.

This metric is available in pipes through the following filter:

webhit type:"webapp_performance" hit->category:"web-vitals" hit->variable:"FID"

CLS (Cumulative Layout Shift)

Layout shifts are defined by the Layout Instability API, which reports layout-shift entries any time an element that is visible within the viewport changes its start position (for example, its top and left position in the default writing mode) between two frames. Such elements are considered unstable elements.

This metric is available in pipes through the following filter:

webhit type:"webapp_performance" hit->category:"web-vitals" hit->variable:"CLS"

Long Tasks

Those are javascript tasks that took more than 400ms to complete. Long tasks can happen anywhere in a page lifecycle. Pages that report a high number of long tasks need some attention.

In a scenario where page A has an average of 2 long tasks per visualization and after a Live update that number spikes to 8, is safe to say that something changed during the Live update and it needs some attention.

This metric is available in pipes through the following filter:

webhit type:"webapp_performance" hit->category:"web-vitals" hit->variable:"LT"

Long Requests

Long requests are any HTTP requests that take more than 450ms to complete. That metric is useful when looking for endpoints that need to be optimized.

This metric is available in pipes through the following filter:

webhit type:"webapp_performance" hit->category:"web-vitals" hit->variable:"LR"

Web Metrics Dashboard Template

Live provides a way to create a template dashboard with all the metrics described above in it.

To create a new web metrics dashboard go to the dashboard list page and click on the "New dashboard" button as shown below:

After that, a modal listing the available options to create a dashboard will appear on the screen, select the "Use a model" option as shown on the image below:

Finally, select the "Access Monitoring" model and fill in the dashboard name and perspective and click on the "Create" button.

The newly created dashboard will look like this:

Web Vitals
performance API
An image highlighting in red the "new dashboard"
An image depicting the "Use a model" option
An image depicting the "Access Monitoring" option dashboard template
An image depicting how a web app metrics dashboard template should look like