Through Ecom Ideas, we share innovative #CX inspo daily on LinkedIn, and are often asked “but how does this impact page speed”?
I asked #webperf expert Shawn O'Neill of SpeedSense to break down the performance specs of 11 trending ecommerce features, and share his tips on how you can implement them on your own sites in the most performant way.
360° rotating video
Rotating landing images are trending hard, with the likes of Gucci, Adidas, Yeezy and Beyonce’s Cecred (featured in the video below) using the effect.
But main-image product video above the fold is risky if not implemented well.
The problem
In the case of Cecred, the big issue is asset loading order.
The video file is the most important asset on the page, but 105 other files are requested before it (showing 106th position in the waterfall). This results in the browser waiting 4 seconds before it’s discovered at all, at 5s it starts loading, and it takes another 2.5s to fully download.
The fix
Preloading this asset gives the browser an indication to fetch the video early in the page load lifecycle.
With a preload tag in the head and setting the fetch priority to “high,” (versus letting the browser discover it in time) the video will be one of the first 2-3 files the browser pulls.
Generally, you can also use the “poster” video tag attribute (set to preload) to set the first frame of the video as a static image. This gets the main visual in front of the user immediately, and the video will transition seamlessly into playing after it loads. But in this particular case, because the first frame is in an awkward position, you’d get a flicker effect.
Interactive filtering experience
Alpina Paint’s inspiration-by-color experience is an impressive build – but the interactivity responds so. painfully. slow. it undermines the creative UX.
The problem
Although a request is made immediately upon clicking a filter, the request just waits, and waits and waits (for over 5 seconds!) despite being on a fast network. The CPU is quiet, it’s all backend calls.
The fix
Caching responses to various filter queries using a CDN can make this super-performant.
Compare Alpina to IKEA’s implementation which achieves a similar effect with far less lag. This client-side code makes a request to get the payload for the new filter set in just 74ms suggesting that the queries are cached, rather than hitting the server-side database to fetch results each time.
Video hero
Above-the-fold video is a super-common hero banner style, and True Classic’s banner comes with an additional twist – you can tab through 3 videos to switch model sizes.
True Classic gets it right by loading the video right away, and they’re correctly using video tags instead of a heavy 3rd party app with loads of unnecessary JavaScript.
But a closer look under the hood reveals additional drag on Web Vitals that impact the overall page load speed.
The problem
First Contentful Paint (what users see first) is only one signal in the Core Web Vital formula. Interaction to Next Paint (INP) – the new metric added to web vitals in March 2024 – factors how quickly your UI responds to user interactions like clicks and keyboard input (in other words, how quickly users can tell that something’s happening).
The cumulative impact of background tasks, JavaScript event handlers and queued up interactions make up this metric, and a quick peek at diagnostics reveals there’s performance issues hiding elsewhere across the site.
The fix
Analyzing the home page alone doesn’t identify what is causing site-wide INP issues, it’s also not practical or efficient to run manual diagnostics on every individual page of an ecommerce site (which can easily have hundreds of thousands of indexed pages).
Instead, you want to run a bulk scan with a tool like SpeedSense Sensai that can find the needles in the haystack that punch big holes in your Web Vitals score, such as large files, uncompressed assets, unused and unminified JavaScript, early off-screen images, unused CSS rules and render blocking resources.
For example, a 10ms drag on a single page may not look significant. But if it’s across all PDPs, it’s a high priority to fix, and the simple action to recompress a file and add it back to the site is a quick win.
Of course, you want to also prioritize your action items by severity and not chasing waterfalls. Sensai surfaces your top opportunities at-a-glance to optimize your sprint planning.
Picture-in-picture PDP gallery
Kizik’s picture-in-picture pulls the 2nd position video into the primary gallery image, brilliantly demo’ing the just-step-in value prop of its signature sneaks.
But implementation is King – how does Kizik’s fare?
The problem
Interestingly, the video loads before the primary static gallery image, which is the Largest Contentful Paint (LCP).
For users on slower networks particularly, the janky lag between video and big-image load can be particularly jarring.
Even worse, the LCP is lazy loaded. This can happen if 3rd party JavaScript that tells all images to lazy load – even if they live above the fold. But it’s also super common on Shopify sites that haven’t taken advantage of the new section properties in Liquid that help correct this in their themes.
Even worser (?) the primary image is an uncompressed PNG weighing in at 863KB! It should be a fraction of that size.
The fix
Compressing the primary image, resetting the priority order, removing the lazy load tag and using a vanilla video tagwould bring this right up to speed.
Shopify’s CDN will convert images to webp automatically but you still want to make sure you’re not feeding it bloated file sizes to begin with. Make sure to “export for the web” prior to importing, and make this part of your catalog management SOP.
“Swap model” image gallery
Alo lets users toggle-by-model to replace images with a different body type – a tactic that’s starting to trend across apparel sites – particularly for athleisure and intimates categories.
The good news is this is no more or less dangerous than having more images – provided they’re lazy loaded in a performant way. This means prioritizing above-the-fold images over assets that may potentially never enter the viewport.
The problem
No problems here!
But this could be a problem for your site if you don’t load the alternate images on demand. Check out the video for full diagnostics.
UGC video in Buy Box
Video apps like Tolstoy and Vestico enable you to embed TikTok-style videos directly into your PDP Buy Box as “secondary content”.
How risky a move is this?
The problem
You don’t want secondary content to hurt the performance of main site content – and in this case of Lelet (using Tolstoy), the implementation is fine. The main images load first before the video.
However, the video causes some Cumulative Layout Shift (CLS) – another Core Web Vital – by pushing the Buy Button down as it slots in. It doesn’t cause a massive shift, but Google does track all CLS as part of your vital score.
The fix
It comes down to how much CLS you’re willing to live with. You can embed these widgets anywhere on the page – the Buy Box is merely one touchpoint. And you can minimize other areas of layout shift, such as top-aligned cookie banners, to keep the cumulative movement within a reasonable amount.
Animated cart cross-sell
Away Travel demonstrates the value of its featured cross-sell with a mini-cart animation – a smart move given how no-brainer the companion to the just-added product – and attention grabbing to boot.
The problem
Performance is not bad on this one, though the low framerate makes the playback somewhat laggy. Even if there’s no performance bottleneck, the perception of lag can make it feel slow to the user.
The fix
A looping, compressed WebM file would solve the framerate issue and be just as performant.
Avoid heavy GIFs if you can, they’re an outdated file format that use a poor compression method for animation. Modern browsers have come a long way, we generally don’t need GIF on the web anymore.
UGC hotspot widget
Alo Yoga embeds shoppable Instagram cards with product tag hotspots (likely hardcoded into their Shopify theme, but possibly using Tagshop, Yotpo or Taggbox – it’s not clear).
The problem
It’s not a problem for Alo because they’ve loaded it low on the page and appears to be hardcoded in the theme vs extra JavaScript. It’s not render-blocking more important content on the page.
But such a widget requires a fair bit of JavaScript to run if it’s using an app. Images are pulled in from a 3rd party or are cached inside the component, and the feature needs to correlate the hotspot positions with a given set of products in the catalog.
The fix
Again, not so much a problem, but it’s a good idea to load these widgets lower on the page and make sure they’re not coming in earlier than more important assets.
If you’re on Shopify, use native functionality within a section rather than an app (some modern Shopify 2.0 themes like Enterprise and Canopy offer hotspots out-of-the-box).
Either way, make sure to monitor your INP (Interaction to Next Paint) scores after implementation and ensure your images are well compress and optimized for the Web.
Hotspots in image gallery
Hotspots can be added to above-the-fold, primary content without negative impact, as we see here with Early Majority’s image gallery (desktop only).
The problem
Overall, this feature has been implemented well. Even on a throttled network (simulating lower bandwidth), content comes in clean and smooth.
Once again, the problem is not with the element you might think – but with another element that impacts Core Web Vitals. In this case, it’s a top-aligned cookie banner that appears after core content loads causing – you guessed it – an unnecessary layout shift.
The fix
It’s easy enough to serve cookie notices through other means, such as bottom-bars or slide-in widgets. But of course, these can be more disruptive to users than layout shifts if they cover up important content or are otherwise irritating.
Also, make sure the content is not coming through for mobile devices so you don’t pay a performance penalty for the majority of your traffic.
Hotspot hero banner
The homepage hero banner is another place to play with hotspots. They’re a nice way to turn static content to interactive elements to show off value propositions, simulate product tours, or just make an image directly “shoppable.”
Piggybacking off the previous examples, if you’re considering hotspots on a home page hero, there are a few tips to optimize for performance.
This is a desktop-first feature, and you may run into art direction challenges if you decide to scale it down for mobile at various breakpoints, including images and text display, and the positioning of your hitboxes.
Performance-wise, ideally the background image loads behind and the interactive elements load in a transparent layer. This makes it quick (or just apparently quick to the user).
Images in mobile menus
Thumbnail images add visual appeal to mobile menus, and are a safe play as long as you follow best practices:
- Choose the right image format (WebP) and use compression
- Use small file sizes, around 10KB
- Set fetch priority to low on the image tags
- Lazy load where you can (make sure to QA as lazy loading may not work properly for all scroll positions)
- Pure vector graphics like SVG instead of a raster image often results in no additional requests (if your CMS permits)
Big thanks again to Shawn for sharing his technical insights with Ecom Ideas! 👉 Give him a follow for more #webperf content on LinkedIn!