Understanding the performance impact of Shoppable Videos
A fast, smooth shopping experience is essential in online retail. Many merchants use automated tools to check how quickly their pages load and how efficiently they behave as features are added.
This document shows what to expect when adding Shoppable Videos to your store, how it performs in testing, and how to choose an embedding approach that matches your goals for speed and customer experience.
Choosing how and where to embed Shoppable Videos
Where you place Shoppable Videos on your page, and how the script that powers them is loaded, affects two things:
- How fast the main part of your page feels to your customers
- How soon the videos appear and become interactive
There’s no single “right” choice; it depends on what matters most for your store. The explanations below will help you choose the setup that fits your goals.
1. Placing the videos above or below the fold
Above the fold
Putting the videos at the top of the page gives them maximum visibility and impact.
The videos load dynamically and appear shortly after the page — usually within a fraction of a second. This works much like product images, review widgets, or other interactive elements that pop in once their content is ready. In some layouts, the page may adjust a little when the videos appear, but this is normal and simple to control if needed (see Avoiding layout shifts (CLS)).
Good when:
- You want customers to notice the videos immediately
- You’re fine with the videos appearing a moment after the main content, which is expected and typically unnoticed by shoppers
Below the fold
Placing the videos further down the page has no effect on how fast the visible part of the page loads. Customers see the main content right away, and the videos prepare themselves in the background.
This usually gives the fastest “feel” to the page, since the top area stays unaffected.
Good when:
- Videos are not the main hero element
- You want the simplest setup with no risk of layout movement
2. How the Shoppable Videos script is loaded
The script that powers the videos can be loaded in different ways. This affects when the videos are ready to show up.
Loading the script early (e.g., in the page <head>)
Loading the script early lets the browser prioritize Shoppable Videos from the start. As a result, the videos appear at the earliest moment they can, giving shoppers the fastest and most fluid experience.
Good when:
- The videos are above the fold
- You want them to appear quickly
Loading the script later (near the bottom of the page)
Loading the script later ensures the main content loads first, which can make the page feel faster, especially near the top of the page, in the area customers see immediately when they land on the site.
The videos will still load normally, but they begin preparing a little later because the browser encounters the script further down the page. This means they appear a bit later than they would with earlier loading. This timing works well for both above-the-fold and below-the-fold placement, depending on how quickly you want the videos to appear.
Good when:
- You want the fastest-feeling initial load
- The videos are below the fold
- You don’t need them to appear immediately
Loading the script through Google Tag Manager (or similar)
Many merchants use Google Tag Manager (GTM) or another tag manager to load scripts. This works fine, but tag managers almost always run after the browser starts loading the page, which means Shoppable Videos will also start loading later.
This doesn’t slow down your page, it just means the videos appear later than with direct embedding.
Good when:
- You prefer managing scripts through GTM
- The videos are below the fold and don’t need to appear immediately
- You want to avoid editing your theme code
3. How placement and loading style work together
Here’s the simple version:
| Placement | Loading Method | What to Expect |
|---|---|---|
| Above the fold | Load early | Videos appear sooner; great for visibility |
| Above the fold | Load late | Videos appear a bit later; reserve space for best results |
| Above the fold | Load via GTM | Videos appear the latest; fine for some setups, but timing matters |
| Below the fold | Load early | Videos ready quickly in the background |
| Below the fold | Load late | Smoothest-feeling initial load |
| Below the fold | Load via GTM | Usually perfectly fine — customers haven’t reached the videos yet |
Choosing the best approach for your store
If you want the videos to be a main visual element: Place them above the fold and load the script early.
If page speed is your top concern: Place them below the fold and load the script later in the page.
If you want the simplest setup without editing code: Use Google Tag Manager and place the videos below the fold.
If you want a balanced approach: Above the fold + reserved space + early script loading.
Understanding the effects of Shoppable Videos on Lighthouse audits
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 Shoppable Videos, we regularly run 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 Shoppable Videos web component 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 are 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.
Avoiding layout shifts (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 Shoppable Videos loads dynamically, placing them above the fold may cause a small layout adjustment when they appear. 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 Shoppable Videos before they 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.