Bells and whistles cut both ways. While adding innovative features to an online site can increase conversions, they can also slow your site’s speed. And slow websites have been linked to higher bounce rates and lower conversions.
The trade-off is even more glaring as you grow. Customers expect more of bigger businesses. But some of the features that differentiate your brand—think large product collections or 3D product modeling or immersive augmented reality (AR) shopping experiences—can be performance killers.
The trade-offs you make to functionality, experience, and design dictate your site’s performance, and it’s all about striking the right balance between performance and functionality. There is no one-size-fits-all guide for everyone. Helping you make the right tradeoffs for your brand is why we created this post.
The choices you make can earn or cost you millions of dollars. Interactive 3D product modeling can increase page views by 94%. High-definition product videos can lift conversions by 80%. Increasing the number of high-resolution product images can double conversions.
Feature-rich ecommerce sites can turn more shoppers into customers. But the very same features can also make your site heavy, slow it down, and cause shoppers to leave before it renders.
The need for speed is understood universally—a one-second delay in page load time can cause a 7% loss in conversions—but delivering a customer experience full of rich media, instructional videos, inventory insights, live chat, payment options, personalization engines, and customer reviews, demands features and third-party solutions that can negatively impact site performance.
It means milliseconds matter and can make you millions:
As stated above, that one-second delay leading to a 7% loss in conversions can mean thousands of dollars in lost sales each day. Other data shows that improving mobile site speed by just one tenth of 1% can lift conversions 8% and spending 10%.
Fortunes are made and lost based on how brands thread the needle between site speed and functionality. Despite this, the Retail Systems Research (RSR)’s survey reveals the average retailer’s website is still too slow, and their mobile sites are even slower.
Even worse, many have no idea how they stack up.
Even if you haven’t conducted a site performance audit, others have. Eighty-two percent of websites analyzed have issues that significantly affect performance and 44% have what researchers call critical issues.
Google is also keeping score, even if you’re not. Besides negatively impacting customer experience, performance issues can harm discoverability and organic search rankings. Google scores sites based on speed, among other factors, to rank and recommend sites. Just as you had to develop a mobile-first mindset, now you must develop a performance-first mindset.
Businesses can use Google’s Lighthouse tool or PageSpeed Insights to score their site against competitors’. The tool runs a series of audits to generate a performance report, and offers suggestions for sites receiving failing audits to improve their page.
Ecommerce sites are being graded particularly hard. The most recent version of Lighthouse wreaked havoc on some of the biggest ecommerce retailers: Performance scores for nearly 75% of ecommerce sites, according to the analysis, plummeted. Brands like Amazon, Apple, and Walmart saw their performance scores drop significantly.
Here’s what Lighthouse is judging you on:
The culprits in many cases, according to analysts, are image-rich sites and overly large images. But these aren’t the only performance killers plaguing ecommerce stores.
Before we show you how to check your site’s score and show you how it stacks up to other brands like you, we’ve created a list of the most common features that, while helping you differentiate your brand and offer a high-converting customer experience, can also slow your site. And we’ll also help you fix them.
The very same features you and your customers love may also be harming your store’s performance. Your images, videos, carousels, Instagram feeds, and analytics tools improve store functionality and the buyer experience. But each feature you include demands network resources to function. Some features demand more, others less. But together, a group of features can have a noticeable effect on store speed.
Making informed decisions about the tradeoffs includes calculating the benefit of a particular feature with the burden it places on overall page speed. Be sure the benefit a feature provides warrants the reduction in speed and user experience. When auditing your site, be aware of the costs and benefits of the following items and optimize those you wish to continue using:
High-resolution images can increase revenue per visitor (RPV) 17%. But the size of your images impacts speed. Each pixel equals four bytes of memory. Devices lacking available memory and larger images slow loading times. Compress images to improve load time and site speed score. Consider using image compressors like tinyjpg.com or shortpixel.com. Ecommerce sites with higher site performance scores often cap image size at 142KB. Optimizing images, according to Google, ensures your site sends as little data as possible and represents a large opportunity to boost performance.
Using 360° rotating images can lift conversions 27%. They allow shoppers to view a product from every angle rather than just two dimensionally. But to get an all-around view, users have to download many more pictures than traditional 2D product photography. Optimize rotating images by reducing image quality and dimensions and using a content delivery network (CDN) so images are automatically served from the closest server to the user.
They’re actually conversion rate killers. Eliminating carousels can make a page load faster by reducing the total page size. Replace within an optimized hero image. Be sure to deliver the image responsively so images fit best based on the screens on which they’re being viewed. Google engineers advise adding an srcset attribute to an element to specify an array of images the browser can choose from.
Instead of automatically downloading every image on your site, lazy loading only initially shows shoppers images at the top part of your site. Only after users beggin scrolling down will the page fetch the images for that section of the page. Lazy load your site with JavaScript libraries like LazyLoad and yall.js. If most of your visitors use Chrome, lazy load selected images by adding the loading=“lazy” property to the tag, though beware your images won’t lazy load in other browsers.
Animated GIFs, like those that demonstrate product use, can increase conversions 103%. But Google engineers say GIFs are massive and should be replaced with video. Videos are often 80% smaller which can improve loading performance. If you insist on animations, CSS animations should be created without forcing layout changes or pixel repaintings. Avoid properties that force your layout to change. In using JavaScript, opt for the requestAnimationFrame as it uses fewer system resources.
Prior to HTTP/2, it was common to bundle styles and scripts in HTTP/1 environments. Doing so improved performance by limiting the number of requests. This is no longer the case though in an HTTP/2 environment. Consider splitting your code, or separating your CSS into smaller files, to limit the number of scripts downloaded. Google recommends migrating to HTTP/2 as it eliminates concurrent request limits and the lack of header compression.
High-converting product pages, which include well-crafted product descriptions, overcome buyer objections. But buyers can’t be persuaded if your web fonts don’t show immediately. If external fonts aren’t supported by default, they must be downloaded which can cause delays. Swap external fonts for desired fonts that load immediately by adding a font-display: swap property in your @font-face declaration or, if you are using Google Fonts, a & display=swap URL parameter (for example: https://fonts.googleapis.com/css?family=Roboto&display=swap” rel=“stylesheet”>).
Minification gets rid of redundant, unnecessary, or bad code that can slow load times. Removing poorly coded HTML, CSS, and JavaScript on your site reduces the amount of data you send to users without impacting functionality. Google engineers suggest using uglification in JavaScript and SVGO (for images) to further optimize site code. If you’re already on Shopify Plus, we automatically minify SCSS.liquid. We also offer whitespace controlling tags to help theme developers remove some bloat in the rendered HTML.
On-site search tools can double conversion rates. Personalized product recommendation engines can account for 12% of a brand’s sales. But third-party solutions can slow your site and cause visitors to leave without making a purchase. When auditing your site, identify the number synchronous scripts, stylesheets, or fonts loaded from third parties within your
tag. Scripts added directly into the often have an immediateBrowsers guess what’s most important (CSS before scripts and images) and download that first. Site speed can be compromised when browsers belatedly discover resources, especially those from third-party domains—think Google Analytics or Tag Manager. Use resource hints to preconnect to key third-party domains to help browsers download faster. Google engineers recommend rel=preload as a hint resource that allows early fetches of critical resources before the browser would otherwise discover them. Hinting can result in faster page rendering.
But before you start tinkering, you have to measure. To help you develop a performance-first mindset, Shopify has made it easier than ever to score your site and see how you stack up against your competitors.
The goal is not just to make you “speed aware” but to put your site’s performance in context. Shopify Plus brands will see their speed score in the Analytics section of their admin that includes:
The report includes actionable recommendations like tips to improve site speed and a directory of partners that can help improve performance. But one of the most comprehensive ways to improve your site speed is to have an expert conduct a site audit.
Successfully balancing performance and functionality is like walking a tightrope. Each step you take can cause you to feel as if you’re leaning too far one way. The adjustments you make can feel as if you’re over correcting.
Finding the right balance is unique to each brand, and depends on the value you place on a particular feature versus the reduction in speed that results. It also requires knowing what to change and how to change it.
You now have everything you need to instantly score your site’s performance, evaluate the trade-offs, and take action. The more you experiment and learn while developing a performance-first mindset, the faster you’ll find your perfect balance.
This article originally appeared in the Shopify Plus blog and has been published here with permission.
