Your Complete Shopify SEO Checklist Part 2: User Experience (UX)
How does user experience impact my e-comm site’s SEO?
Your site’s UX design is critical to consider as part of a holistic approach to SEO. Good UX leads to longer dwell times on your site, better click-through and conversion rates, and fewer bounces - all of which are important factors that Google considers when deciding a site’s total authority score.
Think of it this way: if you have very similar page content compared to a competitor site, but your page has a slower overall speed and a higher bounce rate, Google will rate your competitors’ page higher in search results because they believe users will have a better experience there. You don’t want that! Great UX helps move the needle for your search results long-term.
Read on to learn how to get your site performing properly so that you can achieve the best-possible rankings results.
But first - what is User Experience (UX)?
User experience (UX for short!) refers to how a person interacts with - and thus experiences - a product or system. It encompasses the entirety of their time interacting with the company and its products. Good UX design is critical for e-commerce: while it may be super-intuitive for anybody to shop in a brick and mortar store, it’s very easy for websites to get cluttered and confusing, especially for first-time visitors.
Let’s move on to the top UX considerations that can affect your site’s SEO.
You and I both know that not everyone visiting your online store will become a buyer.
But what if I could help you to bump up that percentage?
UX Factor #1: Site speed
Site speed is the number one reason for page bounces. It’s a huge contributing factor to a customer's first impression when they land on your site. If your site is lightning-fast, you’ll see improved conversion rates, better SEO rankings and more repeat customers. Site speed is super important - that’s why we’re starting off with it - but it can feel intangible compared to other UX elements.
Pulling your online store speed report in Shopify
To access your site speed report in Shopify, navigate to Analytics —> Reports —> Online Speed Score. Here you’ll find a number indicating your site’s overall performance versus other stores:
For a detailed speed breakdown, though, you’ll want to use Google PageSpeed Insights. More on that below. Now let’s look at the big four pain points that can impact your site’s speed.
Pain point #1: leftover/excess code from apps
Many apps add third-party code to your site’s theme upon install. This is necessary in order for them to work properly, but if you have too many apps installed on your site, it can have major consequences for the overall speed. A common misconception I see is users assuming that if they delete the app, their site speed will immediately improve. But that’s not true: often, Shopify apps leave code behind, even once uninstalled.
To keep things clean, I’d suggest doing regular app audits - perhaps quarterly - to ensure you’re actually getting use out of everything installed on your site. And, when it’s time to uninstall an unused app, reach out to that app’s support team directly to help remove any leftover code. Typically, support teams will either do this themselves, or they’ll have documentation on how you (or your developer) can make the fix.
Pain point #2: image (or video) size issues
File sizes can have a huge speed impact on e-commerce sites, which are typically image and video-heavy. Of course, shrinking images too much can result in a suboptimal user experience, so you’ll need to find the sweet spot for your particular site. Shopify has an Image Size Cheat Sheet that’s super helpful to reference here, and they recommend no more than 2mb/image as a guideline. (For what it’s worth, I’d suggest going even smaller whenever possible.) There are now many apps that can help to quickly compress large images on your site if the task feels too daunting to handle manually.
For video files, it’s always best to embed links from Vimeo or YouTube when you can, rather than hosting the files directly on-site. (Also, as we all know, overly-compressed videos can look terrible anyway.)
Pain point #3: working from an out-of-date theme
This one is short and sweet, but: Shopify 2.0 themes are optimized to be faster and run more efficiently, so if you’re still running your store on an older theme, it’s likely worth making the upgrade for that reason alone.
Pain point #4: custom fonts
Custom fonts take longer to load and can cause delays when users first land on your page. Your site’s overall Speed Index is determined in large part by whether or not text is visible during webpage loading, so this is an important metric to get right and keep your website usable. Think about it - if users can’t see any text at first, it’s going to have a far larger impact on their ability to use the site than if only the images haven't been loaded yet.
Shopify has a list of all available fonts, including system fonts, which are ones that come preloaded on all computers. If your site is using a custom font, it’s worth setting a standardized system font as a “fallback” in the site’s code, so that page text still displays while your custom font loads. (Assigning a fallback font requires code edits, so proceed carefully when deciding whether or not to use custom fonts.)
How will I know when to compromise on site speed?
The fact is, you can’t delete all of the apps - and images - on your site just to achieve maximum speed. You’re always going to be compromising in some way between your site’s content and functionality. How do you know when to compromise, though? It’s going to be different in every case, but one great way to make informed decisions is by reviewing user data.
I really like MS Clarity for this - it’s a free heat map tool that uses click data so that you can see what features your customers are (or aren’t) actually using. For example, maybe you’ve installed an app on your product pages that’s generated customized cross-sell recommendations for each product. Sounds good in theory, right? But that level of customization might come with some speed lags - and if you review the data and see that customers actually aren’t substantially engaging with the recommendations, you might reassess whether or not to keep it installed.
On a more technical note, Shopify offers a Theme Inspector Chrome Extension that can help you identify the slowest part of your site’s liquid code so that you know what to fix. This extension is going to be most useful for developers or people with some level of coding knowledge, but if that’s you - congrats! And get ready to geek out on some really in-depth site speed insights.
Understanding Google PageSpeed Insights:
For the rest of us non-developers out there, Google PageSpeed Insights is a great resource to help determine what, exactly, is slowing your site down. But if you’re new to the platform, all of the technical jargon can be super confusing. Here’s a breakdown of some key terms:
Speed Index: this is the one to pay attention to. Speed index is an overall metric that tells you how fast content is displayed on your site during page load. It’s generated by comparing your site to other existing sites on the web and ranking you in comparison - so a green speed index (the best rank) means your site is performing well in comparison to other sites. A red speed index (the slowest, and worst, option) means your site is performing much worse than others.
Largest Contentful Paint (LCP): a metric that measures when the page’s main content - often the hero image - has loaded, which lets users know the site is working (and useful) - as opposed to a broken link.
First Input Delay: this measures a page’s loading responsiveness and indicates how often (if at all) users must deal with unresponsive pages.
Cumulative Layout Shift: have you ever been browsing a web page - like an article - and all of the sudden the layout shifts as you’re reading? It’s really confusing, right? This metric measures a site’s visual stability, which is what causes either a stable viewing experience OR those unexpected shifts we all hate.
UX Factor #2: Mobile-friendliness
Google uses mobile-friendliness as a factor in their search ranking algorithm, so it’s important from an SEO perspective. But beyond that, mobile-friendliness is one thing you have to get right in order to create great user shopping experiences. Currently about 40% of all e-comm transactions take place over mobile, and that number is only going to continue to grow. (Source.)
Even if customers complete their purchase on desktop, they’re still very likely to encounter your site for the first time from their phone screen. You want to make sure your mobile site is as easy-to-use as possible. And guess what? If you do that, Google will reward you.
Top mobile UX considerations for e-comm sites:
Convenient menu design and layout: we’ll be talking more about menu link structures in the next section, but for now let’s focus on design. You’ve probably been on lots of sites where the mobile menu was challenging to work with. Mobile menus should easily fit within one phone screen, and be proportioned so that the user can click in and out with ease. I really like the proportions of Everlane’s mobile menu, which has tabs for Women’s vs. Men’s product and makes it super simple to look at subcategory links:
Image sizes and cropping: do images look correct on mobile? Is anything cut off or sized incorrectly? Are any images extending below the fold, forcing customers to have to scroll to see basic info? Take Marcella’s collection pages, for example: on mobile, the header images are so tall for each collection that they block users from seeing shoppable products (unless they scroll). You don’t want that!
Check all pop-ups: are they too large, or proportionally overwhelming on mobile? Remember, just like with menu design, pop-ups can be really hard to work with on phone screens. If you overwhelm customers with full-screen pop-ups they can’t easily exit out of, they may just leave. (Who among us hasn’t done this?)
Are buttons large enough? Same deal - make sure important design features, like Add to Cart buttons, are proportional on mobile.
Content readability: are any fonts too small? Conversely, is any text so large that it doesn’t fit properly on the screen?
You’ve convinced me! How do I audit my site for mobile-friendliness?
Google’s Mobile-Friendly Test tool is a great (free) way to quickly sweep your site for any issues. This tool is going to give you a quick high-level technical snapshot and call out any glaring errors; what it can’t do is give you granular ideas as to how to improve your mobile UX.
I’ve already recommended MS Clarity once in this article (to help make site speed/app related decisions), but reviewing user heat map data is also a great way to see where on mobile customers may be getting tripped up. MS Clarity tracks a metric called “rage clicks,” which is when a customer gets frustrated by something not working as expected and clicks multiple times. I see rage clicks a ton on my client’s mobile sites - maybe it’s because a link is slightly too small, or the dropdown menu isn’t working as expected. Either way, this type of data can be really helpful when it comes to optimizing your site’s UX.
Some mobile UX issues are easy to fix without coding or development support. For example, you can probably update font sizes, etc. on your own. But what if you complete an audit and notice you have a lot of complex mobile UX issues to fix? The easiest solution might be to look into a new Shopify theme. Many older Shopify themes just aren’t up to par with current mobile needs, and that’s okay, because there has been tons of improvement in recent years. Before you dive into a ton of expensive coding updates, consider browsing for an upgraded theme - it just might help both your site speed and mobile accessibility.
UX Factor #3: Link structures
Just like in a physical store, e-comm shoppers will discover new products on your site by browsing. You want to make it as simple as possible for a brand-new visitor to be able to browse your site, hone in on their products of interest and check out, all with (ideally) zero issues. Link structure is a critical part of this. (As an aside, smart link structure is doubly good for your site’s SEO for some technical reasons - we’ll be covering that in Part 3 of this series.)
Here are some link considerations to keep in mind for ideal user experiences:
Straightforward main menu design: your main menu needs to be under five links. From there you can move into dropdowns as needed - but you must keep the initial menu impression as straightforward as possible. If you’re freaking out, thinking, there’s no way I can pare down!! I only have one thing to say: if Target can do it, so can you. (And as a bonus: simplifying your menu structures also helps with mobile formatting!)
Footer links that clarify: make sure your site’s footers include a link to critical pages, like your “Shop All” collection. That way, if a user has scrolled down that far, they can still easily pivot to shopping if they like. Consider using columns or another type of easy-to-digest formatting in the footer so that users don’t get overwhelmed by all the info in your footer.
Clear link language: think of how a new customer will feel when they first click into your menu. Would it be overwhelmingly apparent to them based on your link language what product categories you sell? If not, you need to simplify. Your site’s links aren’t the right place to use cutesy, brand-specific terminology. Even Glossier, the queen of cute product titles, keeps their navigation links super-simple - and if they can do it, you can, too.
Easy navigation between collections: once a user has clicked into a specific collection, is it super-simple for them to navigate to a different one if they want? This sounds obvious, but a lot of sites miss this step.
Breadcrumbs are a must: you want to leave a trail of clues so that users know how they got to a specific page, and equally how they can get back out of it (if desired). This link trail has a technical name - breadcrumbs. Many Shopify themes have breadcrumb functionality built in - it just needs to be activated. Here’s an example of how breadcrumbs look on the Everlane site: they’re an easy-peasy way to orient your customers within your product offerings and page structure, and you need to have them.
This is part 2 of a 3-part series, Your Complete Shopify SEO Checklist. You can find Part 1, on Content, here. Part 3 on technical SEO is coming soon - watch this space! Meanwhile, do you have questions or comments? Get in touch.
