Did you know roughly half of the users that visit your website leave if it takes more than 3 seconds to load? Optimizing your website or webapp for stellar performance is always a crucial goal for any software-based business.
But, the ecosystem has changed in recent years. Smartphones are taking over. Developers need to build websites and optimize for performance primarily targeting these smaller devices.
It’s not solely about performance though.
User Experience, called UX for short, is the golden totem few seem to acquire. It has many faces, from the way you turn first-time users that interact with your landing page into paying customers, to the ease-of-use your web app provides paying customers, or how the interface just seems logical.
In this tutorial, I’ll explain how the principles of Real User Monitoring, also called RUM or End User Monitoring, can help in building and optimizing your single-page application, and how you can easily configure monitoring a single-page app for free. Let’s go!
What IS a Good Example of a Single-Page Application
A good single page application has to be performant and blazing fast across all devices. It needs to have great SEO by prerendering dynamic routes. It should be responsive and reliable while serving customers with quick page loads across the whole globe. You can easily use a website speed testing tool to analyze the speed of your website in different locations around the world, learn what affects performance, and how to improve it.
But, how do you know if your customers are happy, how do you know whether users bounce before even trying your product?
Let’s dive into what real user monitoring is, and how you can use it to improve your single-page application performance.
What Is Real User Monitoring
Websites and web apps are getting increasingly more complex with more and more client-side logic. This significantly improves UX but adds a lot of code complexity and weight. We’ve come to a point where monitoring only the back end is not enough. To ensure the best possible user experience, you need to monitor the whole client-side as well.
The goal of real user monitoring is to detect anomalies in real-time when end-user experience is affected by website/webapp performance and unexpected crashes. When your customers are facing poor UX, you need to be notified!
Having insight into how happy your customers are while interacting with your website keeps you on top of reducing churn and high bounce-rates.
With the ability to inspect individual sessions and drill into page-level statistics, real user monitoring tools give you a birds-eye view of what your customers are facing while interacting with your website or webapp. Tracking page-loads, HTTP requests, page resources, UI interactions, and on-page transactions are all crucial to understanding what your customers are happy and frustrated about.
There are tons of RUM solutions to choose from, in the next section I’ll walk you through using Sematext Experience. It has a nice free tier if you’re starting a side-project and a 14 day free trial of the pro tier if you have a business going already.
How to Track and Monitor Single-Page Applications
The sole purpose of real user monitoring is to ensure a better experience for the end user. It is not limited to only increasing your web application’s performance, but helping you improve the overall satisfaction levels of your users.
Single-page application monitoring is crucial for you to monitor virtually anything that executes in the browser. You have insight into performance, page-load times, HTTP response times, and much more. This lets you see what your users are seeing in real-time through their eyes.
Why Monitor Single-Page Applications
Having delays in page loads, loading resources, and HTTP requests can all cause your users to become frustrated and ultimately churn, causing you to lose business. That’s why it’s important to track every user’s experience via distinct sessions that provide valuable insight about which pages were accessed, whether they were hard or soft page loads, which HTTP requests were triggered, which device was used, and how the final load time was affected by all these factors.
Here’s a list of important factors and challenges for a single-page application where end user monitoring can help:
1. SEO
Single-page apps are inherently terrible regarding SEO because they use JavaScript to load data and content. Meaning the bots that crawl your website and index data for the search engines don’t have any HTML to index because it’s generated once a user loads the SPA in a browser. To remedy this, you can use server-side rendering or prerendering the dynamic SPA routes and generate static HTML.
2. Performance
Single-page apps are well known to be fast and responsive websites, because of the way they load content dynamically, without reloading the HTML page. But, you never know what experience your users have while navigating the SPA. If the initial hard load is way too long or if some routes have bottlenecks with time-consuming HTTP requests.
3. Localizing
Real user monitoring gives you a complete overview of the geographical location of your users. You know every detail about page loads and the satisfaction of your users across the whole world. Based on this analysis, localizing your SPA to use languages where you have the most customers is an amazing advantage.
4. Security
By tracking users, and their sessions, while interacting with your SPA, you can identify real and fake users, potentially isolating malicious intent.
5. Error and crash reporting
Errors happen, your single-page app can crash, it’s all part of life. But, you need to know this! Don’t rely on your users telling you. They’ll rather stop using your product than tell you. Real user monitoring is there to watch your back when JavaScript lets you down. Among others, it can help you catch and fix script errors.
How Is Single-Page Application Monitoring Different from Static Website Monitoring
Monitoring single-page apps and static websites is exactly the same in principle, apart from one important difference. Single-page apps can have hard and soft page loads. The principle behind how routing works with single-page apps is by using JavaScript to change pages dynamically, without reloading the root HTML page. This is a soft reload and requires one additional configuration watcher dedicated to listening for the routeChange event. Hard reloads are straightforward. They happen when the initial HTML page is loaded for the first time when a user lands on your webapp.
Sematext Experience covers all the bases, including tracking route changes for single-page apps so you know exactly which pages were loaded hard or soft and how the page rendering behaves. It supports every major single-page app framework or library like Angular, Vue.js, Ember.js, and React, but also a default configuration setting for any framework that uses HTML5 pushState or Hashchange.
The way you add real user monitoring to your webapp is super simple.
Adding Real User Monitoring to a Single-Page Application
Here is a list of steps to add Real User Monitoring to a single-page application:
- First, create an Experience App in Sematext. Don’t forget to enable the Website uses Single Page Architecture toggle.
2. Then, add the Experience Script in your root HTML file’s <head>
<script type="text/javascript">
(function(e,t,r,n,a){var c=[];e[a]=function(){c.push(arguments)};
e[a].queue=c;var s=t.createElement(r);s.async=1;s.src=n;
var u=t.getElementsByTagName(r)[0];u.parentNode.insertBefore(s,u)})
(window,document,"script","//cdn.sematext.com/rum.js","strum");
</script>
<script type="text/javascript">
strum('config', {
token: 'YOUR_TOKEN',
receiverUrl: 'https://rum-receiver.sematext.com'
});
</script>
3. Lastly, add the routeChange event listener to your single-page app’s configuration. Based on what single-page application framework or library you’re using there are specific instructions. Choose what applies to you.
React
import React from 'react';
import { createBrowserHistory as createHistory } from 'history';
const history = createHistory();
history.listen((location, action) => {
if (action !== 'REPLACE') {
strum('routeChange', window.location.href);
}
})
export default function App() {
return (
<Router history={history}>
...
</Router>
);
}
Angular 2+
import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {
this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
strum('routeChange', event.url);
}
});
}
}
Angular.js
$scope.$on('$routeChangeStart', function () {
strum('routeChange', window.location.href);
});
Vue.js
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'app',
watch: {
$route() {
strum('routeChange', document.location.href);
}
}
}
</script>
Ember.js
import EmberRouter from '@ember/routing/router';
import { on } from '@ember/object/evented';
EmberRouter.reopen({
doInformAboutRouteChange: on('didTransition', function() {
strum('routeChange', window.location.href);
}),
});
export default Router;
Using On-Page Transactions to Track User Experience
With the configuration above, you’ll have everything set up and ready to go, apart from custom on-page transactions. These are awesome to have if you want to measure custom events that are important to you in understanding your customers’ behavior. Maybe you want to track transactions when your users go through the sign-up flow or how well they’re onboarding. You can do whatever you want with on-page transactions. Let your imagination go wild!
Visualizing User Experience
After finishing the configuration and you have data flowing in, you can visualize metrics and start making business decisions to improve the user experience and thus the happiness of your customers.
Apart from the obvious, you can also visualize user satisfaction based on which part of the world they live in. Geographical data is crucial to understand and optimize performance for markets you wish to enter.
Wrapping Up Monitoring Single-Page Applications
Give your customers the experience they deserve. Don’t let performance issues cause churns. Stop relying on your customers to tell you what’s wrong. Diagnose issues right away when they happen to enhance your single-page application performance and convert more sales.
Using a real user monitoring tool like Sematext Experience gives you a clear overview of who is using your web application, with data from real users and their sessions while interacting with your product. Use this to your advantage, find the hidden problems they encounter to keep user satisfaction high.
The state of the Internet today demands lightning-quick web apps that load just as fast on mobile as on desktop. Retain customers who stumble upon your product while casually browsing the web on their phones. Make them want to come back and sign up.
Returning to the question from the beginning of this article, did you know half of the users that visit your website leave if it takes more than 3 seconds to load? Well, now you know. Don’t let yourself be one of those who lose customers before they even land on your website!
Do you know how fast your website or webapp loads in different browsers and regions, on different devices? With a real user monitoring solution, you can easily measure latency and find out.
Hope you guys and girls enjoyed reading this as much as I enjoyed writing it. If you liked it, feel free to share so more people see this tutorial. Until next time, be curious and have fun.