Guide to Page Load Speed
Guide to Page Load Speed
Page Load Speed and Why It Matters
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.
Elements That Affect Page Load
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.
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 TestsSite 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.
How to Interpret Speed Tests
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
Where to Take the Speed Test
There are many sites that allow you to test your page or site load speed for free. Some of the services we recommend are:
It's recommended that you try more than one of the page speed tests and compare the results.
Improving Page Speed on BigCommerce
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.
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 Akamai Image manager 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.
Enable Google AMP
Google AMP is an effort by Google to streamline the page loading speed on any device. It utilizes an open-source coding framework. See our article Enabling Google AMP to learn how to apply it to your store.
Restructure Category Menus
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 in the Theme Editor. 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 under Display Settings. It can be switched on or off.
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 post in our Ask a Design Partner group for solutions catered to your individual situation.
- Managing Product Categories
- Content Delivery Network
- Display Settings
- Using the Stencil Theme Editor
- Product Page Breadcrumbs
- Product Filtering
- Enabling Google AMP
- Ask a Design Partner group
- 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)