In June 2021, Google commenced the rollout of a landmark algorithm update known as Core Web Vitals. As of August 2021, the update was completed and in full effect worldwide.
If you haven’t already heard, the Google Core Web Vitals update rewards web pages that offer an enjoyable user experience. Needless to say, this is a critical component of any online store’s ecommerce marketing strategy.
88% of online shoppers say they wouldn’t return to a website after a bad user experience. And Google has taken notice of this trend. According to Google, Core Web Vitals consists of “a set of real-world, user-centered metrics that quantify key aspects of the user experience.”
In this guide, we unpack what each Google Core Web Vital means, discuss how to identify needed changes, and share the best strategies for optimizing your BigCommerce store.
Table of Contents:
Get a comprehensive Page Experience Audit of your BigCommerce store.
User experience directly correlates with conversion rates and revenue. But Google has increasingly emphasized page experience as a search engine ranking factor, too.
Google has accounted for site speed as an SEO ranking factor since 2010. In 2018, Google followed up with a page speed update that penalized mobile sites with the slowest user experience.
Now, Google’s algorithm considers user experience when choosing which sites to rank in the SERP (search engine results page). Providing a superior page experience alone won’t be enough to leapfrog competitors with more relevant content. But when comparing similar pages, Google will defer to page experience criteria to help break the tie.
Every developer knows that page load time can directly impact a website’s user experience. BigCommerce has already made significant investments in page speed with 2019’s release of the Cornerstone 4.0 theme. Many times, however, we let it slide to accommodate a more aesthetically pleasing design or new BigCommerce app.
But data doesn’t lie, and research shows that users tend to favor page speed over fancy functionalities. Page speed doesn’t only impact your user behavior stats – it affects ecommerce revenue, too.
Let’s put that into perspective. If your ecommerce site is making $10,000 per day, a one-second page delay could potentially cost you $255,500 in lost sales every year.
Google’s Core Web Vitals update scores sites across three key metrics related to site speed, responsiveness and visual stability.
Ultimately, Google hopes that improving these metrics will make the web a more pleasing experience for users across web browsers and devices.
We’ll dive into how to optimize your BigCommerce site for the Core Web Vitals metrics:
LCP is the time it takes to load the largest image, video or text block in the viewport.
This metric matters because the largest item is likely the primary item a user is supposed to see and experience on the page. A fast LCP helps ensure visitors can quickly access the most prominent and important information.
Here are a few examples of LCP elements from the BigCommerce Cornerstone Light theme:
Image Credit: web.dev/lcp
The optimal LCP score is 2.5 seconds or faster.
There are several ways to measure LCP on your BigCommerce site. The easiest way is to use Google’s PageSpeed Insights (PSI) tool. Run any page-specific URL through the report to calculate both mobile and desktop scores.
Your LCP score will appear here:
If your LCP score is less than optimal, use this checklist to improve your page load time:
FID refers to the delay that users experience when they first attempt to interact with your page. This action would typically be a click or a tap. The faster the browser reacts, the more responsive the page appears.
As developers build more complex sites than ever, we’re putting a lot of strain on browsers. If the browser’s main thread is busy running other tasks, it cannot respond promptly to a user’s input.
Delays cause your site to appear sluggish and unresponsive, frustrating users and prompting them to bounce off the page.
Image Credit: web.dev/fid
The optimal FID score is 100 milliseconds or faster.
Unlike other page experience metrics, FID requires real user interaction to get an accurate measurement. Google can’t predict the FID score based on lab data – it requires real user data, making FID a “field” metric. Because FID collects data from users on all types of devices in various environments, FID scores are less controllable. As a result, you’ll see the data change more frequently.
Pro-Tip: You can measure Total Blocking Time (TBT) as a stand-in for FID to get more consistent data. You can see this in the PageSpeed Insights report or Lighthouse.
On PSI, your FID score will appear here:
Make sure you assess these areas on your site to earn a passing FID score:
CLS is a brand-new metric that Google will use to assess user experience. CLS measures the shift of the page layout as content is loaded. Basically, it looks at how often elements jump around while loading and by how much.
Unlike the first two metrics, CLS has nothing to do with page speed — it’s purely about the user experience.
Imagine you’re trying to click a button on the screen while, in the background, a large content area is still loading. When the content fully loads, it pushes the button down, just as you attempt to click it. A high CLS score can irritate users as they accidentally click in the wrong places.
It’s important to note that user input doesn’t impact CLS. For example, a popup window after a click or an accordion FAQ would not affect this metric.
Image Credit: web.dev/cls
The ideal CLS score is less than 0.1.
Measure this score via PSI or the Chrome browser extension. For more details, you can look at Layout Shift Regions in the Chrome Developer Tools.
Watch out for these common culprits of shifting page elements:
Run down this list of strategies to optimize your CLS score:
With an understanding of the metrics involved in the Core Web Vitals, it’s time to get your scores in order.
Along with the specific opportunities we’ve outlined in this guide, you can use PageSpeed Insights (PSI) and other measurement tools to identify ways to improve your Core Web Vitals scores. These are the best tools:
Pro-tip: Patrick Williams, Senior Solutions Engineer at BigCommerce, recommends running Lighthouse tests from the command line to quickly evaluate several pages from one or multiple sites.
Once you know what you need to improve, you can get to work making updates. In general, we recommend making fixes in this order:
Start with items that will have the greatest impact, such as improperly sized images or too many external scripts. There will be diminishing returns as you work through the changes.
You’ll also want to address global fixes first then work through your store’s most important pages.
Consistently logging and testing your fixes will allow you to see what changes have the most significant impact on your Core Web Vitals score.
We recommend using the following method to test your updates:
Pro-tip: Many factors can affect your scores, such as how quickly servers are responding at that moment. You can test the same page one minute after another and get different results. We’ve seen a discrepancy of 15 points or more when testing page speed scores. Logging scores consistently over time is the best way to identify trends and improvements.
As you begin optimizing your store, keep these tips in mind:
Delivering an optimal user experience will mean the difference between ranking above or below your next closest competitor.
Luckily, you can get ahead of the curve by making strategic improvements to your desktop and mobile site experience.
At Human, we can audit your site and prioritize improvements to maximize your website’s ranking potential.
As a BigCommerce partner, we’ve worked with BigCommerce stores for more than a decade. We have extensive experience building and optimizing ecommerce stores and implementing improvements that will provide a stellar user experience – and keep your store ranking at the top of Google.
Chat with our team to start optimizing your site for Google’s Core Web Vitals!
Check out these resources for additional help: