Docs » Splunk RUM use case library » Identify performance bottlenecks with Splunk RUM for Browser

Identify performance bottlenecks with Splunk RUM for Browser 🔗

The following use case features Buttercup Industries, a fictitious e-commerce company.

About this use case 🔗

Kai is a site reliability engineer at Buttercup Industries e-commerce company. One of Kai’s main concerns is monitoring the performance of the Buttercup Industries website. When sites are sluggish, users get frustrated and are more likely to abandon a slow site in favor of a faster competitor. In this example, Kai uses Splunk RUM for Browser and Splunk Observability Cloud to identify performance bottlenecks and monitor Web Vitals so that they can troubleshoot customer facing issues on the Buttercup Industries website.

Web vitals 🔗

Many businesses rely on search engines for users to discover their sites. Google uses web vitals to determine page ranking. Splunk RUM automatically measures Web Vital metrics so Kai can tune into the overview page to check in on the metric scores.

Web Vitals are made up of three metrics that measure user experience:

  • LCP (largest contentful paint)

  • CLS (cumulative layout shift)

  • FID (first input delay).

Monitor Web Vitals 🔗

To monitor the Web Vitals, Kai follows these steps:

  1. Kai opens RUM. From the left navigation panel, they select RUM and Browser as the source.

    The following image shows the application summary dashboard. Kai sees key metrics about the health of their application like:

    • Web vitals

    • Page views/errors

    • Network requests/errors

    • JavaScript errors

    • Detectors

    In the Application summary dashboard, Kai sees that LCP has a poor performance score.

    This image shows the application summary dashboard in Splunk RUM for Browser.
  1. Kai clicks on the LCP metric to see more in Tag Spotlight.

    • Kai can also get to Tag Spotlight by clicking into any metric in the Overview page. In Tag Spotlight Kai can filter session aggregates by endpoint, pages, environments, operation, and more.

  2. In Tag Spotlight, Kai sees that the P99 loading time for the site is abnormally slow, 53.86s for Chrome users!

    • This image shows the Browser metric in Tag Spotlight. As the width of the bars in the chart indicate, Chrome has the most users.

    This image shows the browser metric in Tag Spotlight.

Drill down to an example session to troubleshoot slow loading 🔗

In Tag Spotlight, Kai found that something is causing the website to load slowly. To dig deeper, Kai opens up an Example session. By looking in an example session, Kai can investigate the causes of the latency issue.

  1. Kai opens Example Sessions from Tag Spotlight by clicking the Example Sessions tab.

    • The Example Sessions tab in the Tag Spotlight view shows sessions that contain certain characteristics based on the filters selected.

  2. Kai sorts the Example Sessions by LCP duration to drill into a session with a long load time. Kai opens Session Details by clicking on the session ID like the following image.

    This image shows a session for LCP in Example Sessions.
  3. In the Session Details view, Kai discovers that the loading latency is from a third-party resource like the following image.

    This image shows a session from the session details page.

Summary 🔗

In this use case, Kai identified problems on the Buttercup Industries website performance by doing the following:

  • Monitoring the Web Vitals in the Application Summary Dashboard and identifying that that LCP was really slow.

  • Investigated the data in Tag Spotlight and discovered there was a loading problem.

  • Kai opened an example session to troubleshoot and learned that the resource loading issue was from a third party vendor.

  • Kai reported the issue to the Buttercup Industries developer team so that they can reproduce the issue and work on a fix.

  • By helping the team improve the Web Vitals score, Kai also helped improve the search engine optimization for their site.

  • Finally, Kai can also configure detectors to alert on their Splunk RUM metrics.

To learn more about how you can optimize your experience with Splunk Observability Cloud, see:

Subject

Resource

Video tutorials and blog articles

Splunk RUM Documentation