Right after you launch your shop, it works splendidly. Why wouldn’t it? Shopify is one of the best platforms for hosting an e-commerce store. However, it is so, providing you do everything in your power to take care of its performance. Don’t worry. You don’t need to be tech-savvy to manage your site’s performance. In this guide, we will tell you exactly what to do to control it. Let’s go.

What do you need to know about taking care of your Shopify store performance?

Shopify’s uptime is close to 100 percent. It means that the shopping platform rarely breaks. Although not being able to access a store is the worst thing that can happen, there’s something that can affect store sales almost as badly, and that thing is, poor website performance.

When a store is slow, badly managed and has a poor user experience, it has a hard time making a sale. Site visitors get frustrated with it and leave. Google penalizes it by downgrading it in their rankings. Customers can’t bear going through the checkout process. And your online sales plummet. Is it your fault? To answer this question, let’s learn what influences site performance.

What affects Shopify site performance?

There are several things that slow a website down, and most of them are connected to the high number of HTTP requests a website makes. They include low quality hosting, messy site architecture, bulky code (unoptimized JavaScript, CSS and HTML code), too many requests made at once, media files that are too large to load quickly, too much dependency on external resources (fonts, libraries), unresponsiveness, caching issues, apps that are not up to date, and so on. But how do you know your Shopify store is slow?

How fast should an online store load?

Page speed is vital. There’s no denying that. Fast websites are higher in search results. They get more sales and user satisfaction. Yet, what’s an acceptable page load time? A general rule of thumb is that the faster it takes for a website to load, the better.

An acceptable page load time for an online store is under 2 seconds and under half a second is ideal. Seems fast, doesn’t it? Yet, don’t worry. It’s achievable. We will show you how. But first, let’s discover how your e-commerce website measures up against it.

Note: There are two things you should know about site loading. Websites load piece by piece instead of all at once. Site speed depends also on the Internet connection, browser, the device that is used to access the Internet, and in some cases, location, so it’s not entirely up to us. Still, it’s necessary to work on it.

How do you know an e-commerce website is slow?

You can recognize a slow site by tracking metrics like bounce rate or cart abandonment rate. Supposedly your Shopify store gets a lot of site visitors, yet nobody seems to stick around. Your Google Analytics account shows you a lot of bounces. Or, people put things into the shopping cart but they don’t buy. It might be a sign that there’s something wrong with your site performance. To get a full picture into what’s happening with your store, use tools for site speed testing.

Test your site with Google to learn about your Shopify site loading speed

In one of our last posts, specifically the one about fighting cart abandonment, we showed you a great resource for auditing performance. It was Google PageSpeed Insights. It gives you insights into the current state of your site, together with tips about what you need to change to improve. The data that you get from it is based on two other Google’s tools for measuring performance, so that it can give you the best information about optimization opportunities.

  1. Lighthouse which returns lab data, which means that the report captures data within a controlled environment with predefined device and network settings;
  2. Chrome User Experience Report, a tool which returns field data, that is gathered from authentic, real-world Chrome users.
Google Page Speed Insights screenshot of how to check your Shopify store
Google PageSpeed Insights shows both field and lab data to give the best insights into a site’s performance

Google PageSpeed Insights report may be a bit intimidating when you see it for the first time. It’s full of terms that are tough to decipher for a page optimization beginner. Let’s go through the metrics and try to explain them.

  1. First Contentful Paint – it’s the first test score results, and it tells you how fast a user’s browser renders elements, such as text, images (including the ones in the background), SVGs and non-white canvas elements; your score for this should be under two seconds or less, as it captures only the very beginning of the loading experience;
  2. Largest Contentful Paint – it’s one of the most important metrics, which affects your Shopify store’s SEO rankings (Google uses that metric as a ranking factor); it measures the render time of the largest image or text block of information visible to the user; you should aim at keeping it under 2.5 seconds;
  3. First Input Delay – it’s a metric that measures interactivity by looking into how much it takes for a site to respond when a user first interacts with it; it should be less than 100 milliseconds;
  4. Cumulative Layout Shift – it’s another ranking factor that Google considers when assessing your site; it measures visual stability by looking for any unexpected shifts of images and texts that happen while a user is interacting with a page;
  5. Speed Index – reports how quickly it takes for all elements on a page to become visible; this metric should be below 4.3 seconds for you to pass;
  6. Time to Interactive – that one seems more straightforward than the three above; it determines how much time it takes for a measured page to become interactive; keep the score under 3.8 seconds;
  7. Total Blocking Time – it’s the second most important metric in the report, next to the Largest Contentful Paint, so keep it under control, it measures the time that your site is blocked from responding to a mouse click, keyboard presses, screen taps, and any kind of user input; makes sure your site scores under 300 milliseconds.

If you still have questions about those metrics, don’t worry. The next part of the report is more comprehensive, and it tells you exactly where the problem is with your site.

Along with an overall score, Google tells you what needs to be done to get your site’s speed in order; when you click the specific sentence

If you scroll past the metrics, you will see Opportunities, and at the end, Diagnostics that are much more specific than the metrics. Opportunities need your immediate attention. They can be related to images, lines of code and render-blocking resources. Diagnostics, on the other hand, tells you how to improve your site for performance.

This part of Google PageSpeed Insights report contains tips that help you increase your site’s speed

Aside from Google, there are other tools that analyze your Shopify store (Pingdom, WebPageTest, Yellow Lab Tools, etc.) Anything that gives you actionable, easy-to-digest insights is a good place to start with. You can test your home page, product pages, product categories to discover room for improvement. If you need help in interpreting results or introducing changes, contact our agency – we’re ready to help.

Google and the rest of free tools that help you learn about performance are not enough. First, you need to learn about what not to do, so you don’t end up in a vicious circle of making up for mistakes that affected your site in the first place. The remaining parts of the article are about just that. Keep on reading to learn what you need to do to take care of your site performance.

How to take care of your Shopify site performance

So far you’ve learned about what affects your Shopify store’s performance and how you can fix it. Now, let’s talk about what to do to so you keep your site fast. There’s a smart checklist for managing your online store for good site performance.

The ultimate checklist for taking care of your Shopify store performance

1. Provide a great user experience on mobile devices
2. Clean up site content
3. Reduce the number of apps, plugins and pixels
4. Ask a Shopify developer to help you with code
5. Upgrade Shopify plan

Step 1: Provide a great user experience on mobile devices

The newest articles about Internet traffic show that up to 70% of traffic comes from mobile devices. Moreover, there’s a lot of information going around about mobile-first indexing (as a lot of users search the Internet on small screens) or mobile-first design. Shopify’s Black Friday and Cyber Monday statistics from 2020 show that 67% of sales were made on mobile devices during those important dates in an e-commerce calendar. That’s why taking care of mobile user experience is so crucial. But how to take care of it?

Shopify’s own store themes that you can download from the theme store are responsive and well-optimized for mobile purchases. Every theme is responsive and built in a way to maximize mobile conversions. The same goes for the designs that are custom-made with a Shopify agency. Our agency takes a mobile-first approach to designing bespoke Shopify themes. Yet, as you grow your store, you may make some changes that may easily slow down your store and affect its performance. How to avoid it? Try the tips below.

Here’s another Google tool that can help you assess your store’s mobile-friendliness; test your page by pasting its URL or paste lines of code

7 tips for providing a great user experience on small screens

  1. implement AMP (Accelerated Mobile Pages) for high performance – it’s immensely important for m-commerce to get acquainted with AMP; we will tell you more about it in one of the upcoming blog posts; for now, we can recommend you using RocketAmp or a similar tool to prepare an AMP versions;
  2. compress and reduce images so they don’t take too long to load – as you may have spotted in the Google report above, image sizes affect page loading times; see Shopify’s guide on image optimization
  3. decrease thumbnail image sizes – you don’t want your images or any media to take too long to load, since it affects your website performance; reduce the thumbnail images;
  4. minimize popup use – although pop-ups are great for capturing site visitors attention, they are not providing a great user experience on mobile devices; Google may penalize sites that use intrusive popups;
  5. avoid excessive use of sliders – sliders take a lot more time to load than regular images, and besides, they are most probably ignored by mobile users; use a hero image with a clear Call-to-Action instead of sliders;
  6. limit yourself to using 1-2 fonts and consider system fonts for more speed – fonts can impact loading speed, so limit yourself to one or two;
  7. show that something is going on when a new element is loading – people don’t like waiting too long, especially when browsing the web; but the so-called perceived performance may be the signal that soon they will get results.

Those tips are by no means mobile-exclusive. They also affect the experience of visitors who are viewing your site on desktop. So, go on. Check how your Shopify store compares. Once you’re done, it’s time for step two.

Step 2: Clean up site content

Your store’s inventory will grow, and so does your site. Anytime you edit your site, you add new content, be it text, pictures or videos. Such elements can slow your website down, because they trigger additional HTTP requests. So what to pay attention to when managing content? Here are some useful tips.

  1. optimize images and thumbnails – according to Shopify, “Images account for somewhere between 50% to 75% of your web pages’ total weight; that’s why it’s recommended to be mindful of every image that’s on the site; delete unnecessary images, and as for the rest, compress them using CrushPics, consider switching your PNGs into JPEGs or add the “srcset” attribute, so images are responsive;
  2. use lite embeds on videos – fast sites have videos too, but their teams take an immense care of the way the videos are uploaded; instead of embedding standard code directly from YouTube, they use so-called lite embeds, which load the video only when the user clicks on it, not before; so the user doesn’t have to wait as much for the site to finish loading a heavy file like a video and all the JavaScript;
  3. reduce the number of fonts – stick to 1 or 2 system fonts for the most speed;
  4. consider Lazy Loading – it can truly speed up your site, but you need to be a little tech-savvy for that. With that your Shopify store only loads content thatis necessary at the moment. Check Andrea Verlicchi’s site for more details on lazy loading;
  5. remove broken links and redirects – if your site contains a lot of links that lead to nowhere or an excessive volume of redirects, it’s time to fix that; broken links and redirects impact site performance too; how to find them? Google Search Console may help you or this tool for finding broken links.

Step 3: Reduce the number of apps, plugins and tracking codes

Adding new functionalities to an e-commerce website is unavoidable. And the fastest way to do that is through integrating the site with apps, plugins or adding scripts. Sometimes we add a plugin and forget that we have it in our store. Now, it’s time to delete it.

Each app that you integrated with your Shopify loads additional files, like JavaScript and CSS that can reduce site performance. Get rid of the plugins you don’t use. For those you intend on keeping, check if you have the newest version of those plugins. And be careful about third-party apps that you integrate with your store. They may not be optimized for Shopify, although they are advertised as such.

There’s also one other thing that you can do when it comes to plugin optimization. Some apps add new elements to pages. Work on restricting such elements to the pages where you actually need them, and nowhere else (image reviews belong to product pages only, etc.)

Now, let’s deal with tracking codes. When you think about it, there are a lot of tracking codes that we can install on our site. Facebook pixel, LinkedIn pixel, Google tracking code take time to load. There’s a way of handling it. Instead of pasting each tracking code one by one, you can integrate them with your site with Google Tag Manager. Read a Shopify’s help article about Google Tag Manager to learn more.

Note: Google Tag Manager works only with Shopify Plus stores.

Step 4: Ask a Shopify developer to help with code

Typically, static websites are written with HTML, CSS and JavaScript. When a user enters the site, their browser needs to load all the files containing lines of code that also have a lot of space, comments, block delimiters, and the like. All of that can cause slowdowns for the user. A Shopify developer can help you clean up your code, combine or inline scripts, remove render-blocking JavaScript and CSS, minify the code, leverage browser caching, and thus, speed up the loading time.

Step 5: Upgrade your plan

While with open source software you may want to use a Content Delivery Network to provide a cached version of your site, it’s not necessary with Shopify. It takes care of hosting quality. Yet, if your store remains slow and you did all the steps above to fix it, you might consider switching to a higher subscription plan. It has the potential of having a greater hosting capacity than the lower plan.

Let us take care of your Shopify store’s performance

Good website performance has a potential of improving sales, user experience and rankings. In this article, we showed you the basic steps of testing your site and fixing its speed. If you’re looking for a Shopify agency that helps your site to get a perfect score, leave us a message. We can help you with Shopify store maintenance.

Maria Siewierska

Digital Marketing Specialist