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 or3D product modelingor immersiveaugmented 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 canincrease page views by 94%. High-definition product videos canlift conversions by 80%. Increasing the number of high-resolution product images candouble conversions.

Feature-rich ecommerce sites can turn more shoppers into customers. But the very same features can alsomake 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 acustomer experiencefull 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 canmake 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, thatone-second delayleading to a 7% loss in conversions can meanthousands of dollarsin lost sales each day. Other data shows that improving mobile site speed by justone 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)’ssurvey reveals the average retailer’s website is still too slow, and their mobile sites are evenslower.

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 percentof 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. Googlescores sitesbased 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’sLighthouse toolorPageSpeed Insightstoscore their siteagainst 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 Lighthousewreaked havocon 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 paintmeasures 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 paintis 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 indexis a page load performance metric that shows you how quickly the contents of a page are visibly populated.
• First CPU idlemeasures 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 interactivemeasures 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
• 请求counts the number of calls the browser makes to a resource
• Page sizemeasures the amount of data transferred in total, while loading the page.

The culprits in many cases, according toanalysts, 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 andwebsite 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 canincrease revenue per visitor (RPV) 17%. But the size of your images impacts speed. Each pixel equalsfour bytesof memory. Devices lacking available memory and larger images slow loading times.Compress imagesto improve load time and site speed score. Consider using image compressors liketinyjpg.comorshortpixel.com. Ecommerce sites with higher site performance scores oftencap 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 canlift 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 todownload many more picturesthan traditional 2D product photography.Optimize rotating imagesby reducing image quality and dimensions and using acontent delivery network (CDN)so images are automatically served from the closest server to the user.

Carousels and mobile

They’re actuallyconversion rate killers. Eliminating carousels can make a page load faster byreducing the total page size. Replace within an optimized hero image. Be sure todeliver the image responsivelyso images fit best based on the screens on which they’re being viewed.Google engineers adviseadding ansrcset attributeto an element to specify an array of images the browser can choose from.

Lazy loading

Instead of automatically downloading every image on your site,lazy loadingonly 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 likeLazyLoadandyall.js. If most of your visitors use Chrome, lazy load selected images by adding theloading=“lazy”property to the tag, though beware your images won’t lazy load in other browsers.

Animations

Animated GIFs, like those that demonstrate product use, canincrease conversions 103%. But Google engineers say GIFs are massive and should bereplaced with video. Videos are often 80% smaller which can improve loading performance. If you insist on animations,CSS animationsshould be created without forcing layout changes or pixel repaintings. Avoid properties that force your layout to change. In using JavaScript, opt for therequestAnimationFrameas it usesfewer system resources.

JavaScript and CSS

Prior toHTTP/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. Considersplitting your code, or separating your CSS into smaller files, tolimit the number of scripts downloaded. Google recommendsmigrating to HTTP/2as it eliminates concurrent request limits and the lack of header compression.

Web fonts

High-convertingproduct pages,其中包括精心设计的产品描述,overcome buyer objections. But buyers can’t be persuaded if yourweb fontsdon’t show immediately. If external fonts aren’t supported by default, they must be downloaded which can cause delays.Swap external fonts for desired fontsthat 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”>).

Code bloat

Minificationgets rid of redundant, unnecessary, or bad code that can slow load times. Removing poorly coded HTML, CSS, and JavaScript on your sitereduces the amount of datayou send to users without impacting functionality. Google engineers suggest usinguglification in JavaScriptandSVGO(图片)进一步优化网站的代码。如果你’re already on Shopify Plus, we automatically minify SCSS.liquid. We also offerwhitespace controlling tagsto help theme developers remove some bloat in the rendered HTML.

Third-party apps

On-site search tools candouble conversion rates. Personalized product recommendation engines can account for12% 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,identifythe number synchronous scripts, stylesheets, or fonts loaded from third parties within your tag.Scripts addeddirectly into the 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’smost important(CSS before scripts and images) and download that first. Site speed can be compromised when browsersbelatedly discover resources, especially those from third-party domains—think Google Analytics or Tag Manager. Use resource hints topreconnect to key third-party domainsto help browsers download faster. Google engineers recommendrel=preloadas 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.