Ecommerce is a competitive industry! Keeping your online store both engaging and attention-grabbing is vital. To stand out in the crowd, ambitious ecommerce brands are creating unique and immersive shopping experiences, with trends like 360° rotating videos, interactive filtering, and augmented reality previews leading the way.
However, these ambitious features come with their own web performance challenges.
We have teamed up with Ecom Ideas to bring you the latest ecommerce UX trends, paired with expert tips for balancing web performance, ensuring that your website is fast, responsive, and engaging.
Check out our free 30-minute video webinar below where we deep-dive the site speed do’s and don’ts of some popular ecommerce shopping patterns
Together, Shawn and Linda dig into debugging web performance challenges, looking at waterfalls, network constraints, browser bottlenecks, and more.
Here’s a quick overview of each section, what we like, and appropriate timestamps to skip to:
360° Rotating Video
Why we like it
The first trending experience we are reviewing is the 360-degree auto-rotation landing video. This experience gives shoppers an immersive initial experience, is unique and attention-grabbing. It gives a full overview of the product, while breaking the norm of a static image above-the-fold on the product page.
Web Performance Challenges and Best Practices
Using video as your page’s Largest Contentful Paint (LCP) element can lead to slow loading times and drag down your Core Web Vitals scores. The idea is to get the main content in front of the user as early as possible. To do so, use pre-loading, compress video assets accordingly, and host the video from your own domain, as opposed to embedding youtube, vimeo, or other third-party library.
Interactive Color Filtering
Why we like it
Using interactive filters on search results or product listing pages are an excellent tool to narrow down your product search results. Filters can be added for characteristics such as size, color, gender, and more. Filtering should be very fast in order to keep your visitors locked into their journey through your catalog, without losing their focus.
Web Performance Challenges and Best Practices
Filtering a large set of results across many different attributes (or “facets”), can be a computationally expensive task, (just as Google!). In implementing a fast set of search filters on your website, there are a couple of common gotchas to overcome; namely the back-end computation time, the data transfer speed, and the front-end computation time. In the case in this video, it’s clearly the back-end which is the bottleneck. Caching common queries can help alleviate this excessive slowness.
Video Hero
Why we like it
Above-the-fold auto-play videos replacing hero images is a great way to captivate the audience with rich and engaging content as seen here on trueclassic.com. In this particular example, the visitor has the opportunity to tab between model sizes to explore individual fit.
Web Performance Challenges and Best Practices
At SpeedSense we know that brands need to build both an engaging shopping experience, without sacrificing site speed. Our decades of ecommerce expertise mean we know that making a website boring, just to make it fast, is not going to accomplish our clients’ marketing and business goals.
As with the 360° Rotating Video above, embedding a video as the most relevant visual element on the page can have its challenges for site speed. If the video is the hero element, ensure it is NOT lazy loaded, and host it from your own domain, in a modern video format such as webm. Additionally, consider whether you wish for the video to auto-play on load, or if the user must click to play. If the latter is the case, be sure to take advantage of the “poster” attribute, and consider implementing a facade in place of loading the video player. Above all, never use an animated GIF when a video could be used instead.
Picture-in-Picture Product Image Galleries
Why we like it
Picture-in-picture product image galleries allow to highlight additional product features such as the ability to slip on shoes hands-free as seen here on kizik.com. Calling attention to unique selling points of your products can be very powerful, and taking advantage of otherwise dead space in this layout is a nice touch.
Web Performance Challenges and Best Practices
Important for picture-in-picture implementations is the prioritization of the largest image or video first, above secondary content. Take care to ensure that the above-the-fold space is not crowded with too many elements – If everything is important, then nothing is.
This Kizik example shows that the underlying shoe image is coded with a lazy-loading instruction on the image tag. Lazy-loading above-the-fold images is a definite anti-pattern, as the template has instructed to the browser that the most important image on the page should not be fetched right away. This adds unnecessary lag in the perceived performance as the page loads.
Additionally, this UX pattern adds complexity on the asset generation side, which has less to do with web performance and more to do with your e-commerce operations team and their product information and publishing workflow.
Size-Inclusive Model Imagery
Why we like it
Great imagery sells. Helping your customer imagine how their life is better with your product helps.
Swapping product shots to fit a wide variety of body types is a great inclusive Product and Category page customization. Alo Yoga has done a great job implementing the model swap, replacing product photography with different models. While it certainly enhances the user experience, we are curious if this also reduces the product return rate.
Web Performance Challenges and Best Practices
There will always be a need to deliver high-resolution, colorful, impactful graphics as long as we use a browser to shop. This implementation is no different. The only gotcha here would be to ensure that the visible experience is prioritized in the page load lifecycle. Clogging up the network and CPU with dozens of images which never get viewed is not helping your website. The Alo Yoga case here does a great job of only loading images as they’re needed, on interaction.
TikTok style UGC Videos on the Product Detail Page
Why we like it
Animation and shoppable video can definitely make your product page UX stand out. Showing real UGC and influencer promotional assets in-context helps add credibility to the brand and product. This example is using the Tolstoy video app.
Web Performance Challenges and Best Practices
When adding any supporting assets, plugins, or apps, we need to be careful. Ensure that the speed of the primary content on the page is not impacted by adding more. It’s helpful to remind ourselves of the web design strategy known as Progressive Enhancement. In summary, deliver the basic functionality in a stable, performant way, then focus on adding layers of improvement. Don’t start with the polish.
Since this isn’t the primary content on the page, ensure it is loaded later and does not compete with the critical, first-party, above-the-fold assets for CPU and network time. If the secondary content is also above-the-fold, ensure that the space it will populate is reserved with CSS in the empty page skeleton.
Animated Cross-sell in Cart Drawer
Why we like it
Product-specific cross-sells for items already in your cart are a great way to boost Average Order Value (AOV) and cart size. Your customers will also enjoy an improved experience in shopping for corresponding accessories or complimentary items. Using video to highlight these related products is engaging and fun.
Web Performance Challenges
Often product recommendations are powered by a third-party plugin, app, or integration. As with all third parties, be wary of the execution order, and ensure this secondary content is not interfering with the performance of your cart and checkout experience.
Ensure your animations and motion graphics are built with either pure CSS/JS, or a modern video format. If you ever hear “let’s add a GIF” in the boardroom, translate that to “webm video” in the Jira ticket.
Image Hotspots in Page Promotions
Why we like it
Hotspots in influencer social images pulled into alo Yoga’s site are one of our favorite ecommerce ideas. Displaying fashion in the wild on real people and giving the ability to directly jump to the product detail page for purchase is fantastic! Now, can this be done in a performant way?
Web Performance Challenges
Adding clickable targets over top of an image is not rocket science, and can easily be done in-house by most dev teams. That said, the operational coordination between product photography, User Generated Content (UGC), and your product catalog may make this challenging to merchandize in-house at scale. For this reason, it may be operationally more scalable to leverage a third party tool to add this functionality.
If it has to be above-the-fold, opt to build a high-performance, but low-scale solution. If it’s loaded further down the page, as in this scenario, then opting for a third party tool and using an intersection observer to lazy-load the assets on scroll would help initial page load.
Clickable Hotspots Above-the-Fold
Why we like it
Just as cool as hotspotting user-generated or influencer content to help with the purchase is to add feature hotspots to your product detail page images to help convince the visitor of adding a product to the shopping cart.
Web Performance Challenges
As mentioned in the previous example, coding image hotspots directly would be the most performant in most cases, as you don’t need to over-build for any possible image, or any possible content pop-up. Depending on your stack, this also opens up the possibility of server-side rendering the component, or caching the HTML response directly in your Content Distribution Network (CDN) for lightning fast page loads; something that would not be feasible with a third party JS widget.
This section of the video shows both a PDP image example, as well as a homepage hero banner, both built in a performant way.
Thumbnail Images in Menus
Why we like it
There is one sure way of helping users navigate through your site—and that is with visual cues such as category or product thumbnails in your mobile navigation. We find this visual aid particularly useful when browsing a site whose product categories you are unfamiliar with. A layman who’s ever searched for car parts knows what we are talking about.
Web Performance Challenges
Aim to prioritize visible content before off-canvas elements, such as icons or imagery in hidden menus. Typically these assets can be well compressed, and rarely interfere significantly with web performance. Use general image optimization best practices like ensuring the assets use webp file format, and have long cache headers set so that the browser doesn’t have to reload the same images on every pageview.
Put your best foot forward
In summary, creating a fast and engaging shopping experience is key to standing out and driving conversions. Implementing the latest trends can set your brand apart, but it’s important to do so without sacrificing site speed.
If you have any questions or need help balancing performance and design, schedule a free call with SpeedSense today. We’re here to help you implement these strategies without reinventing the wheel.
![How Failing to Optimize Website Animations Hurts Conversions and the Planet [Website Review]](https://cdn.prod.website-files.com/631ceae106796a334652c01e/643f291eff5bf18704abeb26_Thumb%20sram.webp)
