<img src="https://analytics.humanautomation.ai/ha-analytics.php?idsite=6&amp;rec=1" style="border:0;" alt="">
How to Optimize Your BigCommerce Store for the Google Core Web Vitals Update

How to Optimize Your BigCommerce Store for the Google Core Web Vitals Update

Does your team have SMART marketing goals in place? Do you have insight into your marketing ROI to maximize spend? Get in touch with us today for a free consultation!

Overview

In May 2020, Google announced a landmark algorithm update known as Core Web Vitals. Coming sometime in 2021, this improvement will reward web pages with pleasing user experiences. 

88% of online shoppers say they wouldn’t return to a website after having a bad user experience. And Google is taking 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 Core Web Vital means and share the best strategies for optimizing your BigCommerce store. 

Table of Contents:


Get a comprehensive Page Experience Audit of your BigCommerce store.

Why Are Page Speed & User Experience So Important?

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 will consider 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 your website’s user experience. BigCommerce has already made significant investments in page speed with last year’s release of the Cornerstone 4.0 theme. But many times, we’ll 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.


To put that into perspective – that means that 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.


What Is the Core Web Vitals Update?

Google’s Core Web Vitals update will score 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. 

Today, we’ll cover how to optimize your BigCommerce site for the Core Web Vitals metrics: 

  • Largest Contentful Paint (LCP), AKA Loading performance
  • First Input Delay (FID), AKA Responsiveness
  • Cumulative Layout Shift (CLS), AKA Visual stability 

Largest Contentful Paint (LCP)

What Is LCP & Why Does It Matter?

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:

Homepage: On this homepage, the Largest Contentful Paint element would be the first image in the carousel (on both mobile and desktop).

Homepage LCP 

  • Blog: On this blog post page, the large paragraph text constitutes the LCP element.
    Blog LCP

  • Product Page: On this product detail page, the product image is the LCP element on both mobile and desktop. 

Product Page LCP

  • Contact Page: On this contact page, the first paragraph text is the largest element. 

Contact page LCP

How to Measure LCP

How to measure 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). Run any page-specific URL through the report to calculate both mobile and desktop scores. 

Your LCP score will appear here:  

LCP Score

Common Issues That Cause Poor LCP Score

  • Images that are not optimized
  • External scripts and resources that block (aka delay) loading
  • Bloated code: Hidden images or extra libraries, scripts, HTML, CSS or JavaScript

How to Improve LCP Score on Your BigCommerce Site

If your LCP score is less than optimal, use this checklist to improve your page load time:  

  • Identify & Optimize LCP Element. For example, if your LCP element is an image, be sure to optimize it for all devices. 
  • Remove Unused or Unnecessary HTML, CSS, JavaScript. Extra code can easily build up over time, especially when manually adding new apps and not removing the code. Elements are often hidden or code is commented out, which can add to the size of browser downloads.
  • Defer Non-Critical CSS & JavaScript. Allow the critical/important content and resources to load first.
  • Deliver Critical CSS ASAP. Identify the critical CSS (associated with the layout and above the fold content) and ensure it loads quickly.
  • Compress Images. Many free online tools exist to compress images, such as TinyPNG or CompressJPEG. Akamai currently does this, but we still recommend compressing before uploading.
  • Lazyload Images. Delay the loading of images below the fold until they come into view. Do not lazyload images above the fold where possible, as you want to load these images ASAP. This feature is included in the Cornerstone theme.
  • Use Responsive Images (Srcset). Offer various image sizes to the browser. The browser will select and retrieve the appropriately sized image, ensuring it does not download larger images than needed. BigCommerce implemented srcset responsive images into Cornerstone with version 4.0.
  • Preconnect External Resources. Look up DNS and establish a connection early to speed up the connection later.
  • Minimize Data in Scope in config and YAML. This is a best practice that reduces size and duration of loops, and then (possibly) results in less content.
  • Use Next Gen Image Formats. BigCommerce already supports WebP natively.
  • Optimize Loops and Conditionals. When customizing a theme, optimize and minimize the number of loops and the logic.
  • Use Context Injection for JavaScript Variables Instead of Querying the DOM. Read more about this strategy here. Alternatively, you can look at using GraphQL to query non-scoped data.

First Input Delay (FID)

What Is FID & Why Does It Matter?

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. A user input would be delayed if the browser’s main thread is busy running other tasks and cannot respond promptly to the action.

Delays cause your site to appear sluggish and unresponsive, frustrating users and prompting them to bounce off the page. 

How to Measure FID

How to Measure 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, which makes 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:

FID Score

Common Issues That Cause Poor FID Score

  • Loading numerous resources: Most of what impacts LCP also impacts FID.
  • Excessive JavaScript: A large number of scripts creates more files to retrieve and run through (meaning longer delays for users). On BigCommerce, JavaScript buildup will come from your theme, apps, external plugins and custom code.
  • Long-running or inefficient scripts: Poorly written or excessive code can bog down the main thread.

How to Improve FID Score On Your BigCommerce Site

Make sure you assess these areas on your site to earn a passing FID score: 

  • First, fix any outstanding LCP performance issues. These typically impact both LCP and FID.
  • Identify and optimize thread-blocking items, or those that block the main thread, increasing the Time to Interactive (TTI).
  • Restructure the elements to register event handlers for elements above the fold as early as possible to reduce TTI.
  • Rewrite scripts to make them more efficient where possible.
  • Audit apps, plugins and third-party scripts. Assess the value of each and trim down unnecessary plugins and scripts. 

Cumulative Layout Shift (CLS)

What Is CLS & Why Does It Matter?

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. 

How to Measure CLS

CLS

The ideal CLS score is less than 0.1. 

This score should be measured via PSI or the Chrome browser extension. For more details, you can look at Layout Shift Regions in the Chrome Developer Tools. 

CLS Score

Common Issues That Cause Poor CLS Score

Watch out for these common culprits of shifting page elements: 

  • Ads or banners that are inserted dynamically
  • Externally loaded widgets: As the HTML and/or styling loads after the scripts are retrieved and executed, they can displace current content
  • Lazy loading a hero image: The placeholder may be differently sized and can cause the page to shift

How to Improve CLS Score On Your BigCommerce Site

Run down this list of strategies to optimize your CLS score: 

  • Consider adding width and height attributes (or CSS styling that is loaded early) to elements that cause a shift. This will prevent them from going from 0 to x pixels when loaded.
  • Use a fallback font that matches your font. This will reduce the impact of a custom loaded font when it becomes available. If using Cornerstone, this feature has been implemented natively.
  • Reserve space for injected content. Fix a pre-sized block for content that will be injected (i.e., code in the height and width of an injected search bar to fix the position prior to the HTML and CSS being available).
  • Ensure critical CSS is loaded BEFORE content. Load structural/layout, menu and above-the-fold CSS prior to the HTML content.
  • Avoid JavaScript layout animations. Remove them altogether or replace with CSS animations.

How to: Identify, Implement & Test Changes to Improve Your Core Web Vitals 

Page experience marks the first time Google has provided a heads-up on a major algorithm update. Now is the time to get your Core Web Vitals scores in order. 

Step 1: Identify

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:

  • PageSpeed Insights: This tool shows both field and lab data and provides detailed advice on what you need to improve. 
  • Search Console: Search Console now has a Core Web Vitals report built-in, so you can monitor how your site is performing and see which scores need work. 
  • Lighthouse: Google’s Lighthouse tool offers numerous checks to audit performance, accessibility, SEO and more. Consider throttling the network speed and CPU to test on slower systems.
  • Web Vitals Chrome Browser Extension: This free extension measures the Core Web Vitals, providing instant feedback on loading, interactivity and layout shift metrics.

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.

Step 2: Implement

Once you know what you need to improve, you can get to work making updates. In general, we recommend making fixes in this order: 

  1. LCP
  2. FID
  3. CLS

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.

Step 3: Test

Consistently logging and testing your fixes will allow you to see what changes have the greatest impact on your Core Web Vitals score. 

We recommend using the following method to test your updates: 

  • Track mobile and desktop scores for your core pages in a spreadsheet. Log both field and lab data, including changes across these areas:
    • Page Speed Score
    • LCP, FID and CLS
  • Make sure you log a few core pages with different templates (homepage, category page, product detail page, blog/content page), plus any high-priority pages for your business. Look at traffic and organic search rankings to determine your high-priority pages.
  • Paste the URLs for your core pages into PageSpeed Insights and work your way through the list, logging scores as you go.
  • Test your page scores monthly, or before & after any significant changes. 

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. 

Core Web Vitals Tips for BigCommerce Stores 

As you begin optimizing your store, keep these tips in mind: 

  • If your theme is significantly out of date, running on Blueprint or severely bloated, consider moving to a new or updated theme running on Stencil to take advantage of the latest updates and improvements. For example, the BigCommerce Cornerstone theme added in a responsive image component, starting at version 4.0. 
  • Make sure you avoid themes that are slow, even in demo environments when no scripts are running.

Get Help Optimizing Your BigCommerce Store for Core Web Vitals

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 now, before the new standards roll out next year. 

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 preparing your site for the Google Page Experience update!

Check out these resources for additional help: