Guide to Site Speed

Page load speed is a measurement of how quickly a webpage loads on a computer or smart device. Fast loading sites are proven to have better conversion rates and SEO (semrush). Site visitors expect nearly instant load times if they have a good internet connection, and will not wait very long for a page to finish loading.

In this guide, we go through how you can measure your page load speed and different methods for improving it on your BigCommerce store.

Before taking a site speed test, you should be aware of what elements of site speed can affect page load time and potentially skew the test results.

• Server Response — “Time to first byte” is an important measurement for some site speed tools. This is how quickly the server relays information. BigCommerce makes sure we keep our servers performing optimally, especially during high-traffic seasons.
• Image size and dimension — Image files are some of the most information-dense parts of a website. If the page you are testing is "image heavy", it will affect page load time. BigCommerce uses Content Delivery Networks (CDN) to store image information and improve the speed. See our article Content Delivery Network to learn more about how using CDN improved site performance. 
• Embedded Javascript — Javascript takes some time to process depending on what information it’s calling. Any pop-up features, live chat or other customizations will factor into page load speed.
• Dynamic content — These items get generated every time the server is asked for the page to ensure an up-to-date list of categories is always presented to your shoppers. 
• Theme Framework — If a store’s theme uses messy or extraneous code for the page to process, it can cause slow loading times. Themes sold on the BigCommerce theme marketplace use a streamlined framework out of the box. 
• High Visitor Traffic — Your traffic and the number of people on the site at that time affect the server response time. It’s advisable to try comparing speed tests during high and low traffic periods.

Site speed tests are a service offered on some websites to measure load times, display a score and break down the elements of the site that contributed to that score. It can be used as a representation of the store’s performance.

Your page speed test results are best used as a guideline and not an accurate measure of speed for your store. The test result may vary based on the time of day it was taken.

Some elements that appear in the site speed test will not be in your control, such as files not hosted on your site (i.e. a script from Google or Facebook). In the example below, the site speed test gave a failing grade to this part of the site. However, the components listed are from third-party sites like Google and MailChimp.

Most page speed test sites will offer suggestions as to how to improve the score for the site. The results below, for example, suggests the images on the site need to be more optimized. It is also important to note that each site speed test puts weight on different components to make a score.

Common BigCommerce Results

• Leverage browser caching — This pertains to how long a web browser should store images, CSS and javascript locally. On BigCommerce this is not something accessible to store owners. In some cases, it may be due to things like Google Analytics or an app.

There are many sites that allow you to test your page or site load speed for free. Some of the services we recommend are:

• Pingdom
• gtmetrix
• Google Page Speed Test
• webpagetest.org

It's recommended that you try more than one of the page speed tests and compare the results.

If you have a low speed test score or you notice the site is lagging, here are a few ways you can improve the page load speed.

Optimize Images

As mentioned before, images are generally the most information heavy item on a page. Resizing images and making sure the images have a low byte size will increase the speed of the page. BigCommerce utilizes Responsive Images to help offload some of this work by automatically optimizing images. See our article on Optimizing Your Images for more details on how to adjust images.

Decrease Dynamic Homepage Displays

BigCommerce allows you to control how many featured, new, and top selling items on the home page. Decreasing the number to around 5 or less dynamic products will help alleviate the page load time. Product previews are dynamically generated.

Sites with a large number of top-level categories may find their site score affected because the top menu loads on every page. For instance, if you have 100 parent categories, try merging some of them and making subcategories under each. Then make subcategories of those categories as well, so that your site will load faster. Additionally, your shopper won't be overwhelmed with choices on the initial viewing of the site.

Another thing to consider is the "Menu Display Depth" which controls how many levels of subcategories will be available. To illustrate how this helps, consider this: if you have 5 parent categories that have 5 subcategories, and each of those subcategories also has 5 more subcategories nested in them, it's asking the server to push a total of 125 menus every time the page loads. Setting the "Menu Display Depth" to 2 will only display 2 menus deep. If you had 5 parent categories, it now only loads 10 menu items.

The category display depth is the most important setting on optimizing the time to dynamically generate every page on the site. For Stencil themes, this is found under Page Builder.  For legacy Blueprint themes, adjust this in Display Settings under the Category section.

It is still possible for shoppers to navigate to deeper sub-categories even if the menu depth is set to a low number. 

Ideally, having a simple navigation is better than having a drill-down menu. If it makes sense, consider using Product Filtering instead.

Other Dynamic Menus

There are other dynamic areas in a BigCommerce store to consider. 

Number of Products that Show Per Page on Category Page

Product data is queried every time a shopper visits a category page. By decreasing the number of products-per-page that appear on a category page, you can improve the page's load time. Generally, about 12 per page is reasonable since it is mobile-friendly and doesn’t require too much scrolling. Of course, depending on your market or industry, it may be best to allow a larger number of items to appear per page for ease of use. The maximum suggested is 20 items per page.

Recent Blog Posts

On some themes, there is a section in the footer that will display the title, preview image and a short blurb from the most recent blog posts. Having a long list is demanding on bandwidth. This is controlled in the theme's settings and can be switched on or off.

Breadcrumb Depth

Product breadcrumbs can be enabled/disabled from your store's Display Settings.

While you can do many things to streamline your page load speed on your own, you may consider getting help from someone with experience. Visit our Partner Directory or consider using the Agency Design Request form to connect with third-party developers and find solutions that catered to your individual situation. 

• Product Categories
• Content Delivery Network
• Page Builder
• Product Page Breadcrumbs
• Product Filtering
• The Frontend Performance Checklist You Need For Ecommerce Success (BigCommerce Dev Blog)
• Partner Directory
• Page Speed (moz)
• Why Does Page Speed Impact Your SEO?(semrush)
• Pingdom (Pingdom)
• gtmetrix (GTmetrix)
• Google Page Speed Test (Google)
• webpagetest.org (webpagetest)