Shopify's Performance Dashboard: Everything You Need To Know

Learn how to use the Performance Dashboard to keep your site fast

How To Use Shopify’s Performance Dashboard To Improve Sales & Speed

Providing a great customer experience is vital in a world where e-commerce accounts for 16% of all retail sales [1]. With fierce competition and e-commerce sales growing by around 14% every year [1], you need your website to perform at its absolute best to attract prospects, keep them on your site and convert them into customers.

Slow loading times is an issue that often affects Shopify websites as they often employ a lot of photography and third party apps. This can negatively affect your customers’ experience, especially for mobile shoppers. With e-commerce predicted to account for 22% of retail sales by 2023 [2], it’s time to get to grips with your site’s performance.

The good news is there's ways around the types of performance issues that are typically encountered, and Shopify is about to make it even easier to fix these issues. This summer, Shopify is launching a new tool called the Performance Dashboard to make optimizing your site speed easier.

For Shopify Partners, it will be critical that you understand how to use this new tool, since your work will now be judged with the new Performance Dashboard. But at the same time, the new Performance Dashboard could open new doors for potential work for you if you can use this new tool to help accelerate your clients' storefronts.

In this guide, we'll be breaking down everything you need to know about the new Performance Dashboard and how to use it and get the most out of it. Read on to get the lowdown for this new tool.


Shopper on mobile phone
Source: Photo by PhotoMIX Company from Pexels

In this article we’ll take a look at:

  • What is the Shopify Performance Dashboard?
  • Who can use Shopify’s Performance Dashboard and where to find it?
  • How can I make my site faster with Shopify's Performance Dashboard?
  • Using the Shopify Performance Dashboard: A Summary
  • Why site speed is important
  • Make your web store fast and keep it running at peak speed


What Is The Shopify Performance Dashboard?

Shopify Performance Dashboard
Source: Shopify Reunite Announcements 2020

If you’re already spending time analyzing site speed data using third-party tools, your life is about to get easier. If you haven’t been paying much attention to your site’s speed up until now, read on to find out why you should consider changing that.

The Performance Dashboard will allow you to track your site’s speed over time and allow you to see when changes to your site have affected its performance, making it slower or faster. This will enable you to assess how that new app or recent theme modification you added has affected your page loading times.


Who can use Shopify’s Performance Dashboard and where do I find it?

All Shopify store owners, whether on Shopify or Shopify Plus, will have access to the Performance Dashboard. Their staff and partners will also be able to access it. 


The Performance Dashboard will be native to Shopify and located in the Shopify admin area. We expect that once launched you may find it under the “Online Store” channel area.


We’re not yet sure exactly where it will be placed but it may be a bit hidden. Shopify has claimed that the intent is for store administrators who don’t have the relevant knowledge to interpret the data and jargon not to be bombarded with numbers they might find scary.


Although it will be accessible by anyone with admin access the Performance Dashboard is intended to be used by store developers, app developers, and partners. Shopify is expecting store owners to rely on their partners to interpret the dashboard's data and make it work for them.


How can I make my site faster with Shopify’s Performance Dashboard?

Let’s dive straight in and take a look at how you’ll use this powerful new tool. There are two primary ways you can take advantage of it:


  1. Determining how fast your site is
  2. Figuring out what’s slowing your site down


Determining how fast your site is

The top half of the Performance Dashboard provides tools that display your site’s current performance. You can use this information to figure out how fast your site is and what will help to make it faster.


The first step is to figure out which parts of your site are slow.

Setting the report parameters

Performance Dashboard Parameters


Shopify allows you to specify which page’s data to view and some pages will be much slower than others. By default, the dashboard will show your homepage data. We recommend focusing on the homepage first since your visitors will usually see this most often.

You’ll have the option to pick which type of device, Internet connection, and country to run the report from. These options are important as your site may perform differently for different types of users. 


Mobile users are usually impacted more by site speed issues because they have more limited hardware and internet connection than other users. We recommend setting the device and internet connection options to “Mobile” and “4G Network”


In the country drop-down select the country of your main target market for an initial optimization. We suggest you check out other countries in which your products are sold later on to make sure your site is running well there too.

Click the “Run Report” button and the charts will update for your selected parameters.


Once you’ve checked your homepage you can move on to analyzing other pages. You’ll often find though that fixing the performance for one page leads to fixing it across the entire site since many pages may be sharing the same code.

Understanding the data metrics

Performance Dashboard Metrics


There are two main metrics shown in the Performance Dashboard and they are:


  • Time to First Byte (TTFB) - TTFB is the time it takes before a user’s browser receives any data. The lower the TTFB the better.
  • First Contentful Paint (FCP) - FCP marks the time at which the first text or image is painted, that is how long it takes for the user to see something on the page. Again, the lower the better.


These are quite technical names but the concepts are simple to understand once you get past the jargon.

Time to First Byte is the time it takes for Shopify to start sending the content of your site to visitors. If the Internet were a series of tubes and your site was liquid traveling through them TTFB would be the time it takes for the very first droplet of your site to arrive with the visitor at the other end of the tube.

TTFB should be between 100-300ms


TTFB is important because it tells you if Shopify is taking too long to deliver your site to your visitors. For good performance, your TTFB should be between 0.1 and 0.3 seconds. If your TTFB is higher it could mean that something in your theme’s Liquid code is slowing the site down. We recommend using Shopify’s Theme Inspector to help with getting to the bottom of this.

In very rare cases, Shopify itself may be responding slowly. Check Shopify’s status page for downtime and issues or ask their support team if you suspect this may be the case.

First Contentful Paint measures the time it takes for the visitor to see the very first content on your site. That’s usually text or images. If your FCP is 5 seconds, that means your visitors will be looking at a mostly blank page for 5 seconds.

FCP should be between 1 and 3 seconds


FCP can be influenced by many things so figuring out why it’s high is not always straightforward. 


Your TTFB can affect your FCP, a high TTFB will increase your FCP too. If your TTFB is in the normal range and your FCP is high this usually indicates that something in your front-end code, such as images, CSS, JavaScript, etc., is slowing your site down. 


There are a variety of tools that can help you figure out what is causing your high FCP. Some of them will give you recommendations but fixing it ultimately requires diving deep into your site speed data combined with some trial and error. Some useful tools for this are Google Lighthouse/PageSpeed Insights, WebPageTest.org, and SiteSpeed.io. We’ll explore this further in a future blog post but for now, a good place to start is following this checklist to help you fix issues. 


Fixing your site speed is both a science and an art. You’ll need to keep measuring but use your best judgment to fix things. After applying a fix continue monitoring your performance to see if it makes a difference. Check it regularly to identify and resolve any issues before they have a big impact on customer experience. 


We’re passionate about fixing site speed problems and we love data so if you need help with this please feel free to get in touch.

Figuring out what made your site slower

The lower half of the Performance Dashboard provides tools displaying the historical performance of your site along with a log of events that might have caused changes in performance. 


Until now matching up site speed dips with past actions was very much a guessing game. This new tool will be extremely helpful in enabling you to identify the changes that have slowed your site down.


Performance Dashboard Events Chart



Using the line chart, look for spots where either your TTFB or FCP lines have gone up over time. If these metrics are continuously higher for several days then it’s likely that something has slowed down your site. (If you need a reminder about what TTFB and FCP are scroll up to the previous section).

If there’s a date where either the TTFB or FCP lines are higher look for the gray vertical lines on the chart. You’ll hopefully find that one of these vertical lines occurs just before TTFB or FCP started to increase. Each vertical line indicates a date when your site was modified and will likely indicate the cause of the change.

If there is a vertical line that precedes an increase in TTFB or FCP use the timestamped event log below the line chart to determine exactly what changed on that date. We recommend starting with undoing those changes to see if your site speed improves again.

There may be times when TTFB or FCP will increase with no corresponding vertical line or action in the event log. Unfortunately, Shopify can’t track every change that occurs. For example, you may have some third party code that has started to slow the site down. Shopify can’t track this.

We recommend monitoring the Performance Dashboard weekly to ensure that you catch any performance issues and deal with them before they start to cause conversion and SEO issues.


The Performance Dashboard in Summary

Overview

The Performance Dashboard will initially report on the performance of a group of templates: the homepage, collection pages, product pages, and the blog. As the tool is developed it will expand to include more pages.


You will be able to analyze your site speed in real-time as the data will be updated daily and you’ll have the ability to refresh it manually.

Report Parameters

Within the Performance Dashboard, you will be able to select parameters to refine your reporting. These will include devices, Internet connection, and country. You’ll also be able to set date ranges to make comparisons over time.


Performance Dashboard Parameters

Metrics

The data metrics reported will be:


  • Time to First Byte (TTFB) - The time it takes before a user’s browser receives any data. A normal TTFB is 0.2 seconds.
  • First Contentful Paint (FCP) - The time at which the first text or image is displayed on screen, i.e. how long it takes for the user to see something on the page. 


Performance Dashboard Metrics


Lower is better for both of these metrics.

Theme Events and Timeline

The Performance Dashboard will include a line chart that displays the TTFB and FCP times enabling you to identify when your site slowed down and when changes were made.


Performance Dashboard Events Chart


The accompanying Theme Events log will show exactly what changes you made to your store and when enabling you to cross-reference and identify which action has potentially caused your drop in site speed.  


Having the timestamped event log and speed metrics together on one page will make performance management much easier and less time-consuming. Once you’ve identified the time and date that a spike occurred you or your developer should then be able to make changes to speed your site up again.


Performance Dashboard Events Log


Regular monitoring and the capability to correlate performance measures with Theme Events will help you to identify and resolve any issues before they have a big impact on customer experience.

A few things the Performance Dashboard won’t do (yet)

  • The Performance Dashboard won’t, unfortunately, provide any specific performance metrics of apps. We may see this developed for future versions but, currently, this means that if an app was installed some time ago and later slows the site down it will be more difficult to track down.


  • The Performance Dashboard will not have an API initially but Shopify may develop this for future versions.


  • Tracking of Shopify’s internal caching and cache invalidation isn’t something that will be included at present.


  • The Performance Dashboard won’t have the capability to make recommendations based on your site data at the moment but there are plans to develop this for future versions. 


For now, you will be interpreting the data yourself so if you’re not sure about doing this consult a developer or partner who will be able to make sense of the metrics for you and provide recommendations. This is our bag so feel free to contact us with your questions.


You might still be wondering why you need to worry about this at all which brings us on to...


Why site speed is important

Potential customers don’t want to wait, and why should they when they have so much choice in where to shop? If you’re giving customers the benefit of the doubt and are more optimistic about their patience take a quick look at these statistics.


  • Pingdom (a renowned site speed analysis tool) found that 38% of potential customers will click back to their search if a site takes 5 seconds or more to load.[3]
  • An Akamai study showed that every delay of just one-tenth of a second in website loading time can decrease your conversion rate by 7%.[4]
  • DoubleClick by Google found that 53% of mobile users would give up on a site and move on to the next one if the page took longer than 3 seconds to load.[5]


Frusterted shopper
Source: Photo by Andrea Piacquadio from Pexels


A fast loading site has been shown to increase:


  • Pageviews
  • Cart size
  • Conversions
  • Revenue
  • User satisfaction
  • User retention
  • Brand perception


Still not sure you need to devote a chunk of your time to store performance? Did you know that site speed also influences SEO?


Keeping visitors on your site long enough to convert them into customers is your ultimate aim but you need to get them there first. Google ranks faster websites higher in search rankings [7] so keeping your site fast helps bring in more visitors.


This works in two ways.


Firstly, Google tracks what your visitors do after they click a link to your site and adjusts search rankings depending on their behavior. So what is Google looking at?


  • Bounce Rate
    The percentage of users that click onto your website then click back to their search results without spending a significant amount of time on your page.

Site speed correlates with bounce rate
Source: Google/SOASTA Research, 2017


  • Time on Site or Dwell Time
    The amount of time a user spends on your website before returning to their search results page. Greater dwell time is interpreted as the site having greater relevance to the search term.

  • Pageviews
    Google uses page views as a measure of user engagement. It works on the assumption that your site must be more relevant to the search term if the user has viewed multiple pages.


Customers can’t wait and won’t wait so if your site is slow they move on to the next one quickly. Google interprets this as your page having little relevance to the search term so your search rankings are negatively affected.


In addition to this your site performance affects these search ranking factors:


  • Organic search traffic
    Traffic that has come through non-paid listings rather than adverts or pay-per-click. Pages that load quickly will help get more of your content cataloged as Google will trawl more of them. This tends to give you more listings under more earned search terms.

  • Brand perception
    All of the before mentioned points influence Google’s interpretation of brand perception. It uses these measures as an indication that your site gives value to users and hence your brand is respectable and influential.


A Google study found that 70% of the pages it analyzed took nearly 7 seconds to load the visual content on the visible part of the page [6]. If your site is in this 70% your visitor numbers, conversions, revenue, customer experience, and ability to attract new customers are probably being negatively affected.


Improving your site speed is almost certainly worth your time and effort but it needs to be an ongoing effort. Website performance changes over time due to changes to your code, theme, apps, or even just adding more content, so it’s crucial you’re monitoring this data frequently.


The Shopify Performance Dashboard will help you keep on top of your website performance and figure out what’s slowing it down.


Make your store fast and keep it running at peak speed


Have more questions about your site’s performance or this new dashboard?


Contact us here and we'll be happy to help convert your data into more sales for your business.


Ecommerce shopper ready to purchase
Source: Photo by Negative Space from Pexels



References:

[1] https://www.digitalcommerce360.com/article/e-commerce-sales-retail-sales-ten-year-review/

[2] https://www.oberlo.co.uk/statistics/ecommerce-share-of-retail-sales

[3] https://royal.pingdom.com/page-load-time-really-affect-bounce-rate/

[4] https://www.akamai.com/uk/en/about/news/press/2017-press/akamai-releases-spring-2017-state-of-online-retail-performance-report.jsp

[5] https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/ 

[6] https://think.storage.googleapis.com/docs/mobile-page-speed-new-industry-benchmarks.pdf 

[7] https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html 

Get a free site speed evaluation by our experts

We help ecommerce brands conquer their site speed so they can increase sales and improve their SEO. We'll provide you with a free site speed evaluation by one of our experts so you can take the right steps to make your site faster than ever.

Get Started