Understanding the performance impact of Shoppable Videos
Performance is a key factor in e-commerce. Page speed affects user experience, conversion rate, SEO, and advertising efficiency, and it’s common for merchants to use tools such as Google Lighthouse or PageSpeed Insights during development and optimization. Reviewing how third-party features influence these results is a natural part of that process.
This document explains how Lighthouse evaluates performance, how Shoppable Videos behaves in controlled testing, and how to ensure optimal results.
How Lighthouse measures performance
When you run Lighthouse, the score reflects the performance of the entire page, including:
- Your storefront framework and theme code
- CSS, fonts, images, and other core assets
- Analytics, personalization, reviews, and A/B testing tools
- Any third-party scripts, including Shoppable Videos
Lighthouse does not break down the performance cost per feature. Because of this, results from a production storefront should be interpreted as a full-page performance profile — not a direct measurement of any single integration.
Testing Shoppable Videos in isolation
To measure the true overhead of the widget, we ran Lighthouse tests on a minimal sandbox page containing only the Shoppable Videos component.
- Create an empty web page
- Have it load the Bambuser JavaScript library
- Place a
<bam-playlist>on the page - Configure a set of videos to display in the playlist on that page
- Evaluate the page in Lighthouse
No additional layout, scripts, content, or theme assets were included.
Across repeated runs, Lighthouse has consistently reported scores in the range of:
| Category | Result |
|---|---|
| Performance | 99–100 |
| Accessibility | 99–100 |
| Best Practices | 99–100 |
| SEO | 99–100 |
These results demonstrate that Shoppable Videos loads efficiently, avoids blocking page rendering, and follows current best practices for web performance.
The one area that may vary: CLS
The only Lighthouse metric that may differ depending on placement is CLS (Cumulative Layout Shift). CLS measures whether visible page elements move unexpectedly after initial rendering.
Because the widget loads dynamically, placing it above the fold may cause a small layout adjustment when it appears. This behavior is common among dynamic components such as recommendation modules, review widgets, and personalization blocks.
Preventing CLS
If maintaining a perfect CLS score is important, simply reserve space for the widget before it loads. For example:
bam-playlist {
min-height: 400px; /* Adjust for your design */
}
This prevents visible movement when the component renders.
If needed, we can advise on recommended sizing based on your layout.
Summary
| Consideration | Result |
|---|---|
| Load time impact | Minimal |
| Blocking behavior | None (loads asynchronously) |
| CLS sensitivity | Only if placed above the fold; easily mitigated |
| Lighthouse performance profile | 99–100 range across all metrics in isolated testing |
Our commitment
We continuously monitor performance standards and Lighthouse scoring behavior to ensure Shoppable Videos remains lightweight, fast, and aligned with modern web best practices.
If you would like assistance with implementation review or Lighthouse benchmarking on your own storefront, we’re here to help.