How to Speed up Shopify Website:
12 Practical Tips for Speed Optimization
15 mins read
Speed is one of the key characteristics of a website. It determines whether your online store will be loved by both visitors and search engine algorithms. So, this parameter deserves your attention, right?
Without further ado, let’s get to the main point — how to speed up your Shopify website.
Before you dig deeper into speed optimization practices, just one more thing! To learn more about website performance, you might want to check our Shopify Performance Optimization guide.
#1 Compress, Resize, and Combine Images
Pictures play an essential role in load speed and thus in the Shopify speed optimization. Uploading high-quality pictures to use on homepage sliders or product pages is a common mistake. Of course, beautiful photos are a must-have for any online store. Plus, this is exactly what your customers want to see when deciding whether they should buy from your store or not. Although shoppers won’t tend to notice a slight decrease in the resolution of your optimized images, they will notice and relish the opportunity to enjoy the significant improvement in your website performance.
On the other hand, Shopify image optimization and compression will help speed up Shopify site performance significantly. For example, compressing images from 20 MB down to about 300 KB can sometimes improve website speed by 70%.
So, let’s dive into how to improve Shopify store speed by using a little magic with different types of images.
The homepage Hero slider
Large Hero sliders at the top of the homepage is one of the distinctive features of Shopify online stores. No doubt, large sliders with high-resolution images make your ecommerce store look sophisticated and attract visitor attention. However, a slider with 4 to 6 high-resolution images adds a seriously destructive load to your store. Here’s what you can do about it:
- Decrease the number of slides. Leave no more than three photos in a slider and optimize the images for Shopify without losing their quality. Your slider should follow the best UX practices and should be complemented with a Lazy Load feature. The store will still look great, without the heavy weight.
- Eliminate the Hero slider and replace it with a single, well-thought-out hero image complete with a CTA on it. Many online store visitors are either annoyed by the slider or at the very least, don’t bother to watch every slide. Of course, it is your choice to decide which option is for you.
So, if you decide you still want to use a slider, just be sure to consider the previous point.
Product images
To compress and reduce the size of product images without losing their quality, we recommend using TinyJPG or TinyPNG online services. Just download or drop your files, and download the compressed and ready-to-be-published pictures in a minute.
For non-optimized pictures that are already uploaded to the site, you can install one of the available Shopify image optimization apps, like Crush.pics or Image Optimizer. These tools are made to take care of all existing pics and those that will be uploaded to the site in the future.
Icons
Use CSS sprites to consolidate multiple images, such as icons, into one. This will limit the number of server requests, thus improving the page speed.
Instead of downloading all images one by one (1 HTTP request per copy), the CSS sprite loads one large image sending only one request to the server. The CSS, in turn, allows the display of each element separately throughout the page.
The CSS Sprite Generator tool quickly creates sprites and renders the code for you. For this, you just need to drag-and-drop images to the tool and then download the sprites.
Thumbnail images
If you use carousels to showcase popular products on the homepage and related products on the product pages, the following advice may be useful for you. To display thumbnail images in such carousels, they are pulled from the product page, as is the related product information. If you leave everything as it is, the system will take high-resolution images, and the customer’s browser will have to adjust the pictures to the requested dimensions, in turn, making the customer wait longer.
For desktop browsing, the change in download speed may be minimal, but if a potential customer has reached your site from a mobile device, the situation may drastically change, and the page load speed will increase several times. However, an easy fix is that you can make some changes to the Liquid code — just use the “srcset” attribute, and set different screen resolutions for images.
Overwhelmed by the technical details?
Our Shopify Experts Are Here to Help
#2 Use Lazy Load to Speed up Shopify Store
Lazy Load is a technique that helps by loading images only as soon as they appear in the viewport. For example, on the store for our client, Generate, the drop-down menu on the homepage included product carousels with six products for each slider. This meant that 48 additional thumbnail images had to be loaded to showcase their popular products to customers. In this Shopify store speed optimization project, we replaced all sliders in the drop-down menus with optimized static images. Additionally, we used Lazy Load, which works to make the pictures load as soon as the more critical elements on the page are ready.
Lazy Load helped us save 11 seconds of customer time, which is a huge result! 11 seconds may not sound like much, but when it comes to loading a webpage, it is an eternity.
#3 Change GIFs to Static Images
Undoubtedly, GIF files enhance the user experience. However, will visitors wait for this beauty if the product page takes too long to load? A few GIF files can weigh over 10 MB and significantly slow down the page loading speed. That’s equivalent to about 100 images!
We’re not suggesting you remove GIFs from your site entirely. It makes perfect sense to check if all of them are necessary or some of them could be replaced with static images.
#4 Use Embedded Videos to Improve Shopify Site Speed
A video is worth a thousand words — it’s a powerful way to turn window shoppers into customers. Videos can showcase product benefits, explain how to use it, tell your brand’s story, or feature testimonials from satisfied customers. However, there’s a catch.
Your site loading speed, of course. Uploading videos directly to a server of your store can drastically slow down performance.
How to speed up your Shopify store in this case? Use embedded videos instead of uploading them! The simplest option is to host videos on YouTube or Vimeo and embed them on your store’s page. But there are some nuances here too.
Due to the fact that even embedded YouTube videos support autoplay they weigh quite a lot too. Additionally, the standard IFRAME embedding method isn’t adaptive, which can result in an unattractive display on your site.
To avoid these drawbacks, we recommend using Lite-embed. This tool embeds videos with a responsive design for various devices and initially loads only the thumbnail, which is about 15 KB. The video only plays when the Play button is clicked.
#5 Choose a Performance Optimized Responsive Theme
Choosing the right theme for your store is one of the cornerstones of good (or bad!) website load speed, and Shopify mobile optimization as a whole. Here is a bit more info, designed to help you figure out how to optimize a Shopify theme.
- 1. To find out whether your current theme needs any improvements for your Shopify store speed optimization, you should check it separately on PageSpeed Insights. For this, run an analysis of the theme’s demo page, and you’ll see if your current theme needs any improvements.
- 2. If the analysis has found any problems in the performance, the first thing you should do is look for theme updates available from its provider. Yes, it’s true! Sometimes theme designers actually do not abandon their products, but continue to work upgrading and fixing bugs detected by users after the release.
- 3. When choosing a theme, make sure it is device responsive. Today, it is vital to optimize Shopify for mobile and to make sure that your users get the best experience when browsing your website.
Your current theme needs improvement?
If there is a need for any improvements, you now have three options to choose from.
- 1. Update your current theme by changing its code. Only those comfortable with HTML, CSS, and Liquid can cope with this. If that doesn’t really describe you, you may need extra help from experienced developers.
- 2. Choose a new, perfectly optimized and responsive theme from the Theme Store.
- 3. Create a custom theme from scratch. This option will be more expensive than the previous options, and you will have to hire a Shopify development company that has enough skills to cope with this task professionally.
However, building a new theme from scratch can reap a lot of benefits:
- You can implement any features missing in the ready-made themes
- Custom website design is another opportunity to make your store stand-out — plus it will be yours alone
- In the future, all needed changes will always be available and easy to access
Want a custom theme?
We’re Ready to Start Building!
#6 Revise the Installed Apps
Although the Shopify platform provides vast native functionality, there are many features that you can implement with the help of third-party apps. While some store owners are thorough as they choose each app to be installed on their store, revising website performance after each installation, others only pay attention to the app features.
Each time you decide to expand the functionality of your store, it is crucial to remember that the more apps you install, the more your website will weigh, the more requests will be sent to the server, and the longer it will take to load each page fully. So, the question becomes how to speed up a Shopify website with all those apps?
The first thing to do is to take stock of all the installed apps. Often, it turns out that some installed applications are used very rarely, while some are not even used at all. However, despite this disuse, even if the application is disabled, JS/CSS files are still running, using resources and, as a result, making the site load longer.
How to optimize your Shopify store’s third-party functionality?
Sort out unused apps and remove them from the store. Before you do that though, thoroughly read the Shopify support documentation and uninstall instructions. You’ll want to make sure you do everything right to avoid any app leftovers. These will only burden the website’s performance in the future.
To avoid common problems in the future, you should only select modules from trusted providers. Before purchasing, you should test every app to reveal its disadvantages. These could include things like an excessive number of database requests, etc.
Are you searching for quality third-party apps?
#7 Reduce the Number of HTTP Requests
When we open a website page, it accesses the server to receive information such as the list of products, shipping or payment methods, images, and other content. Sometimes the generation of a complex page with a bulk of content may imply up to 100 requests. However, if the store is not optimized, the number of requests may increase indefinitely. Each request can require up to 20 milliseconds. While that sounds miniscule, they add up! The more of them are there, the longer it takes to fully load the page.
How can we reduce the number of requests?
Caching!
This is a mandatory feature, especially for pages with large amounts of data, images, videos, and other files. An example of “long” requests for ecommerce stores is one in which the products list page contains more than 100 products. If the data is cached, the server does not need to regenerate it every time the user lands on your website. This significantly speeds up the data receiving process and relieves the server load.
In fact, each element on the page requires sending a separate HTTP request. Hence, the more complicated the page is, and the more details, images, CSS and JS files it contains, the more requests it will send to the server. This of course then means the longer your customers will wait for the complete picture to appear on their screen.
In our Shopify speed optimization project for Generate, we faced an unexpected issue. Five forms were using Magento validation. We replaced them with Shopify validation forms and deleted all the extra scripts. As a result, several additional HTTP requests were eliminated. Additionally, some of the removed Magento JS scripts were found in the main file with scripts. Although their elimination did not lead to a decrease in server requests, the file weight decreased, and now it loads much faster.
In general, after we removed the demand for missing style files and jQuery recalls, and deleted the redundant CSS and JS files, the website load time was reduced by 6 seconds.
#8 Avoid Redirect Loops and Broken Links
First, we have a couple of words about redirects, which are the pain point of numerous store websites. Abundant redirects throughout your store affect website speed. Sure, sometimes redirects are necessary and inevitable, but don’t overuse them. While most customers might never notice that they were redirected to another page, search engines will. These added milliseconds to the page load time will definitely be noticed and might affect your page rankings at any time. Moreover, redirects are usually perceived by Google as factors impairing the user experience, which is another strike against them. So, stick to the 301 redirects only where they are really needed. 302 redirects are good only for short-term use.
As for the broken pages — you probably already know they’re bad, right? Here is why:
Bad user experience
A 404 page is often a dead end for every customer. When wishing to find a needed product, customers landing on a page that ‘does not exist’ is a very, very bad user experience. Numerous broken pages just convince customers to leave the website and move on to the next ecommerce store where the pages work as intended.
Business reputation
It harms your business reputation and revenue. No matter how much you invest in your product or service promotion and building brand awareness, all your efforts will vanish once that potential customer lands on broken website pages.
SEO
404s kill your SEO efforts. Having a couple of broken pages throughout your site won’t harm the website performance or rankings in SERPs. Here, the consequences are much less obvious compared to the previous points.
To understand the way 404s affect your SEO, let’s look at the problem the way search engines see it. Google’s algorithms pay a lot of attention to how users behave on website pages, such as how much time they spend on a page, and how they interact with the content. Accordingly, when users land on a 404 page, they leave it immediately without any real interaction. The algorithm treats such behavior as a signal that the page does not contain the useful content that the user came for. As a result, your pages lose trust as well as position in the search results.
#9 Switch to System Fonts
Dead serious. Switching to system fonts is an easy way to improve your Shopify store loading speed. When you use custom fonts, browsers have to download and render these fonts before displaying your site, which increases page load times. By using system fonts, you eliminate this step entirely, allowing the browser to render text instantly.
System fonts are already installed on your customers’ devices, so there’s no need for additional downloads. They are optimized for each operating system, ensuring fast performance and a clean, readable design across all devices.
To switch to system fonts in Shopify, follow these steps:
- 1. Go to Online Store > Themes in your Shopify admin.
- 2. Click Customize on your current theme.
- 3. In the left panel, select Typography or Theme Settings.
- 4. Choose System Fonts from the font options.
Less is more, you know. So, if boldness isn’t part of your marketing strategy, stick to system fonts.
#10 Use AMP for Mobile Version
AMP (Accelerated Mobile Pages) allows you to speed up a Shopify website several times. The result is achieved due to some restrictions and layout rules for AMP pages. The main ones are:
- 1. All AMP pages are cached on CDN servers around the world for quick access to them.
- 2. Restrictions on the size of uploaded files, which leads to a decrease in the amount of transferred data.
- 3. Limited use of JS, which reduces the number of the server requests.
It should be noted that Shopify stores do not support this feature natively. In theory, there are two options on how to speed up Shopify websites with the help of AMP — using the app or developing accelerated pages from scratch. In practice, the first option is more viable and justified. There are some apps on the Shopify App Store like, AMP by ShopSheriff, Fire AMP, and a few others.
Development of the AMP pages from scratch is a long-term and rather complicated process. Consequently, this leads to higher expenses which is rarely justified, especially when you can take a ready-made solution and implement it within several clicks.
What about when AMP is not an option?
Another important point about the AMP is that it’s just not always a viable option. Let’s figure out when using the technology will really help, and when it might cause numerous issues and headaches.
So, why aren’t Shopify AMPs for everyone?
- 1. This technology is not an option for online shops mainly using complex JavaScript apps that change the way product pages run. Such pages are not compatible with AMP.
- 2. Online stores operating in the print-on-demand niche should abandon this idea too because usually to check out in such stores, users have to upload a photo to personalize their chosen product (e.g. a mug). On AMP, this feature is simply not available.
- 3. The story is the same with wholesale stores that require users to login before viewing the product catalogs. Such functionality is usually achieved in Shopify with the help of heavily customized third-party apps.
Of course, each online store is unique and the decision on whether you should implement AMP on your store needs to be based on a deep analysis of that particular store.
What pages are best to consider for converting into AMP?
If you decide to implement AMP on your store, the next question is — which pages exactly should be AMP? The whole website can’t be converted, but some pages have no need to be converted anyway.
So, let’s summarize. Which of the website pages should be AMP?
- Collection pages. First and foremost, these are collection pages which are the best landing pages throughout every online store. Because of this, the idea to make collection pages AMP is totally justified. Additionally, improved performance of these pages will help them rank higher, consequently bringing more organic traffic to your Shopify store.
- Product pages. Being properly optimized, AMP product pages are good to go. However, as we mentioned above, not every product page is a subject to AMP. Everything depends on the way your product page looks and runs, and on the way you expect it to look and run while being an AMP.
- Blog pages. Sure, you’d want to boost your blog pages! This is a great source of organic traffic. So, don’t miss the opportunity to get the maximum profit from your content, along with letting Google know that your blogs are the fastest.
- Other regular pages, and a homepage are worth considering if they are simple in design and do not request any third-party apps to run properly.
Although sometimes your website’s page load times can be boosted up to 1 sec, you should remember that these would be different pages with slightly different URLs (some kind of product page duplicates with a simplified layout and functionality). In addition, Google inspects these pages separately. To track them, you’ll need to configure basic analytics separately. To learn more on how to add analytics to your new AMP pages you can simply google it and get all the deets.
#11 Minify CSS and JavaScript
Minifying CSS and JavaScript speeds up your Shopify site by reducing file size. It removes unnecessary characters like spaces, line breaks, and comments without affecting the code’s functionality. Smaller files load faster, enhancing the user experience.
For example, a standard CSS file might look like this:
body {
margin: 0;
padding: 0;
font-family: ‘Arial’, sans-serif;
}
After minification, it becomes:
body{margin:0;padding:0;font-family:'Arial',sans-serif;}
While the code still works the same, the file is now more compact and quicker to load.
To minify your CSS and JavaScript in Shopify you may use Shopify apps like MinifyMe or Boostify. If you’re familiar with coding, tools like CSSNano or UglifyJS let you manually minify files before uploading them.
Attention! If you’re not comfortable working with code, ask experienced developers to handle the minification. Incorrect modifications can cause layout issues or break functionality, so it’s best to leave it to experts when in doubt.
#12 Use Google Tag Manager for Tracking Codes
Managing multiple tracking codes, like Google Analytics or Facebook Pixel, can slow down your Shopify store if not used efficiently. Instead of adding each tracking code directly to your store, use Google Tag Manager (GTM). This tool lets you organize all your tracking tags in one place and loads them asynchronously. The last means that GTM will not block the loading of other elements on your store’s page.
How to increase Shopify website speed using GTM
- Visit the Google Tag Manager website and sign up for a free account
- Copy the GTM container code provided and paste it into your Shopify theme.liquid file, just before the tag
- Add your tracking codes (Google Analytics, Facebook Pixel, etc.) in the GTM dashboard. It eliminates the need to modify your Shopify theme each time you add or change a tag
This way you centralize tracking code management, simplify updates, and keep the code of your online jewelry store clean, which improves loading speed.
Don’t let your optimization go to waste!
Protect the Results of Your Recent Improvements
FAQs
Why is my Shopify store speed so low?
Several factors could be slowing down your Shopify store. Common issues include unoptimized images, too many apps or third-party scripts, excessive HTTP requests, or non-minified CSS and JavaScript. Large media files, unnecessary code, or broken links can also reduce loading speed, negatively impacting your site speed and overall performance.
What is a good Shopify speed score?
A good Shopify speed score typically falls between 50 and 70. This indicates that your store loads quickly enough to provide a smooth user experience.
However, you can rely on these figures as a benchmark, but it’s important to focus on more than just speed. Other factors, such as mobile responsiveness, ease of navigation, and overall site functionality, also play an important role in the performance and user experience of your store. Balancing speed with these elements ensures a better customer experience and higher conversion rates.
Is there a limit on Shopify traffic?
Shopify doesn’t place any traffic limits on your store. Shopify hosting infrastructure automatically scales to accommodate increased traffic, even during high-demand periods, without requiring a plan upgrade. Your current subscription plan will handle the traffic load, so you can focus on other factors like optimizing your site speed and user experience.
Final Thoughts
A slow website frustrates both visitors and search engines, driving them away. Therefore, by following these practical tips on how to speed up your Shopify website, you’ll not only enhance your store performance but also improve user experience and boost sales conversions.
Some of these optimizations require technical knowledge. If you’re unsure how to implement them or need personalized advice, consulting experts help you. Whidegroup specializes in optimizing ecommerce stores for maximum performance. Contact us for a consultation, and we’ll ensure your Shopify site is running at its best!
About the author
Olha is a Content Manager and SEO Analyst at Whidegroup. Starting as a Content Writer for software and web development topics in 2011, Olha has always been guided by a desire to thoroughly inspect every field of study before writing a single word. She found her passion in ecommerce and delighted in expanding her expertise in web development, analytics and SEO for small to medium ecommerce businesses.
