BigCommerce SEO audit: the issues built into BigCommerce — and how to fix them

Audit your XML sitemap and internal linking so that every product and category page is discoverable and crawlable by Google — not hidden behind JavaScript, pagination, or missing links.

1. 1BigCommerce auto-generates a sitemap at yourstore.com/xmlsitemap.php. Submit this URL in Google Search Console › Indexing › Sitemaps.
2. 2Admin › Storefront › Search Engine Optimization: confirm 'Enable XML Sitemap' is checked.
3. 3Admin › Products › View: export your product list (Export button) and compare the count to what Google Search Console reports as indexed.
4. 4Admin › Storefront › Navigation: ensure every category is linked in the navigation. Uncategorised products are still in the sitemap but may receive fewer internal links — assign them to categories.
5. 5Check Admin › Products › Categories for any category set to 'Visible: No' — hidden categories and their products are not indexed.
6. 6Use the URL Inspection tool in Google Search Console to test individual product URLs and confirm they are crawlable.

<!-- CORRECT: Standard crawlable link -->
<a href="/products/blue-running-shoes">Blue Running Shoes</a>

<!-- WRONG: JavaScript-only — Googlebot cannot follow this -->
<span onclick="navigate('/products/blue-running-shoes')">Blue Running Shoes</span>

Eliminate unexpected layout shifts by reserving space for every image, video, embed, and dynamically injected element so nothing jumps when the page loads.

1. 1Images: In Storefront → My Themes → Edit Theme Files, open templates/components/products/product-view.html (and card.html for listing pages). Add width and height attributes to every <img> tag. BigCommerce's Stencil framework provides {{getImageSrcset}} helpers; use {{image width=800 height=800}} to output sized images with explicit dimensions.
2. 2Theme CSS: In assets/scss/settings/foundation/images/_settings.scss, ensure img { max-width: 100%; height: auto; } is present so explicit width/height attributes work correctly with responsive layouts.
3. 3Banner / promo: In Marketing → Banners, avoid rotating hero banners injected via JavaScript without a reserved container. In your theme's homepage template (templates/pages/home.html), wrap the banner region in a container with a fixed aspect-ratio or min-height.
4. 4Fonts: In assets/scss/settings/global/color-and-type/_settings.scss, locate @font-face declarations and add font-display: optional;.
5. 5Apps: For review or chat apps installed from the BigCommerce App Marketplace, wrap their embed scripts in a sized container div in the relevant template file.
6. 6Verify: Check PageSpeed Insights on your storefront URLs; CLS should be < 0.1 on both mobile and desktop.

<!-- CORRECT: explicit width and height prevent layout shift -->
<img
  src="/images/product-red-sneaker.jpg"
  alt="Red canvas sneaker, side view"
  width="800"
  height="800"
  loading="lazy"
>

Reduce Interaction to Next Paint (INP) to under 200 ms by breaking up long JavaScript tasks, deferring non-critical third-party scripts, and lightening event handlers so the page feels fast and responsive after every tap or click.

1. 1Go to Storefront → Script Manager. Review every installed script. For non-critical scripts (chat, affiliate pixels, review widgets), change their 'Load Method' to 'Defer' or move their 'Placement' to 'Footer'.
2. 2In Storefront → My Themes → Advanced → Edit Theme Files, open templates/layout/base.html and find any hard-coded `<script>` tags. Add `defer` or `async` attributes to non-critical ones.
3. 3Remove or disable BigCommerce apps that inject frontend JavaScript but are no longer actively used (Apps → My Apps).
4. 4For custom JavaScript in assets/js/, refactor event handlers on cart, search, and navigation interactions to yield back to the browser using `setTimeout` or `scheduler.yield()` between heavy steps.
5. 5Use BigCommerce's built-in Lighthouse integration (Storefront → Optimize) or PageSpeed Insights to measure INP before and after changes.

Reduce Largest Contentful Paint (LCP) to under 2.5 seconds by serving the hero image in a next-gen format (WebP/AVIF), preloading it, and eliminating render-blocking resources.

1. 1IDENTIFY LCP IMAGE: Run PageSpeed Insights on your storefront. The LCP is usually the hero carousel image configured under Storefront › Home Page Carousel or a theme banner.
2. 2CONVERT TO WEBP: BigCommerce's Akamai Image Manager automatically serves WebP/AVIF to supported browsers when you upload standard images — no action needed if you are on a current plan. Confirm by inspecting the hero image URL for a format parameter.
3. 3UPLOAD OPTIMISED SOURCE: Even with auto-conversion, upload the highest-quality but appropriately-sized source JPEG/PNG (max 1920px wide) via Storefront › Image Manager so the CDN has a good original to compress.
4. 4PRELOAD: Go to Storefront › My Themes › Edit Theme Files (or use Stencil CLI). Open templates/layout/base.html. In <head>, add: <link rel='preload' as='image' href='{hero image CDN URL}' fetchpriority='high'>. For dynamic images use the Handlebars variable that outputs your carousel image.
5. 5DEFER JS: In base.html, add 'defer' to non-essential third-party <script> tags. Move analytics and chat widgets to the bottom of <body> or wrap in a setTimeout.
6. 6NO LAZY-LOAD: Find the carousel/hero img tag in templates/components/ and ensure it has loading='eager' fetchpriority='high'.
7. 7VERIFY: Re-run PageSpeed Insights; monitor Core Web Vitals in Google Search Console.

<!-- Step 1: Preload the LCP hero image -->
<link
  rel="preload"
  as="image"
  href="/images/hero-banner.webp"
  imagesrcset="/images/hero-banner-400.webp 400w,
               /images/hero-banner-800.webp 800w,
               /images/hero-banner-1500.webp 1500w"
  imagesizes="100vw"
  fetchpriority="high"
>

<!-- Step 2: Hero <img> tag — eager, high priority, no lazy-load -->
<img
  src="/images/hero-banner-1500.webp"
  srcset="/images/hero-banner-400.webp 400w,
          /images/hero-banner-800.webp 800w,
          /images/hero-banner-1500.webp 1500w"
  sizes="100vw"
  alt="[Descriptive alt text for your hero image]"
  width="1500"
  height="600"
  loading="eager"
  fetchpriority="high"
>