DevelopmentShopify speed optimization - Understanding website speed and its importance in e-commerce
by Sara Kurczyńska Last update: 10/2024 · 18 min read
The last thing a visitor to a Shopify store wants is to twiddle their thumbs while it loads. As frustration begins to set in, they forget why they clicked on it in the first place. Then, they leave and end up making a purchase at a different, faster Shopify store. Chances are the first Shopify site owner will never see them again.
Fortunately, doing something about it's easier than it might seem! In fact, we're going to show you how it's done. In the following article, we will go over a number of things, from what a good Shopify store speed is and what it means for your business to the best ways to improve your Shopify speed score. Let’s get right in!
What is page speed?
To begin with, let's explain what page speed is. In short, it's the amount of time that passes between a browser sending out an HTTP request for a specific page of a website and the moment that page's content is processed and rendered. Site speed is a similar concept, but it's used to describe the time it takes for the entirety of a website to load. Both can be influenced by a wide range of factors, from the quantity and type of image files that are on a website to the browser that is being used to access it.
How is page speed measured?
Page speed can be measured using various metrics. The most common ones out of the bunch include time to first byte, first contentful paint, and largest contentful paint, as well as first input delay and cumulative layout shift.
- Time to first byte (TTFB) It measures the time from when a browser sends out an HTTP request for a page to the first byte of the page being received by the said browser.
- First contentful paint (FCP) It measures the time that passes from when a page starts loading to when any part of that page's content is rendered.
- Largest contentful paint (LCP) It measures the time it takes for the largest element or image that's on a page to load properly.
- Cumulative layout shift (CLS) It tells you how much the content on a website jumps around or moves unexpectedly.
- First input delay (FID) It measures the time from when a visitor interacts with a page to the moment when the browser starts processing that interaction. It's supposed to be replaced by interaction to next paint (INP) in 2024.
- Interaction to next paint (INP) It provides a representation of how long a user has to take in order to interact with the entire page. It does so by analyzing a sample of the longest interactions that take place when someone visits a page.
Largest contentful paint, first input delay, and cumulative layout shift, as well as interaction to next paint, are considered to be Core Web Vitals. Core Web Vitals are a set of specific, user-centric performance metrics that Google uses to assess the overall user experience of a website. They're used across different Google tools meant for tracking website performance.
While measuring page speed using the aforementioned metrics is important, you should also pay attention to the perceived speed of a page, too. To put it simply, consider how quick your page appears to be to the user who is interacting with it. Sure, it might be the quickest website in the world from a technical standpoint. Nevertheless, if interacting with it feels slow, the technicalities aren't going to matter.
Why is page load speed crucial for a Shopify store?
Owners of Shopify stores often have no idea how big of an impact Shopify page speed can have on the store's success. To begin with, it's worth noting that if a Shopify store page is slow, it will have a negative impact on user experience and engagement.
Just think about it. If a Shopify site were to take half a minute to load, would you stay on it? Of course not! It would be a frustrating experience, and data backs that up. Google Consumer Insights found that 53% of visitors using mobile devices will abandon a website if it takes more than 3 seconds to load.
In addition, Shopify store performance is directly linked to its conversion rate. The slower a Shopify site is, the lower its conversion rate is going to be. A study found that a 100-millisecond delay in page load time can result in a 7% decrease in conversions. On the other hand, a study by Portent found that the highest e-commerce conversion rates occur on websites with load times between 0 and 2 seconds.
Last but not least, the better the overall store speed, the better its rankings in search engines. The reason for that is simple. Core Web Vitals are an important ranking factor. In other words, they're taken into account when a search engine is calculating a Shopify store's organic rankings. With that in mind, if you want to attract potential customers using search engines, it would be best if you put some time and effort into making your Shopify website as fast as possible.
Learn more by reading our article about preparing a website for SEO.
If you're running an e-commerce business, optimizing your store's speed should be your top priority. It's just what you need if you're struggling with a bad conversion rate. Need proof? Just take a look at the results of our cooperation with SENECA! We've redesigned and optimized their online store. Once it went live, their conversion rate doubled in just a few weeks.
Before you start working on Shopify website speed, you first need to measure it. That way, you will be able to tell whether your page speed optimization efforts are paying off. It's just a matter of reading up on Shopify speed optimization and finding the right tool for the job.
You won't be able to improve Shopify store speed blindly. Instead, you will need a tool that will tell you exactly how quickly your web pages load and track your site performance changes over time. The majority of Shopify site owners use tools like Google Analytics, Hotjar, and Mixpanel. There are also many online tools that require you to just type in a website URL into a designated field. Then, they generate a free report about your web page speed. The most commonly used ones include Pingdom and Uptime.
In addition, you could use Shopify's built-in performance analytics. By doing so, you gain access to the majority of metrics you need to optimize a Shopify site for maximum conversion rate and performance.
If you feel like your Shopify speed score is lacking and want to do something about it, we're here to help you make it happen! In the next section, we will go over a list of tips that will help you speed up your Shopify site quickly and effectively. Check it out, put it into action, and your store speed should improve in no time.
Selecting a lightweight Shopify theme
Pay attention to the theme your Shopify store is using. Shopify themes can have a major impact on a site's loading speed, particularly if they're coded in a weird and overly complicated way. For example, if it's loaded with CSS image sprites and contains too many images, it's obviously not going to do your website speed any favors.
With that in mind, look for a theme that is specifically optimized for performance. Ideally, it should be lightweight and built with clean and efficient HTML, CSS, and Javascript. These factors contribute to faster loading times and overall better performance. There are plenty such themes in the Shopify theme store.
Additionally, consider themes that have already been tested by other people and have positive reviews regarding their performance. If possible, they should come from a trusted source, such as a reputable theme marketplace or a well-known web developer.
You could also look into installing the Shopify Theme Inspector. It can be found in the Shopify app store. It's a profiling tool that helps you identify the lines of Javascript code that are slowing your Shopify site down. If you get rid of these lines or optimize them, you're bound to make your Shopify theme code easier to read. This should lead to a huge improvement in your Liquid render time and page performance.
Image optimization for faster loading times
A large and high-quality image can take a long time to load. As a result, it can slow down the performance of your Shopify site. That's why it's important to optimize images when running an e-commerce website. You could either compress them or replace them with their smaller versions.
When it comes to image compression, you could take care of it using an online image compressor, such as TinyPNG, Crush.pics, or Kraken.io. Both are very easy to use. Just go to your chosen compressor's website, upload your unoptimized images in there, and it's going to compress them for you. And if you don't want to use an online compressor, you could turn to image editing software instead. For instance, Adobe Photoshop can compress images.
Regardless of the method you choose to go with, you will need to strike a balance between image size, file size, and the way the image you're compressing looks. Remember, you don't want it to end up blurry and weird. It will make your Shopify store look unprofessional.
Need help optimizing images? Read our article about image optimization.
Taking advantage of lazy loading
If you're looking into image optimization, you should also learn how to lazy load images. It's a common technique used by website developers. In simple terms, it makes it so that your website only renders the images that your Shopify store visitor is currently looking at. If there are any other images under the fold, they won't be loaded in until your visitor scrolls down. It's guaranteed to cut down your website's loading speed.
Opting for static images
To make Shopify sites even faster, their owners tend to opt for static images. They don't use videos and gifs. The reason for that is simple. The file sizes of static graphic assets are much smaller in comparison to those of videos and gifs. As a result, they load in faster. So, in case you're currently struggling with Shopify speed optimization, just replace your dynamic assets with static images.
Benefiting from AMP (accelerated mobile pages)
Have you ever heard of AMP pages? AMP stands for Mobile Accelerated Pages. It's an open standard framework that's designed to create fast-loading web pages on mobile devices. With it, a Shopify store collection page or any other page can load in a fraction of a second, boosting an entire website's speed quite a bit.
If you'd like to start using AMP, there are many Shopify apps with great ratings that should help you do it with ease. Just visit the Shopify store, find an option that you like, and install it. While you might end up having to tinker with its settings a bit, it's definitely worth the time and effort.
If you've added Google Tag Manager to your store, check the number of tags it's tracking. You might not be aware of this, but Shopify apps add a tracking code to the website's code. The more tags Google Tag Manager has to keep track of and store, the worse your Shopify site speed is going to be. Consequently, if you'd like to make your Shopify website faster, make sure to organize your Google Tag Manager tags.
Optimizing scripts and website code
You could speed up your Shopify store by optimizing its code and scripts. If it's bloated or inefficient, it's guaranteed to slow down your store's loading speed. For starters, remove unused Javascript and CSS files. They are adding unnecessary weight to your site.
Next, consider minifying your code. Minification is the process of removing unnecessary things, such as spaces, line breaks, and comments, from code. Doing so reduces the size of the files your website has to process to work. This, in turn, improves its loading speed. There are online tools available, such as Minifier, that can automatically minify your code for you.
If you have no experience with coding, you might want to leave this to a trusted professional. It could be a freelance developer or a reliable web development agency. It depends on how big your online store is and the amount of money you're willing to spend on optimizing its speed.
Font optimization for Shopify
It might seem insignificant, but the fonts you use on your website can also affect your store speed. If you're using custom fonts that aren't installed on your customers' computer, their computers will need to download them to properly render your Shopify store. So, instead of using a custom font, stick to a system font. It's a font that's installed on computers by default. That way, your customer's computer won't have to download additional fonts when rendering your Shopify site.
Disabling unused apps and plugins for a streamlined experience
Another common problem with slow online stores comes in the from of unnecessary plugins and applications. The fewer plugins you're using, the better, as each plugin adds to the amount of data and code that has to be processed whenever someone visits your store.
If you feel like your Shopify store is slow, conduct an audit of the plugins it's equipped with. Are you actually benefiting from the online store features they're providing you with? Do they really add to your store's functionality? If not, get rid of them. In case a particular plugin is slowing your Shopify store down, but you really need it, you might want to look for a faster alternative. The same goes for Shopify applications. If they're slowing your store down, consider looking for alternatives or start using fewer Shopify apps.
Obviously, not all plugins and applications are created equal. Some are high-quality and optimized for maximum performance. Others might be doing their job, but in weird ways and with the help of unnecessarily large amounts of code. So, keep that in mind and, when possible, go for software that you know is of the highest quality.
Improve server response time
A slow server response time is also terrible for the loading speed of any online store. But first, let's establish what server response time is. Imagine that a user visits your Shopify store and wants to see a specific product page. They click on it. Once they do so, their browser asks your store's server for the contents of this particular page. Server response time is the time it takes for the server to send those contents back in response to the user's request.
There are many things that might be causing a slow server response time. To give an example, it could be that your online store is visited by so many people that it simply can't keep up. It could also be that your hosting provider is experiencing some issues. You should take their location into account as well. Are their server locations are thousands of miles away from you? If so, just the fact that data has to cross that geographical distance might be slowing your website down.
Whatever the case may be, you should improve your server response time as soon as possible. You could start by checking whether the server provider you're with is actually worth your time. Are you satisfied with what they are providing you with? If not, it's best to look for a different hosting provider. Other viable options include using a content delivery network and optimizing your Shopify store's code.
What is a good Shopify speed score?
According to a report published by Portent, the conversion rate of a web page decreases by around 0.3% for every second of loading time between 0 and 5 seconds. With that in mind, you should keep your website's loading time to a minimum.
Who can help you with Shopify page speed optimization?
There are two specialists who should have no trouble optimizing Shopify sites, namely web developers and search engine optimization specialists. An experienced web developer is likely to have already worked on thousands of different store pages, including Shopify sites. As a result, they should be able to help you with a wide range of technical issues related to page speed optimization, such as making use of local browser cache, choosing lightweight Shopify themes, render blocking Javascript, and making sure that your website loads quickly on mobile devices.
A search engine optimization could also prove to be helpful. They will analyze your website using search engine optimization tools. Then, they will make sure that your website is not only fast, but also attractive to any search engine out there. For instance, they should be able to fix broken links, take advantage of Google PageSpeed Insights, and install Google Analytics if you haven't done so already, among other things. While they might not have the skills of a fully-fledged developer, they are probably up-to-date with Google's algorithm changes and know the best tools and tricks for grabbing that algorithm's attention.
So, if you're looking to upgrade your Shopify site speed, it might be best if you did so with the help of an entire team of specialists. That way, you will have access to a wide range of skills, ensuring that everything that needs to be done on your website is actually taken care of, from coming up with a new hero layout to getting rid of redundant code. Aside from that, such a team will probably be managed by a separate project manager. It should make it easier for you to stay updated on the project's overall progress. It will also save you plenty of time and effort, as managing multiple freelancers at the same time can be a pain in the neck.
Improving Shopify site speed is easier than you think!
At Adchitects, our developers have plenty of experience with optimizing website speed. If you need to build a Shopify store from scratch, we will prioritize its speed and functionality at each and every stage of the project. Then, we will keep on monitoring it and optimizing it to the best of our abilities.
In case you have a problem with an existing Shopify store, we're here to lend you a hand, too! We will use the latest tools and techniques to make it as speedy as possible, all the while staying on-time and on-budget. So, get in touch with us, and let's start working on improving your store's loading speed today!
