When you shop online at other sites, do you enjoy it when the pages take forever to load? Probably not! The same goes for potential customers browsing your online store. They expect a smooth, snappy, and enjoyable experience - and if delivered - they’re much more likely to purchase.
In fact, improving your load time by 0.1s can boost conversion rates by 8% (as shown in the Milliseconds Make Millions study commissioned by Google).
To verify this ourselves, we ran an 18-day site speed split test, for one of our Shopify Plus clients, between Render Better Installed (Treatment) and their unoptimized site (Original). After 115,248 visits and $564,289.28 in purchases, Google determined the Treatment was 95% likely to outperform the Original - I’ll take those odds!
The results were fairly impressive:
Despite their store starting with decent performance metrics, a strong brand, and fanatical customers on relatively fast devices, a faster site still produced phenomenal results!
So will improving your store's speed boost conversions?
Maybe... it’s not quite as simple as a faster site = more money. There’s a science to web performance optimization, and some common pitfalls you’ll want to avoid.
In this article, we'll answer:
Web performance is the speed at which your site loads in a browser and how well it responds to user interaction. Site speed, page speed, and web performance are often used interchangeably, but there is a difference. In short, site speed encompasses all pages on your domain, page speed looks at a single URL, and web performance looks at speed in addition to other metrics.
47% of online shoppers expect web pages to load in 2 seconds or less and 40% of customers abandon a website that takes more than 3 sec to load.
In today's fast-paced world, you can't afford for your visitors to wait around while their screens slowly load with new information. A quick loading time will give your customers instant gratification and a positive experience on your site that can lead them to make a purchase. Not to mention, it can reduce ad waste and create a solid foundation for all your other marketing efforts.
Additionally, Google is now factoring Core Web Vitals into their search rankings - which include measurements of load time, interactivity, and visual stability. Since 2010, speed was a factor for desktop searches and since 2018, speed has been a ranking factor for mobile searches. As of June 2021, Google has prioritized 3 performance metrics in their ranking signals.
According to Google's Web Vitals Q&A, URLs that have either "needs improvement" or "good" thresholds for LCP, FID, and CLS will receive a ranking boost. URLs in the "poor" range won't be penalized necessarily, but you should consider prioritizing optimizations for these pages if you want to outrank your competitors and provide an optimal user experience.
Good ranges for Core Web Vitals are within 2.5 seconds for LCP, 100ms for FID, and 0.1 for CLS. Anything over starts feeling sluggish for many visitors, and will negatively impact their experience with the site. That said, you should aim for the best scores possible because every millisecond counts when it comes to improving conversions and user engagement for your online store.
Google Search Console will give you the most accurate and up-to-date insights into these 3 metrics based on real user data. The above example showcases one of our customers who installed Render Better on July 15, 2021 and has seen the majority of their URLs shift to good, for both mobile and desktop, as a result.
You can also analyze individual URLs in Google PageSpeed Insights. If the URL has enough real visitors, you can see "Field Data", but if there aren't enough samples, you can only see "Lab Data" which is based on a 75th percentile slower connection and device. “Origin Summary” shows real user data for your entire domain. This report will also detail recommendations to improve each metric.
Be careful not to rely on the overall Lighthouse score at the top (51/100 in this example), which is calculated from your lab data and can easily be manipulated to make your site seem fast for tests, but potentially worse for real users. We wrote about an LCP hack for example, and sadly, some people are selling this and other cheats as solutions. Thankfully, Google is catching on to these tricks, just like they do with “black hat” SEO tactics.
Shopify's admin area also now includes a speed score which you can navigate to via Online Store > Themes > Online store speed > View report (or simply paste this /admin/reports/online_store_speed after your-brand.myshopify.com). This report is also based on lab data rather than real user data.
Given the PSI score of 51/100 and Shopify speed score 40/100 above, even after we installed Render Better, you’d think this site performs poorly right? Not quite. This customer has all green real user Core Web Vitals on PageSpeed Insights and has reported better performing PPC ads - a prime example for focusing on real user data and not relying on test scores.
You can have a high speed score, with low impact to real user experience. Likewise, you can greatly improve customer experience and KPIs through proper optimizations, yet still have a relatively low speed score - like our example screenshots. The latter is much more important.
As a good rule of thumb, use lab data to detect performance shifts when you make code changes, add third parties, or if there are updates to Shopify's platform for example, but use real user data such as Core Web Vitals in Search Console, KPIs, and customer feedback to measure the success of your optimization efforts.
If you have more red and yellow than green… check out this guide for investigating your performance issues and keep reading for some tips on how to fix these common issues.
When it comes to web performance, your potential customer wants two things:
If your optimizations help with either of these, your visitor is more likely to make a purchase. Doing this well is an art and a science.
Frequently, we hear the wrong tips given in various communities for how to improve web performance for Shopify:
Shopify Speed Technology - already provides a CDN, asset minification, and image compression by default, so spending your time here is wasted effort. Plus, they announced some additional performance updates, which we discussed in our Shopify Unite 2021 recap.
Removing Third Parties - not always an option since most ecommerce sites rely on them for various features. If you don't need it or receive very little benefit, then remove. Otherwise, deferring, switching to an alternative, or coding your own solution are better recommendations (in that order).
Lazy Loading Images - can sometimes hurt your performance. Delaying content below the fold can help, but delaying content above the fold will make the user experience worse.
Switching Themes - equals hitting the randomizer button and crossing your fingers. Some are better than others, but all will require custom optimizations if you want to maximize performance. Switching often comes with a large cost, especially for bigger sites. Only do this if you have other reasons besides speed.
So then, what really moves the needle?
Picture the connection between your store and your visitor's browser as a funnel, and you have to get everything from the top of the funnel to them. If you're trying to push all the content and third parties through at once, speed will suffer and your visitor will lose patience.
If you can deliver the website content and functionality your potential customer wants as quickly as possible, and delay the rest, without compromising analytics or features, then you've mastered the art of web performance.
Sounds simple, but it's technically difficult.
The best way to explain, might be by breaking down the optimizations we applied for our case study client from earlier.
First, we addressed FCP by reducing render blocking resources like stylesheets and JavaScript - typically things that stop the browser from getting to the actual content and displaying it (hence “blocking the render”).
Next, we applied critical CSS, which means we inlined styles needed just above the fold, into the head section. The rest of the stylesheets aren’t loaded at all until after the first visit, making it so the browser only has to request what’s critical. We did something very similar with their JavaScript as well.
If you're not tech savvy, a quick aside... stylesheets affect how something looks and JavaScript affects how something behaves.
Often, developers add lots of JavaScript that has to load before all the content a user wants to see. Most of which isn’t necessary immediately, such as cart functionality and chat widgets.
Themes and third parties insert a lot of JavaScript and CSS, so we defer much of this until after the content is loaded. Your visitor doesn’t care about your third parties, they care about seeing the content fast. For example, your analytics, popup, and chat bubble are not important immediately, but by default often get high priority.
Imagine walking up to a store in the mall and before you can even see what's inside, the store owner is outside asking you for your information - terrible experience right? Analytics are important for a business, but shouldn't take priority over what your customer wants.
Additionally, we schedule third parties to load after the content is visible, sometimes even further until the user starts interacting with the site. In other cases, you might want these features to load quickly - for example: standalone pages that utilize a widget embed to display reviews or contact forms, and those third party features are the main priority for your visitor.
The solutions we mentioned so far will improve both FCP and LCP, meaning site speed or load time, but there's still more to consider.
A common issue by default - browsers don’t know what dimensions an image should be until after it downloads an image, and which shifts content around as it’s displayed. You can fix this by specifying, in advance, the dimensions of every image on every page, and the browser then knows what the dimensions should be while downloading, so it’s not shifted once displayed.
Thankfully, we have a feature built into Render Better that gives images a set width and height automatically, else this would be a pain to do for every current and new image manually.
Interestingly, some optimizations you apply to improve load times might cause CLS issues in the process, which is why you have to carefully ensure you’re not trading one metric for another - every site is different, and this is why web performance is an art.
Before you get too worried about your site, or how to apply our recommendations, let’s determine if it’s worth your time and money.
Optimizing your code could enable you to turn more visitors into happy customers. Your degree of impact will vary based on: sales volume, current performance metrics, traffic sources, device types of your ideal customers, marketing efforts, business resources, and more.
Stable, but rocky performance: If you have lots of traffic and sales with poor performance metrics currently, then you're definitely leaving money on the table.
Campaigns: If you're planning a big promotion, then you should consider optimizing performance first, so you can maximize the ROI from your efforts - especially during shared holiday sales like Black Friday and Cyber Monday when the competition is high.
New store: If your online store is small and you have a limited budget, you're better off spending money building your brand and promoting your products. If you have the budget and you're aiming for perfection, then consider laying a solid foundation with an optimized site out of the gate.
Growing quickly: If you’re scaling rapidly with more content and features, you should consider web performance optimizations soon, before too much technical debt accumulates.
Maybe none of these scenarios apply to you, but you’re still interested in the potential gains from a faster site. If so, we can help!
Learning how to do all this yourself will take a lot of time, finding a developer with Shopify and performance expertise can be costly, and many solutions are cookie cutter at best, leaving you hopeful your site still functions after installing.
Our developers have years of Shopify and web performance experience, as you might have assumed, and our solution can automate a lot of this effort, but before we shake hands, let’s chat.
Book a free 30-minute video call with one of our Shopify performance experts where we'll discuss your web performance and possible optimization solutions (including Render Better).
Best outcome: your site has great opportunity for improvement, we optimize your performance so you don't have to worry, and you earn more happy customers.
OR
You leave the call with a better understanding of your store's metrics and exactly where you can improve.
Either way, it's a great deal for you!