Learn how to use the Performance Dashboard to keep your site fast
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.
In this article we’ll take a look at:
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.
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.
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:
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
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
There are two main metrics shown in the Performance Dashboard and they are:
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.
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.
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 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.
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.
The data metrics reported will be:
Lower is better for both of these metrics.
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.
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.
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.
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...
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.
A fast loading site has been shown to increase:
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?
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:
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.
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.
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/
[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
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
