Search engine optimization (SEO) is critical to your eCommerce business -- and let’s be real, specifically for Google. Nearly 88% of consumers use Google as their search engine. Therefore, as a savvy eCommerce merchant, you should care when Google makes any changes to its SEO ranking algorithm. The latest update from the power on high: Core Web Vitals.
Think your site is fine? A Searchmetrics analysis crawled over 2 million URLs and revealed that less than 4% of websites passed all Core Web Vitals tests. Part of the reason for this may be that as consumers expect richer online experiences, eCommerce brands are responding with more website bells and whistles – which can significantly affect speed and performance and therefore Core Web Vitals scores.
A Searchmetrics analysis crawled over 2 million URLs and revealed that less than 4% of websites passed all Core Web Vitals tests.
Google: Focused on UX
As you know, Google is always pushing for websites to improve user experience (UX) by rewarding or penalizing them for performance – remember optimizing for mobile and faster page loads in the past? Now, Google has introduced Core Web Vitals, a set of specific target metrics to measure “common signals” related to page speed, responsiveness and visual stability that it’s using in its SEO ranking algorithm. The good news for eCommerce brands is that these metrics are measurable and actionable.
While this may feel like a pain, know that when it comes to user experience, eCommerce brands and Google are on the same side – we all want to provide the best UX for our customers. Especially as mobile commerce (m-commerce) continues to grow. So, how do Google’s Core Web Vitals metrics translate to what you need to do on your Shopify Plus site? We’re happy you asked!
Core Web Vitals: A Quick Overview
For background, following is a quick overview of each of Google’s Core Web Vitals.
Largest Contentful Paint (LCP)
Measures perceived load speed and marks the point in the page load timeline when the page's main content has likely loaded.
Why this is important: Users need enough content to load on a page before they can determine if a page is relevant or useful to them. If it’s not fast enough, they’ll leave. Research shows that conversion rates drop 4.42% on average with each second of load time in the first five seconds. In the past, it’s been difficult to measure how long it takes for a user to get enough of a visual on a page to find the page useful. Google says speeding up the time for the main content on a page to load is a more accurate way to signal better UX.
First Input Delay (FID)
Measures responsiveness and quantifies the experience users feel when they click to a page by measuring how long it takes before a user can actually interact with the content on a page.
Why this is important: If a user can see but not interact with the content on a page, there’s a higher risk they’ll bounce. In fact, nearly 70% of consumers say that page speed affects their willingness to buy from an online merchant.
Cumulative Layout Shift (CLS)
Measures if there’s unexpected movement of page content or if the page content is visually stable as the page loads.
Why this is important: When page layout suddenly changes, users lose their place. They’re likely to have to hunt for the content they were looking at or may click on the wrong link. It’s frustrating, especially on mobile.
4 ways to optimize your Shopify Plus site for higher Core Web Vitals scores
At eHouse Studio, we do a lot of Shopify site audits and optimization work. When it comes to optimizing for Google’s Core Web Vitals, there’s a lot you can do, but there are four things in particular you absolutely must do that will make the most difference in terms of Core Web Vitals scores.
1. Avoid layout shifts
Because layout shifts are a real drag on user experience, Google really cares about this and so should you. In fact, as you read above, there’s a Core Web Vital (Cumulative Layout Shift - CLS) that specifically measures this. CLS occurs when visual elements, such as personalized content, ads and images, are dynamically added to the page as it loads, causing other elements to suddenly jump down or shift on the page. You’ve seen it happen: you’re reading something and suddenly you have to scroll back up to your place, or you point to a link, click and… miss.
To avoid layout shifts, always build a rough skeleton for a page that specifies the dimensions of each image and video versus letting the page resize them. Also use CSS aspect ratio boxes to “reserve” the space on the page for the image or video so it won’t move.
2. Eliminate automated or “interstitial” pop-ups
This is a tough call for some eCommerce merchants. You have to weigh the marketing value—conversions—versus negatives like lower SEO ranking and higher bounce rates. Google penalizes websites that have marketing-related pop-ups and interstitials (full-page pop-ups) that aren’t triggered by the user, such as calls-to-action for newsletter sign-ups or discount codes. Exceptions include legal disclaimers, such as for pausing users before they enter a site selling alcohol or asking users about cookie/privacy preferences. Google doesn’t like marketing pop-ups because they delay the user from getting to your (more valuable) page content. They’re particularly disruptive to the mobile experience.
When it comes to finding options, be creative. Try A/B testing ways other than pop-ups to convert customers, such as a sign-up banner under the page’s hero image. Or, if you must, at least reduce the size of the pop-ups so that users can still see what's on the screen and limit the number of pop-ups you deploy.
3. Optimize and size images
Rich eCommerce experiences usually involve a plethora of media, like images and video, that help convert customers to buy. Media can slow a page down. Therefore, it’s important to make sure you have properly optimized and sized your images so that they display faster. Also, a best practice to implement is “lazy loading,” which staggers the loading of images. Instead of all loading at once when the page loads, images load when the user scrolls down to the image. This enables the browser to focus on loading just a few images at a time, speeding things up.
4. Prioritize on-page scripts
Shopify merchants like their apps. Often, we see marketing apps, as well as analytics scripts and Facebook pixels, liberally applied to an eCommerce site. Too many scripts on a page equals slower page loads. It’s a good idea to audit what scripts are on a page, catalogue how many apps you’re using, and determine if and when they’re actually needed. If you want faster experiences for your customers, you should cut back on the scripts. If you feel like you can’t, be aware of the magnitude of the impact to site speed and use that information to help you decide.
As an indication of how much scripts affect site performance and how important of an issue this is for eCommerce, Shopify recently released a new default theme called “Dawn,” which uses the least amount of JavaScript possible to improve page speed.
Don’t be afraid to measure
Audit your Core Web Vital scores so you can identify what may need improvement during Shopify theme builds using Google Lighthouse. Note that eCommerce site speed scores (which impact Core Web Vitals metrics) tend to be lower than the general average, so you should instead benchmark against your competitors or the retail sector. Speed scores are lower for eCommerce sites because they tend to be weighed down by all those images, videos, and scripts mentioned above.
In addition, if you’re in the process of developing a custom Shopify theme, Shopify’s Theme Inspector for Chrome is a great tool/reality check for developers to use to monitor the complexity of the Shopify theme code and if it needs further optimization. A good rule of thumb: Shopify should be able to build the theme and serve it to the browser in under 500 milliseconds. Anything over 500 isn’t great – but if you’re hitting 800 milliseconds or more (almost a full second), it’s an indicator that your eCommerce site has technical issues and needs some serious attention.
Need help auditing and optimizing your Shopify site? We’re available to help. Just give us a shout.