Your Shopify store’s speed is one of the most important aspects that influence user experience. The faster your site loads, the happier your customers become. This results in lower bounce rates, higher customer satisfaction, and potentially more sales.
Additionally, website performance is among Google’s ranking factors. So, if you wish to appear at the top of the search results, improving your store’s speed is a great way to start.
However, it can be difficult to know where to begin. That’s why in this article, we’ll give you 9 practical tips on how to speed up your Shopify website as well as tools to monitor your store’s performance.
How does a slow website affect your Shopify store?
Poor performance can cause multiple issues to your store, including a bad user experience, bigger bounce rates, negative SEO impact, and a decrease in sales. Here are the main points on how a slow website can affect your Shopify store:
Bad user experience
Users don’t like waiting for a slow website to load, so it can frustrate impatient visitors and cause them to leave without giving your brand a chance.
This can negatively affect the bounce rate of your site. According to Google Marketing Strategies, a page load time going from 1 to 3 seconds can increase the bounce rate by 32%.
Worse user experience and higher bounce rates can lead to decreased conversion rates. So naturally, Shopify page speed optimization equals a better chance to generate Shopify sales.
Negative SEO impact
Page speed has long been an important SEO ranking factor on Google in attempts to provide visitors with the best user experience.
So, performance issues on top of higher bounce rates can also decrease your position in search engines. This will, in turn, make your website harder to discover.
How to speed up your Shopify website?
Website speed is one of the most important technical Shopify SEO aspects you should take care of. Here are the main steps on how to speed up your Shopify store:
1. Optimize Shopify images
One of the easiest ways to accelerate your website is to compress and improve your images. Here are steps you can take to optimize Shopify images:
- Use the right file format. Shopify recommends JPEG for blog posts and product images, while PNG is more suitable for logos and borders. However, it also allows serving even smaller files in WebP format whenever browsers support it. You can easily do it with the free WebP converter.
- Compress images. It makes your images use less storage, improving your site’s performance. You can manually compress each image using tools like Photoshop or do it automatically with the TinyIMG app.
- Optimize GIFs. If not optimized correctly, GIFs can affect your store’s speed. Compress GIFs using lossy compression, convert them to HTML5 or MP4 files, or consider replacing them with static images.
- Change images to the recommended size. Make sure your images are responsive and don’t exceed 20 MB in file size and aren’t bigger than 4472 x 4472 pixels. If you don’t know what width and height to use for different images, check out our Shopify image size recommendation guide.
Compress images automatically without sacrificing quality with TinyIMG
Get TinyIMG now2. Enable lazy loading for below-the-fold images
Lazy loading is a method where only the page elements that visitors initially see get loaded, while other parts load when the user needs them. Since there are fewer elements to load, your website can open much faster.
One of the most popular ways to implement lazy loading is to load low-quality images below the fold. As the person scrolls, they get replaced with high-quality images.
There are multiple ways you can enable Shopify lazy loading. If you’re good at coding, you can add it manually by downloading the LazySizes JS file and editing the code. However, the easiest and fastest way to enable lazy loading is with third-party apps like TinyIMG.
3. Disable apps you no longer use
Every app you install adds scripts to your Shopify website. While they’re necessary to run the app’s features, it can come at a performance cost. So, the fewer app scripts your website needs to load, the better the site speed you can expect.
You can remove apps by going to Shopify’s Settings and navigating to Apps and sales channels. Press the three dots by the app you want to get rid of and click Uninstall.
Plus, always try choosing from the best Shopify apps that are multifunctional and can solve many issues at once instead of one small detail.
Install TinyIMG and determine which app loads on which page using script control
Try TinyIMG today4. Optimize your theme
Overloading your theme with custom changes can result in a much slower website. There are multiple ways you can optimize your theme’s performance:
- Limit customizations. Don’t overload your website with too many custom changes. It can lead to more resources and result in a slower theme.
- Keep your theme up to date. Make sure your themes are always updated – new versions may be better optimized for speed.
- Use CSS or HTML. CSS or HTML render faster, so utilize them for your theme’s basic functionality instead of JavaScript. Make sure you also optimize your codes using free online minifiers like Minifier.org or Toptal.
- Switch to a static Hero image layout. If you’re still using sliders or carousels on your homepage, change them to a static Hero image layout instead (if possible). Numerous images that transition can increase loading times.
- Reduce JavaScript usage. You can use any online minifier like Toptal to get rid of any unnecessary code without affecting functionality.
5. Switch to system fonts
While it may be tempting to use custom-designed fonts, they can hinder website load times because browsers need to download them. So, if your website’s fonts aren’t very important, consider changing them to system fonts.
System fonts, known as web safe fonts, are pre-installed on most computers so they don’t need to be downloaded and won’t hinder your site’s speed. You can see the system font options provided by Google below.
Source: Google Fonts
You can customize the fonts of your website by following this quick tutorial:
- From the Shopify Admin dashboard, go to the Online Store, then head to Themes, and click Customize.
- Click on Theme Settings and then Typography.
- Press Change for types of text, choose a font, click Select, and then Save.
If you need help picking, you can also explore our Shopify font guide to find the main font for your site as well as matching backup options.
6. Fix redirect chains and loops
Redirects happen when search engines are requested to send users to a different URL than requested. They’re often used for merging duplicate content pages or to navigate users from out-of-date content.
However, website speed issues arise when redirects are managed incorrectly. For example, redirects relocating the user to other redirects cause redirect chains, while two URLs pointing to each other cause redirect loops.
You can quickly identify redirect loops or chains using apps like ScreamingFrog’s SEO Spider tool. Here’s a quick guide on how to do it:
1. Download and install the program (500 URLs are free)
2. Insert your website’s URL and press Start.
3. Once the analysis is completed, click on Response Codes and navigate to the Redirection (3xx) tab.
4.You can also export the report to identify redirect chains and loops by going to Reports, navigating to Redirects, and clicking on the All Redirects report.
Once you find the issues, you can start managing redirects and updating the URLs to point to the correct final destinations.
7. Fix broken links
Aside from ruining user experience, not fixing broken 404 links can significantly delay page load time. Broken pages usually appear when the merchant deletes pages without setting up redirects.
However, you can easily fix broken links by following this step-by-step guide:
1. Find pages that link to a broken URL. For this, you can set up Google Search Console or use the TinyIMG app.
2. Redirect broken links to alternative pages.
3. Enjoy improved user experience and store speed.
Redirect broken links to alternative pages with TinyIMG
Find broken links now8. Reduce HTTP request count
HTTP requests are the way browsers and web servers communicate when someone comes to your Shopify store. This includes buttons, visual content, or code files. Naturally, the more the requests, the slower the site.
There are a few ways you can reduce the number of HTTP requests:
- Remove unnecessary or heavy plug-ins and files
- Delete images that aren’t necessary and optimize the ones that are
- Remove buttons that aren’t crucial
- Get rid of videos that lack value
9. Host videos externally
Putting every single video directly on your website is detrimental to your store’s speed because customers are loading videos directly from your website server. That’s why it’s best to host all of your Shopify product videos externally.
You can use Vimeo or any alternative video hosting platform. Here’s a quick guide on how to embed external videos into your Shopify store:
1. Upload the video to your chosen platform, like Vimeo.
2. To ensure the video is responsive on mobile devices, use a responsive embed code generator. Copy the code.
3. Go to Shopify Admin and navigate to the page where you want to insert the video.
4. Find and click the Insert video button.
5. Insert the copied code and click the Insert video button.
6. Don’t forget to Save the changes. That’s it!
Tip: It's better not to go for the obvious option - Youtube. The platform runs a lot of ads and actively collects user data, all of which can cause page speed disatvantages.
3 best tools to check website speed
The best way to check if your Shopify performance optimization works is to monitor website speed changes before and after. Here are 3 tools that can help you check your store performance:
TinyIMG
The TinyIMG app allows you to quickly check the website speed of your site. All you have to do is:
1. Get the TinyIMG app and open it in your Shopify Admin Dashboard.
2. Click on Site Audit, select the page you want to check, and press the Get report button.
3. Scroll to the Page speed section and navigate your mouse cursor to it until the Learn how to fix it button appears. Click on it.
Here, you’ll find practical tips on how to increase Shopify store speed. Once you implement changes, click the Re-scan button to generate a new report and monitor changes.
You can also install the free TinyIMG extension for Chrome to monitor Core Web Vitals of any page, including the LCP (Largest Contentful Paint) for checking loading time, FID (First Input Delay) for page interactivity, and CLS (Cumulative Layout Shift) for the visual stability of the page.
All you have to do is open the extension, and you’ll find the Core Web Vitals results on the main window.
PageSpeed Insights
Google PageSpeed Insights is a free tool for monitoring the performance score of your page. It’s very easy to use and understand.
To get a report, just add the URL you want into PageSpeed Insights and click the Analyze button.
You can choose to check results on both mobile and desktop devices. The first thing you’ll see is the Core Web Vitals results. If there are any yellow or red metrics, it’s a sign that your site needs improving.
You can also scroll down to find the performance score of your page, which should ideally be 90 and above.
Below, PageSpeed Insights will provide you with diagnostics to demonstrate the exact issues that cause the poor metrics.
Shopify Report
You can check your eCommerce website speed straight on Shopify by going to the Analytics tab in your Shopify Admin dashboard and clicking on Reports. Simply click on the Web Performance tab to get results.
Shopify used to give users a Google Lighthouse speed score, but ever since Core Web Vitals became a priority for Google, they changed the report to show these metrics.
So, once you open the report, you’ll find three metrics, including loading speed, interactivity, and visual stability, and their results.
Below the report, Shopify will also provide you with the best tips to improve performance and helpful resources from the platform’s blog.
Final thoughts
Having a good Shopify site speed is important to ensure your SEO efforts don’t go to waste, bounce rates don’t increase, and you don’t lose potential customers.
The best practices to achieve a fast Shopify store speed include optimizing your images, fixing technical issues like broken links and redirect chains, and removing unnecessary apps. You may also optimize your theme, minify your code, and reduce the number of HTTP requests.
We highly recommend the TinyIMG app, which helps speed up your store quicker. With this app, you can optimize images, fix broken links, create redirects, enable lazy loading, and many more improvements in just a few clicks.
Suggested reading
- How to start a successful Shopify store
- Shopify SEO guide to improve your online store rankings
- Best Shopify apps to speed up your store
Frequently asked questions
You can optimize your Shopify site speed by picking a lightweight Shopify theme, compressing and reducing image sizes, avoiding the use of GIFs, and enabling lazy loading. All of this can easily be fixed with the TinyIMG app. You can further optimize your store by minifying code and limiting third-party apps.
For many Shopify stores, the main reasons for poor web performance are heavy themes, third-party code like tag managers, unoptimized image files, or too many installed apps.
There are many ways to optimize your website on Shopify, including targeting relevant keywords, improving product pages and content, optimizing your site’s speed, and making your images and website design mobile-friendly.
The best speed for Shopify stores is a 90 and above performance score on PageSpeed Insights. Shopify has removed the speed score metrics and replaced it with Core Web Vitals, which Google values more.
