Skip to content
How to Increase Shopify Store Speed Performance
In today’s fast-paced world, everything is about speed. From our food deliveries to how quickly our favorite social media pages load, we want things fast. If something makes you wait for more than usual, you get upset. You complain or go for the next best thing.
One of the worst things for a customer is a sloooooow website. This is why, for eCommerce entrepreneurs like yourself, it’s important to keep your Shopify store up to speed. So not only do you have to maintain your online store, but you have to make sure that all barriers between your product and your customer are removed.
The thing is, every time you add an app or any customization to your website, its speed suffers a little bit. Maintaining your website is key and this is where you will need the best people.
Fortunately, Webinopoly is a team of Shopify certified experts and developers who are committed to providing the best website services to clients. With over 10 years of collective experience in eCommerce, we have been able to narrow down the best ways to improve Shopify websites as per industry standards.
Without further ado, let’s get right into it. Allow us to share with you the best Google legitimate ways to optimize Shopify speed.
How to Increase Shopify Store Speed
What is page speed or website speed?
Page speed sometimes referred to as load time or website speed is the length of time necessary for your Shopify website to fully load when someone (a user) visits it by manually typing the URL in or by clicking a link that leads to your website. In short, page speed is a measurement of how fast the content on your page loads. What happens is, your webpage’s content is downloaded from your website’s hosting server and is then loaded onto the user’s web browser.
Right now, the average website speed across all industries and countries is at 8.66 seconds. But we recommend that your webpage should load at least 3 seconds fewer than the average. The reason for this is because page speed is important to the user experience. The longer your page takes to load, the higher the bounce rate and lower the average time on your website. This all negatively affects your conversions.
What is a good website speed?
To get a good grasp of website speed, you can first do a quick check on how fast or slow your own website speed is. There are several tools you can use to do this. One is to get in touch with Shopify experts at Webinopoly through this link for a free audit. Here is another:
Test My Store Speed - this tool helps you check your collection, product, and cart pages. It also helps you identify what best actions to take to achieve Shopify speed optimization.
Webinopoly’s home page scored a 92 with 0.845s load time
The tool shows a breakdown for both desktop and mobile
To get started on action points like those, you can head over here and get in touch with Webinopoly experts. We provide a free audit and we’ll set up a quick call with you to dig through the details and the best course of action.
As for the speed, the quick answer is as fast as possible. Currently, the average Speed Index speed for desktop is at 4.7 seconds, and for mobile 11.4 seconds. And according to Google, the best practice is to keep it under 3 seconds.
Ask yourself this, would you stay on a website that takes more than 5 seconds to load? Most people won’t. From there, you’ll see that your website’s speed can affect a lot of things, from your user experience to your bounce rate and even your rankings. So in 2021, if you're running a Shopify store, you should shoot for no less than two seconds or you risk losing potential customers.
How does page speed affect eCommerce?
User experience is defined by website performance. The ability of your Shopify page speed to translate into a quick, convenient and easy online shopping experience motivates sales and, ultimately, determines online business success.
In a study conducted by Google in 2017, it was stated that as page load time goes from 1-3 seconds, the probability of a bounce increases by 32%. Bounce Rate is the percentage of visitors that leave a webpage without taking an action (for example, clicking on a link, filling out a form, or making a purchase).
3 things you need to remember:
- Anyone that bounces from your site means that they didn’t convert (did not do anything on your website)
- When you stop a visitor from bouncing or reduce your bounce rate, you are also increasing your conversion rate.
- Bounce Rate may be used as a Google Ranking Factor. Some studies show that it is closely correlated with Google’s first page rankings.
According to CustoMediaLabs, the current bounce rate for eCommerce and retail is at 20-45%.
Studies show that 1 in 4 visitors would abandon the website if it takes more than 4 seconds to load. 46 percent of users don’t revisit poorly performing websites. If your store isn’t able to engage the customer within 5 seconds, they will consider leaving.
Even eCommerce giants like Amazon could deal with billions of dollars worth of losses for every second that page speed is delayed.
A whopping 47% of eCommerce customers will expect a page to load in less than two seconds before they consider leaving. 40% of them will leave if they wait for a second more, which gives them a total of 3 seconds on your website. Most performance analytics tools won’t even capture this.
Websites with fast loading times do reap the benefits. Such as when Walmart saw a 2% increase in conversion rates for every 1-second improvement in page load times. AliExpress, who made their store faster in 2016 received 10.5% more sales while Amazon discovered in 2010 that for every 100 ms of latency, they lost 1% in sales.
While service and product quality have the biggest influence on business sales, in the cyber world, converting website visitors into purchasing consumers greatly depends on creating a positive customer impression. This is where eCommerce website performance parameters like ultra-fast page speed and quick check-out processes come into play, resulting in a good psychological experience for customers.
What you can and can’t control
We’ll be giving you some tips to enhance your Shopify store speed but before you get started working on them, you have to understand that there are factors that you can adjust and some that you won’t be able to.
What can be controlled
When you first create your Shopify store, you might install a few apps here and there. Apps are what enable you to add functionality to your store that otherwise wouldn’t have those features such as a search bar, a custom checkout page, and a tracker.
Quick tip: Apps that run in the admin only, like the Shopify Local Delivery app, don't affect the speed of your online store.
Liquid, HTML, CSS, and JavaScript code make up your Shopify’s themes. However, file sizes can grow as you modify or customize themes, slowing down your store.
Some features from your apps or themes may have an impact on the speed of your store. When a collection page loads, you might have some quick view pop-ups that pre-load information from every product page. This causes your page to load much slower as there are more information and data coming in.
Almost all of the Liquid that is used to render your store can be edited. Avoid doing complex operations repeatedly as this can increase Liquid render time and affect store speed. Check with your Shopify developer or a Webinopoly Shopify expert to ensure that your code stays efficient.
You might not notice it at first, but you may be uploading very heavy image files. Images that are too large or hidden from view can slow down the loading of other, more critical portions of a website. Users may consider your store as slow if they have to wait for large graphics to load.
For the text of your online store, there are multiple typefaces you can choose from. You might even be tempted to use a custom typeface. However, if that font does not exist on your customer’s machine, it may need to be downloaded before it is displayed. This is an additional load time for your page.
We recommend using a system font instead to avoid this as system fonts are usually already pre-installed in most machines. Go for the mono, serif, or sans-serif font family.
What cannot be controlled
Your customer's device, network, and location
Customers who visit your Shopify store come from all over the world, with a variety of devices and internet connections. This means that based on such circumstances, your business may load sooner or slower for them.
If you receive any complaints or comments regarding the speed of your Shopify website, always check with the customer if they are using the latest or most updated version of their browser. You may also guide them on how to clear their cache or check with their Internet service provider.
Shopify infrastructure
Shopify hosts your online store on fast, worldwide servers with no bandwidth restrictions, and its code and infrastructure are continually being improved. Some of these gains may be reflected in your speed rating.
A few features that affect the speed of your online store are:
Content delivery network (CDN)
Fastly runs a world-class CDN for Shopify merchants, ensuring that your online store loads swiftly all around the world. You can check the CDN status on the Fastly status page.
Local browser cache
Some parts of your Shopify website are temporarily cached or saved on your customer's local storage. The browser can load resources from the cache instead of sending another request to the server the next time your consumer visits your online store.
Shopify sets browser caching for cacheable resources in your store to one year for each file. Files that can be cached include image files, PDFs, JS files, and CSS files.
Server-side page cache
Shopify caches pages on the server in addition to local browser caching. Although a page may be slower the first time it is loaded, subsequent page loads are faster because clients receive a cached copy.
Assets inside the content_for_header Liquid tag
The {% content_for_header %} Liquid tag injects assets used by a variety of online store features, including performance analytics and optional features like dynamic checkout buttons. Loading this tag and related assets has an impact on the speed of your store. Shopify is optimizing the tag and its assets to make it faster.
10 Ways To Help Speed Up Your Shopify store
Truthfully, the performance of your store is determined by the theme that you have installed.
Why are some themes faster than others? There are a few factors:
- The theme’s file size. Smaller themes tend to run faster.
- Amount of coding. The server processes less coding more quickly.
- The site renders faster with cleaner CSS and in-line CSS
- They don’t have to access the JQuery or JavaScript library.
People usually go for aesthetics and customizability when they choose themes and often overlook speed. But you have to know that speed can make or break your business. The key is to make sure you choose a responsive theme, which will translate well to both desktop and mobile devices.
If you believe your theme is causing your store to slow down, we advise you to do the following steps:
- Disable any aspects of the theme that you don't use. Strike a balance between features and quickness in an online business.
- Use a system font if possible.
- Consult a Webinopoly theme developer. If you are using a free theme from Shopify, then you can contact support for guidance. But if you use a third-party theme, then you can contact your theme developer or hire a Webinopoly Shopify expert.
- Use a theme that's optimized for performance
- Hire a Webinopoly Shopify expert
A hero layout, or hero Image, is usually a large image with your headline, tagline, or CTA (call-to-action). It’s usually found at the top of the homepage to capture your customers’ attention.
Most websites will opt to use a hero-image slideshow or a carousel (those that display different images) since it gives a variety. However, features like this this greatly increases the load time due to the size and number of the images. Most hero sliders will only look good if they have 3 to 5 image slides. The truth is, these don’t look good on mobile and sometimes are even distracting to customers.
To properly optimize your hero layout, trim down the number of images or just eliminate them altogether. We recommend using only one, the best one you have, as your hero image. Next, add a clear, compelling Call-to-Action to draw in your customers.
Here are a few things to keep in mind:
- Always use a high-quality image - we want to make a good first impression. It’s imperative that you use a visual that’s high-resolution and captivating enough to capture the user’s attention. Just keep in mind to maintain a low image size to keep your page speed up.
- Have a clear message - To accompany your hero image, you should have a message that clearly states what you are offering your customers. This is your who, what, and why. Who are you? What are you selling? Why should they buy from you?
- Use a Call to Action - push customers to take an action such as when a salesperson encourages potential customers to listen to them, use a promo code, or make a purchase. Your call to action can be a short statement or a button that makes buyers want to take action such as browse your website, check out products or refer other people.
By using a hero layout, you are giving your customer a visual cue of who your brand or company is, what you are all about and why you’re a perfect choice.
One of the most common mistakes people who run eCommerce websites do is to skip image optimization entirely.
What does this mean? You upload images that are so huge that your customer’s browser has to scale them down when it loads the page. This drags down your Shopify store’s loading speed, especially for mobile. What you want are smaller images and smaller file sizes.
Shopify recommends using 2048 x 2048 pixels for product photos. If you have images larger than this, then you MUST reduce their dimensions.
Here’s how to do that:
Use Shopify’s Image Resizer - Shopify's image optimization tool is an amazing free tool that optimizes your images for the web
- First, navigate to Shopify’s Image Resizer tool.
- Upload the photo you want to resize.
- Then click "Submit."
- If successful, you can download the resized image.
- Replace the images on your Shopify store with the resized versions.
Next, check for any apps or features that you might have installed. Do you use features like a carousel or slider to showcase your “best-selling products”? Features like this can slow down your web page and be an issue.
Why? Information is being pulled from your product pages (a separate page from your home page) and is being displayed as a thumbnail. Photos on your product pages are often a larger size than what’s needed for your carousel or slideshows, hence the user’s browser will scale down these images for the thumbnail and lengthens the load time.
You can opt to avoid using image sliders altogether. They add unnecessary images, they are bad for SEO and they load poorly on a mobile device because they push your content down.
A quick remedy for this is to use Shopify's built-in image size parameters. It’s a tool that ensures you are downloading the smallest image possible without the quality suffering.
Keep in mind that JPG is the most recommended image file type in Shopify, as it provides a good blend of high quality and compression for quick site loading times. PNGs are also popular. Though they provide slightly better image quality, their big file size can cause your site to load slowly.
Having a fixed height and width for your photos, allows the browser to create placeholders for them. If you don't do this, the browser will have to completely load the image before proceeding. This takes more time in the long run. By specifying the image's height and width, the browser will recognize the image's dimensions and make space for it while the rest of the page loads.
Another quick tip is to use the same aspect ratio for all images of the same type. This makes them look cleaner when viewed side by side as they're all the same size. For example, if you want all of your product images in a collection to be the same size, they must all have the same aspect ratio.
You can use Shopify’s image editor to crop your images to have the same aspect ratio. Another great tool you can use is Shopify's product camera. This allows you to take photos and videos of your products in the ideal aspect ratio, directly in the Shopify app.
What is a redirect? It’s when a web page that is visited at a certain URL, changes to a different URL. For example, a person visits “website.com/page-a” in their browser and suddenly they are redirected to “website.com/page-b” instead.
Think of it this way, you are driving to work, but took the wrong turn, and now you have to drive way longer.
When you have redirects on your Shopify store, it makes it load so much slower. To make it load faster you will need to 1) Identify your redirects 2) Fix broken links
Identify Your Redirects and Fix Broken Links
You can open up your Shopify store’s backend and navigate to your URL Redirects portal. This will display most of your store’s active redirects.
From here, you can check for any errors or 404 pages. You can also use this tool to check for any broken links. Just enter your Shopify store’s URL and let it work its magic. If the tool finds any broken links, you’ll get a list. There is an “src” link that will show you where the broken links are in a page’s code. Once you’ve found those, you can then fix those links.
Broken links on your website can be such a pain since they increase unwanted HTTP requests and provide a poor user experience.
Page size elements include CSS, Javascript, and pictures. Using huge photos or objects can cause your page to load slowly. When creating your pages, keep this in mind. You can measure your page by saving it as a web archive folder of the browser on your PC.
Reducing image sizes, keeping your files together, optimizing your CSS and Javascript files, and reducing the number of apps used can reduce the page size drastically.
Having fewer elements on your page means fewer HTTP requests and a faster page. Customers will take longer to discover your Shopify store if you are utilizing a slow DNS. To fulfill your customers' needs, you need to consider upgrading to faster DNS solutions.
Apps are great. But more apps mean more code which again, leads to a slower store.
Shopify includes “Apps,” similar to WordPress plugins. This means that they allow site owners to easily add functionality to their websites without having to be a developer. Apps are a great way to expand the capabilities of your website.
However, keep in mind that enhancements like these come at a price in terms of performance.
Every time you add apps or scripts to your website, this adds to the total number of requests your site is making. Additionally, the size of these scripts should be taken into consideration. Too many apps or third-party codes can decrease the performance of your Shopify store.
Check your installed apps and you might discover some you don’t use or even need. Get rid of the dead weight and start uninstalling. Deleting apps from your Shopify store is generally safe, but in case you aren’t sure, we recommend checking in with a Shopify developer before deleting any apps. Without knowing it, you might accidentally delete ones that are actually integral to your Shopify store.
If you think that an app is slowing down your store, then it is advisable to remove it but before you remove any unused app codes yourself:
- Consult your app developer
- Work with a Webinopoly Shopify expert
For 64% of mobile users, a page needs to load in less than 4 seconds. This is more than half of your potential customers. Giving you a clear picture as to why mobile optimization is critical to the success of any Shopify store. Especially given the growing popularity of mobile shopping.
One of the most common complaints from mobile buyers is the slowness of pages. You'll need to run several tests to figure out why your visitors aren't converting and start recalibrating your Shopify store for mobile.
Test and optimize your mobile site speed
Figuring out your own website statistics will help you decide on the next course of action. Tools like Google Labs’PageSpeed Insights give personalized suggestions to improve your mobile site performance. It also calls out the elements on your site that slow down the page, like CSS and JavaScript.
Check how your Shopify store loads on different devices
Simply go to the developer tools from the View → Developer → Developer Tools menu. Click on the icon with the cell phone and the tablet on the menu. This will allow you to toggle between desktop and mobile views. There will be a drop-down menu there that will allow you to select which device to test from.
Re-evaluate your Shopify theme
Here are some questions you should ask yourself as you assess your theme:
- Do all the images look good on mobile?
- How is the checkout page experience? Is it easy to check out on a mobile phone?
- Are the buttons a good size and are they user-friendly?
- Is the navigation clear on mobile devices?
- How hard or easy is it to scroll up and down?
- Is it a seamless customer journey with minimal touchpoints?
If you answered "no," you'll need to either pay a developer to repair them or look for a new Shopify theme.
Accelerated Mobile Pages (AMP) is a framework for building websites that are optimized for speed and user experience. It lets a publisher create fast-loading web pages on mobile devices.
If you create a website using the AMP framework, you will be given search engine benefits in Google. When users go searching for your Shopify store on Google or a keyword related to your store (provided you’ve set up your SEO), your page should load extremely fast if it’s built with the AMP framework. This is because Google caches and preloads the page, making it practically instantaneous when a user clicks on a search result, which is a HUGE benefit.
There are major SEO benefits in addition to the speed advantages. AMP pages are frequently ranked higher than non-AMP pages by Google. Furthermore, consumers who see the AMP lightning bolt are more likely to click on it rather than other links since they know it will load considerably faster.
Because mobile users account for more than half of all potential customers, making sure your website is mobile-friendly is a must. Your website will load faster on mobile devices if you use AMP technology.
When a customer visits your site, their browser sends a ping to your web server, requesting the files that include the page's content. HTML, CSS, JavaScript, pictures, icons, and other files can be found in these folders. This request is an HTTP request. The browser sends a request for a file and the server transfers that file to the browser.
When the server receives an HTTP request from a user’s browser, your server responds by sending the required files. The user’s browser then renders the page.
This is important to know because every time someone visits your site, their browser needs to make a separate HTTP request for every single file.
Reducing the number of elements of your site pages means minimizing the number of HTTP requests that will speed up loading times for your site.
You can use a tool like the HTTP Requests Checker to find out how many total HTTPS requests your page makes.
A few ways to reduce the number of HTTP requests are:
Reduce the number of installed Shopify apps: A vast number of Shopify apps include CSS/JavaScript files that are immediately added to your store. The issue is that when your app is not in use, the CSS/JavaScript files continue to run in the background, slowing down the performance of your store. Browse through your app store and delete any apps that are no longer in use.
Enable lazy image loading: This method uses a Javascript module to load images only when they are required to be shown to site visitors, reducing the time it takes for a page to load. When your theme uses tall pages, Lazy Image Loading comes in handy because a lot of the images won't be seen until the visitor scrolls down. This translates to fewer HTTP requests. As a result, you won't have to load all of the images at first.
Perform code minification: The performance of your site is impacted by inefficiently coded HTML, Javascript, and CSS files on your page. Developers utilize a tool called a minifier to get rid of unnecessary code and address this problem.
Select a responsive and fast theme: Always check to see whether the theme you’ve chosen is updated and look for the live preview. Before deciding on a theme, it's a good idea to put it through tools like Google PageSpeed Insight and GTmetrix and examine the findings.
Conclusion
There you have it! Let me know if these tips helped you and how fast your store was before and after. If you have any questions or suggestions, you can contact me directly or any of our Shopify experts here.
You must get your team on board by investing time and resources to improve your site's performance and speed. All of the information and tools we've provided are there to help you out when you make your case.
Now a lot of these tips, you can do yourself. However, you can always check with a Shopify expert if you aren’t able to. Shopify Experts are certified and backed by knowledge to help you optimize your Shopify store.
Good luck with improving the page loading time of your Shopify store!
If you're concerned about the following:
- That your code is not optimized
- Unsure which apps and codes can be deleted
- Want to have a performance-optimized Shopify theme
We advise you to:
- Hire a Webinopoly Shopify expert to help you to find inefficient or useless code, check and remove unnecessary features from themes or apps, and create a theme that best suits your needs.
Connect with us
If you’re ready to start, you may call us at 713-805-5888, email us at [email protected], or leave us a message here.
Learn more about Webinopoly
If you’d like to learn more about what we can do or view our portfolio, please click on the links below: