This article explains how we analysed the web performance of our website overlay, which is a plugin of our JavaScript tracker.
At Ometria all of our features, including website overlay, are built with web performance in mind.
From prototyping the concepts to releasing our features, Ometria’s Engineers are passionate about web performance.
Every update to our website overlays is been measured and analysed with various web performance tools, such as Google's open-source tool Lighthouse, which measures the core web vitals metrics.
How we built website overlays
The website overlay feature was written using native DOM JavaScript methods with a very limited number of third-party package requirements or libraries.
This means Ometria's overlays don't need a lot of JavaScript code to work, so they have a very low impact on web performance.
Website overlays are web components (custom elements) written in React with TypeScript.
Our overlays load after the page has been loaded (after the OnLoad event):
Metrics and scoring
Using the latest Chrome browser version of Lighthouse - Version 135.0.7049.42 (Official Build) (arm64) - with the default settings (simulated throttling and clear storage) on an Apple Macbook M1 (16 GB, macOS Big Sur version 11.1), we ran Lighthouse reports using the browser extension on an internal testing online store, loading our JavaScript tracker including the website overlay v2 plugin, and tested the impact.
The metrics reassured us that the plugin has a low web performance impact.
Before loading the overlay
After loading the overlay
We can clearly see that the impact on web performance is extremely low, with no impact on the SEO score.
Find out how metric stores are determined.
| Metric | Description |
| First Contentful Paint (FCP) |
Measures how long it takes the browser to render the first piece of content from the DOM. This is a very important user-centric metric for measuring page load speed. It also provides the first feedback to the user that the page is actually loading. |
| Speed Index | Reflects how quickly the visual content is available during page load. |
| Large Contentful Paint (LCP) |
Measures loading performance. A good user experience would be 2.5 seconds LCP from when the page starts loading. |
| Interaction to Next page (INP) |
Assesses a page's overall responsiveness to user interactions by observing the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user's visit to a page. The final INP value is the longest interaction observed, ignoring outliers. |
| Total Blocking Time (TBT) | Reflects the total amount of time between the First Contentful Paint (FCP) and Time To Interactive (TTI) where the main thread was blocked, preventing input responsiveness. |
| Cumulative Layout Shift (CLS) |
Measures visual stability. This is the number of times visible web page elements (fonts, images etc.) changing their position causes a web page layout shift. |
Comments
0 comments
Article is closed for comments.