Did you know that when there are glitches and delays on website load times, users can feel almost as stressed as watching a horror movie? The 2016 Ericsson Mobility Report certainly says so.
We looked at the Vectra AI Platform’s UI, and while it doesn’t resemble a horror movie, we wanted to deliver a product that felt satisfying for users to operate, especially if they’re looking at it daily. In a perfect world, we would aim at having our UI load instantaneously. In fact, in Jacob Nielsen’s 2010 Website Response Times article, Nielsen describes how seeing a website page load within 0.1 seconds gives users the feeling of instantaneous response such that the outcome feels like it was caused by the user, not the computer.
Obviously, perfection is impossible, but we didn’t want people checking if their mouse battery is dead or feel the need to run the latest season of Bridgerton on a second monitor as they waited for the UI to load.
The plan for optimal load times
The user interface of the Vectra AI Platform is used by customers to view detections, investigate threats, respond to attacks, set up data sources and manage configuration settings to customize the platform to suit their business. As the platform has evolved to provide more functionality with larger amounts of data, and as we supported more cloud use cases, users began reporting longer page load times and delays in performing core workflows. Previously, when users had a 10GBps ethernet cable linking them directly to our appliance, Vectra AI was lightning fast, but even minor inefficiencies can add up online.
Recognizing the critical need for a smoother, faster user experience, we embarked on a large-scale initiative to overhaul the performance of the application. Our primary objectives were:
- Agree as a team an acceptable service level objective (SLO).
- Begin capturing and tracking metrics for page loads and user actions for core workflows.
- Work to decrease the page load and user action metrics to the agreed SLO value for all core workflow pages.
- Set up a process to continually monitor these metrics so that we will be alerted if any of the metrics do not meet the agreed SLO so any issues can be quickly addressed.
By setting these ambitious goals, we aimed to not only address the current pain points but also to future-proof our application against potential performance bottlenecks as we continue to scale the platform and add new features.
An experimental approach to achieving the project
One of the first actionable steps was to define Service Level Objectives (SLOs) in collaboration with our project management team. These SLOs were essential for setting clear, measurable targets for our performance improvements. We focused on key metrics such as Largest Contentful Paint (LCP) measuring page load performance and Interaction to Next Paint (INP) measuring user interactivity.
More information about these metrics can be found at web.dev.
However, before we agreed on these SLOs, we wanted to understand how Vectra AI performs against our peers and performed an ad-hoc test. For CLS and INP, our expectation was for immediate feedback with no layout shifts post-load, and we checked these with subjective assessments. For LCP, we used the tried and tested stopwatch method. Fortunately, I had a stopwatch already and didn’t need to explain to Finance the business case for expensing one, we didn’t have time!
The method was simple.
First, I measured my reaction times, starting the watch and once I saw it go to 3 seconds I pressed stop. This was my human reaction delay, and it was a sharp 300ms. (It’s easy to cheat here, so it can help to hide the millisecond counter or else you’re anticipating the time.) For each page, count from 3 and start the watch as you click the link, once the critical content is loaded, stop the watch. Subtract your reaction time and this is how long the page takes to load.
Our ad-hoc test confirmed that customers were right about some of our UI interactions and somewhat “slow” load times. However, in comparison with other cybersecurity vendors and other best-in-class SaaS products, we actually offered a similar experience. The question we had to ask ourselves, though, was whether we were comfortable with being the same or whether we wanted to strive for excellent load times.
How we made the Vectra AI Platform even better
With the collaborative efforts of our engineering, product management, and UX/UI teams have resulted in a more responsive and reliable application with improvements made to:
- Perception of page load performance through a “skeleton screen”
- The performance of our API requests and backend operations
- Vectra AI Platform page load times
- Enhanced efficiency on the user login experience
Key metrics, such as page load times and API response times, have shown substantial improvements, directly translating into higher user satisfaction and engagement. Our focus on optimizing both the front-end and backend components ensures that our platform is now better equipped to handle large volumes of data and complex user interactions.
Dive deeper into our UI Performance project in our whitepaper here.