Performance vs. Functionality: Making the Right Site Speed Tradeoffs

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. 

Milliseconds mean millions

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:

• Reducing average page load times by helped frozen meal provider COOK increase conversions by 7%
• For each in homepage load speed, digital storefront provider Mobify increased conversions by 1.11%, resulting in an annual $380,000 increase in sales

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.

The performance-first mindset

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:

Lighthouse metrics

• First contentful paint measures the time from navigation to the time when the browser renders the first bit of content. This is an important milestone for buyers because it provides feedback that the page is actually loading.
• First meaningful paint is essentially the paint after which the biggest above-the-fold layout change has happened, and web fonts have loaded. It’s important because elements that paint afterwards are not visible to the buyer.
• Speed index is a page load performance metric that shows you how quickly the contents of a page are visibly populated. 
• First CPU idle measures when a page is minimally interactive. Most, but maybe not all, UI elements on the screen are interactive. The page responds, on average, to most user input in a reasonable amount of time.
• Time to interactive measures how long it takes a page to become interactive which means it responds to user interactions within 50 milliseconds and displays useful content as measured by first contentful paint
• Requests counts the number of calls the browser makes to a resource
• Page size measures the amount of data transferred in total, while loading the page.

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.

Fixing performance killers

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 and website builder, be aware of the costs and benefits of the following items and optimize those you wish to continue using:

Image size

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.

Rotating images

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.

Carousels and mobile

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 <img> element to specify an array of images the browser can choose from.

Lazy loading

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 <img> tag, though beware your images won’t lazy load in other browsers.

Animations

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.

JavaScript and CSS

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. 

Web fonts

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: <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel=“stylesheet”>).

Code bloat

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.

Third-party apps

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 <head> tag. Scripts added directly into the <head> often have an immediate impact on performance. Quantify the value the apps add to your business. Compare the value with possible performance reductions. Remove unnecessary or value-destroying apps.

Third-party domains

Browsers 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.

Shopify’s online store speed report

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:

• A Google Lighthouse score
• A relative score: How your store compares to similar stores on Shopify
• A time-series graph of your Lighthouse score over time

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.

The performance tightrope

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.