How to Boost BigCommerce Site Speed For Amazing Store Experiences

June 16, 2022

62aa2d9fbd286c43f0fdb0f1 BC Site speed Checklist post bigcommerce site speed

BigCommerce provides ecommerce brands with excellent shopping features and the ability to deliver exciting customer experiences to site visitors.

It’s a flexible platform where you can add services and functionality to tailor your store to fit your needs.

But—as with most native ecommerce storefronts—adding the bells and whistles to achieve the exact site experience you want can slow things down.

To differentiate and compete as a brand today, not only do you need to provide unforgettable, personalized experiences to every customer, you need to deliver these experiences fast.

Many retailers are looking to provide sub-second load time to meet visitor expectations, rank well in the SERP, and ensure increased conversion rates.

Luckily, with BigCommerce, you can create outstanding shopping experiences and deliver a fast-loading site by moving to a headless architecture, wherein your store’s frontend runs separately from its backend.

Going headless is the surefire way to improve BigCommerce site speed without tradeoffs—a top ecommerce platform combined with an all-in-one frontend solution for total storefront control.

But if you’re not ready to take your BigCommerce store headless, we’ve got you covered with other options to boost your store’s speed.

In this post, we’ll cover:

#cta-visual-fe#<cta-title>Create an incredible, high-performing ecommerce experience<cta-title>See how Shogun Frontend can help you deliver elevated shopping and speed (without re-platforming from BigCommerce!).Learn more

 

Reasons for slow site speed on BigCommerce

Many things contribute to a slow website. The biggest offenders are:

  • Large images
  • Dynamic site content
  • Extra code in your theme
  • JavaScript from plugins
  • Server response time
  • High site traffic

Luckily, much of what is slowing down your store can be dealt with. But, first, you must identify precisely what is dragging it down.

How to test your BigCommerce site speed

BigCommerce speed optimization comes down to identifying the things dragging it down.

While there are common offenders, each site has its own unique issues. Luckily, speed tests can be found all over the internet, and they’ll tell you exactly what is ailing your sluggish site.

You simply need to enter your page URL, and it’ll try loading it like any other user would, measuring the time it takes for certain elements to show up until the page is fully loaded.

Site speed tests to use

To get an accurate measurement of your page load speed, you’ll want to use a speed test that you can trust.

It’s not a bad idea to try out more than one test on the same page to see how consistent the results are. Different tests will be accessing your site from different locations and servers, which can give you varied results.

Here are some of the best free speed tests:

Each test has its own format, but they’ll all give a report of how quick your site is (with a grade) and what elements are bringing your site speed down.

Now that you have your speed report let’s look at some tips to change that grade to something your mother could be proud of.

10 Top tips for increasing BigCommerce site speed

Before we get deep into the inner workings of your BigCommerce store and how to optimize it, there are some things you can do to quickly boost your site speed.

We’ll begin with the low-hanging fruit and proceed toward the more significant asks.

Turn off recent blog post display

Some BigCommerce themes display a list of your recent blog posts, with snippets of content from them, on the footer of your pages.

But loading this information takes valuable time and can distract from other aspects of the customer experience.

bigcommerce demo theme recent blogs bigcommerce site speed
Image: BigCommerce

You can turn this feature off in the Page Builder if you’re using a Stencil theme. If you’re on a Blueprint theme, head to the display settings to turn it off.

Enable Google AMP

Accelerated Mobile Pages (or AMP) are pages of your site that are cached and served by Google (AMP is a framework by Google for creating user-first experiences for the web).

These pages are almost instantaneous to load and give you a massive speed boost.

Since page loads happen so quickly and users aren’t waiting around, your bounce rate will likely go down.

BigCommerce has produced a step-by-step guide on how to enable AMP on their online stores, which is a good speed fix to consider implementing for conversions.

Minify store code

CSS, HTML, and JavaScript code is not always written in the most efficient way possible.

laptop coding bigcommerce site speed

If you have some coding experience, you can edit it yourself or hire a developer to run through your BigCommerce store code, checking for unnecessary spaces, lines, and text.

Leverage BigCommerce’s CDN

If you’re a sizable or scaling brand, your customers will (likely) be located all over the world.

This is great news but can slow site performance down for customers visiting your site from places thousands of miles away from your servers.

This is a common problem in ecommerce.

Most online businesses get around it by using a content delivery network (CDN) to cache versions of their site pages on networks of servers closer to their customers.

Fortunately, BigCommerce has a built-in CDN with servers in London, Los Angeles, New York, Sydney, Tokyo, Sao Paulo, Hong Kong, and Singapore, so you don’t have to look for a third-party CDN.

These server locations should suffice for servicing customers for most retailers.

Limit third-party apps

You might be tempted to extend your BigCommerce store’s functionality by adding developers’ apps.

These plugins can contribute greatly to the customer experience, but too many can also drag your site’s performance and speed down considerably.

Do an audit of third-party extensions to see which ones are performing well, which ones are taking the longest to load, and which ones you could live without.

Third-party apps and plugins are often a leading culprit for slowdowns.

Optimize your images

A content-rich site is crucial for an outstanding customer experience, but too many heavy images, videos, and animations will reduce your speed.

Outsized image files can be the biggest element that slows down your BigCommerce page speed.

Luckily, this is also one of the easiest things to fix. BigCommerce helpfully gives specifications for optimal image size and how to fix yours:

  • Their maximum recommended specs are 280 x 1280 pixels. Anything above this is a waste of data and will only cause a given image to load more slowly; it won’t give you any greater quality.
  • Akamai, BigCommerce’s image manager, should resize images automatically, but it’s best practice to compress images with photoshop or similar image compression tools before upload.
  • You’ll want to ‘lazyload’ images. This means only images above the fold on your site will be loaded at first, the others loading as and when the visitor scrolls down a page.

Compress other files

It’s not just images. BigCommerce themes are often built by bundling together code.

These bundles, especially JavaScript files, can be unnecessarily large and slow to load. Use compression tools like Gzip to slim them down as much as possible.

Limit dynamic homepage displays

BigCommerce provides the ability to display dynamic content on your homepage, with slots for new, featured, and top-selling items, as well as ‘customers also viewed’ and ‘related items.’

They advise you to reduce the number of these items to five or fewer for optimal site performance.

stray whisker homepage small images bigcommerce site speed
The Stray Whisker cleverly uses minimal images to significantly impact its homepage. (Image Source)

#cta-paragraph-fe#Always compromising between site speed and functionality? Now you don’t need to! Learn what leading brands are doing, so design and performance are no longer tradeoffs.

Optimize your category structure

A simple category structure with a clear, hierarchical flow brings order to your online store and helps visitors and search engines find your products more easily.

For example, you might assign a brown leather shoes product page to the category ‘Shoes’, with other top-level categories for ‘Jackets’, ‘Sports Wear’, etc.

But having too many top-level categories slows down your store’s load time.

To get around this, consider how you can group and merge several categories into more streamlined parent categories and subcategories.

Simplify top-level categories

So, in our above example, brown leather shoes could sit under Men’s → Shoes → Work Shoes → Product page (brown leather shoes).

You could create sub-categories for ‘Men’s Jackets’, ‘Mens Sportswear’, etc.

Instead of having top-level categories for all types of apparel and accessories, they are simplified into Men’s and Women’s.

A slimmed-down category structure ultimately reduces the number of top-level categories on your page and the amount of information your site has to load.

Limit menu display depth

You should also limit the number of categories that display on your menu.

This is called the “menu display depth” and can be set in the Page Builder (Stencil) or Categories → Display Settings (Blueprint).

BigCommerce advises limiting the number of menus displayed to just two for optimal performance.

Our example would mean the top-level category ‘Mens’ displays on your menu, and ‘Shoes’ and ‘Work Shoes’ are also pre-loaded.

Your customers will still be able to find the particular shoes they’re looking for by following the menu structure as it narrows.

It’s just that these menus will be loaded on request rather than your site having to pre-load all this information, the majority of which will not be seen by most customers.

Implement product filtering

An even better fix for optimizing how your categories display to customers is to set up a faceted search function—where your customers can filter by style, color, price, etc, as they search.

BigCommerce calls this function Product Filtering and has made it easy to implement.

In addition to speeding up your BigCommerce site, it provides a faster, more satisfying user experience than drill-down menus can.

Update your Bigcommerce theme

Some BigCommerce stores are still operating on themes built on their legacy Blueprint theme engine. If you’re using one of these, it’s time to upgrade!

Blueprint themes don’t support much of the functionality of their new framework, Stencil.

And when they do, the outdated programming is much harder for BigCommerce and third-party developers to work with.

It means fixes and enhancements are less effective and less available than those for Stencil themes.

Migrating to a new theme is no small undertaking, but if you want to significantly improve your BigCommerce site speed and keep up with your competitors, it’s a project you’ll need to take on.

bigcommerce themes bigcommerce site speed
BigCommerce provides a range of free and paid themes. (Image Source)

Benefits of BigCommerce Stencil

Stencil is BigCommerce’s current theme framework and has several benefits over Blueprint:

  • More functionality – BigCommerce has increased the number of things you can do in Stencil, including AMP enablement and enhanced merchandising capabilities.
  • Built on open-source code – This allows third-party developers to add functionality and create whole themes. It means you’re not limited to the pre-built themes that BigCommerce makes available to its customers.
  • Controlled via Page Builder – A much more intuitive, What You See Is What You Get (WYSIWYG) interface lets you manipulate your page elements and design without needing to code your changes.
  • Responsive designs – Whether your customers are accessing your site on mobile, tablet, or desktop, your pages will adjust to the correct formatting. This significantly impacts load times as all the elements fall into place and become interactive much more quickly.
  • A wider range of themes to choose from – The open-source framework means the amount of themes is massively expanded.

Currently, BigCommerce’s flagship Stencil theme is Cornerstone, which comes in a range of options and is customizable to your needs.

What to consider when using a BigCommerce theme

Although Stencil is a big improvement on Blueprint, and BigCommerce’s themes offer an impressive amount of functionality, there are some issues that you should be aware of when choosing your store’s theme.

  • BigCommerce themes, like most modern commerce platforms, allow for adding large amounts of content and functionality to create memorable customer experiences.
  • This enhanced customer experience, in turn, requires a large amount of JavaScript to make it work, which can get bloated, build up over time, and significantly impact site performance.

Ultimately: Watch out for unused JavaScript and CSS code added by your theme.

You can audit and edit this down to size, but you’ll need developer help to maintain functionality and an optimal customer experience.

To avoid the most common pitfalls with themes, follow the content optimization best practices above.

#cta-visual-fe#<cta-title>A better customer experience awaits<cta-title>Take your BigCommerce Store headless with Shogun Frontend to get super fast and rich ecommerce experiences.Learn more

 

How to speed up your BigCommerce store without tradeoffs

All the above tips are great ways to speed up your BigCommerce store, but many require you to pull back on the merchandising functionality you really want from your store.

It’s nearly unavoidable that the fantastic imagery and interactive elements that make for exceptional customer experiences also cause page bloat, making their experience worse.

But, there’s a way to get both the powerful visual merchandising you envision and sub-second page loads that translate to better conversion rates and increased sales.

The answer is headless commerce.

Take your BigCommerce store headless

traditional headless build tech stack bigcommerce site speed
A headless architecture build, the traditional bespoke route

If you’re looking to turbo-charge your BigCommerce site beyond what we’ve covered here, you can consider moving to a headless architecture.

BigCommerce is headless enabled, meaning you can take advantage of your existing backend with BigCommerce (compliance, checkout, etc.) while creating a stunning and speedy frontend to pair with it.

Their architecture supports headless frontend solutions built on Next.js, Gatsby.js, and Nuxt.js, giving you tremendous flexibility when designing your store’s customer-facing layer.

Going headless with BigCommerce also means you’re not limited to its built-in content creation functionality and can craft unique shopping experiences that connect to multiple channels seamlessly.

This allows you to easily join the dots in the omnichannel customer journey.

You can use composable commerce tech to assemble a frontend from scratch or outsource the infrastructure with an all-in-one frontend-as-a-solution (FEaaS) platform.

This lets you focus entirely on crafting the premium shopping experience you want for customers without worrying about slow site speed.

Turn your site into a progressive web app (PWA)

Besides considering a more flexible site architecture as a long-term experience and performance fix, there’s also the option of transforming the output of your site into a progressive web app (PWA).

Today, site speed isn’t just measured by how long it takes a given page to load.

In fact, Google now includes categories designed to measure the customer experience in its ranking system, giving a more accurate picture of how quickly a visitor becomes able to interact with your site.

One such measure is First Input Delay (FID).

This is the time between an input (typically a click) and the response to that input.

  • Speed testing tools such as Google Lighthouse will give you an FID score, but, as it’s calculated by real site visitors taking actions on your site, the results are less reliable than other ‘lab tested’ speed scores.
  • For a more accurate FID score, run multiple speed tests at different times of the day and take an average score. If you find you have a poor FID score, it could be because of a buildup of JavaScript and other excess code running on your theme (see above.)

If your store renders as a progressive web app (PWA), it can respond to inputs faster, resulting in a more responsive, faster site.

Many leading brands are transforming their storefronts with this type of underlying tech, and your brand can do the same.

How PWAs boost site speed: Service workers

Service workers are what makes PWAs tick.

They’re the little app-like technology at the heart of PWAs’ ability to make websites behave like native apps.

They are created in JavaScript (a “JavaScript asset”) and sit on your ecommerce website behind the scenes.

When a browser hits your site, the service worker downloads onto the browser (just like an app would download onto a browser if requested) and, once downloaded, controls how the website behaves, giving an enhanced user experience to visitors.

They work on their own thread (a stream of instructions to your visitor’s device).

This is beneficial because the main thread that your browser is working on may be busy with (multiple) other tasks.

If there is a dedicated thread for use by service workers, they can get their tasks done quicker, delivering a faster site.

In addition, a big part of what makes service workers able to deliver functionality in offline scenarios is their cache interface.

They have their own, JavaScript-based caching mechanism, wholly separate from a standard website’s HTTP cache.

This enhanced caching mechanism means larger parts of your site can be stored on your visitors’ browser, meaning much faster effective page-load times and the retention of functionality when internet coverage is low or even entirely absent.

Speed up your BigCommerce site to boost sales

Shogun Frontend is an all-in-one frontend platform built on PWA technology.

Using the platform, you can craft an incredible frontend experience on top of BigCommerce, giving you unparalleled speed.

You can finally tailor your site to deliver a premium brand experience with stunning content and speed to match.

And unlike other ways to gain total storefront control, you can outsource all the infrastructure with a frontend platform.

With our consolidated platform approach, there’s no need to construct a frontend tech stack from scratch. So you can focus on the customer experience.

If you’re serious about your need for BigCommerce site speed, then an FEaaS platform like Shogun Frontend could be for you!

 

#cta-visual-fe#<cta-title>Get both speed and UX by going headless on BigCommerce<cta-title>See how Shogun Frontend can help you deliver elevated shopping and speed (without re-platforming from BigCommerce!).Learn more

Rhys Williams

Rhys is a writer specializing in enterprise software, ecommerce, and SaaS. He describes himself as a geek and a wordsmith and relishes making complex, technical topics come to life in easy-to-understand web copy.

The latest ecomm tips sent to your inbox

share this post

You might also like

Advanced Multi-store Discounts

Number of Stores
  • 1 Store
  • 2 Stores
  • 3 Stores
  • 4 Stores
  • 5 Stores
  • 6 Stores
  • 7 Stores
  • 8 Stores
  • 9 Stores
  • 10+ Stores
Annual Discount
  • 20%
  • 20%
  • 25%
  • 25%
  • 30%
  • 30%
  • 35%
  • 35%
  • 40%
  • 45%
We use cookies to store data for analytics, marketing and personalization to give you a better experience while visiting our website. By remaining on this website, you indicate your consent.
We use cookies to store data for analytics, marketing and personalization to give you a better experience while visiting our website. By remaining on this website, you indicate your consent.

Cookie Settings is not available. Cookie Consent is disabled or is just disabled for your country.