As a Shopify store owner, your site speed is crucial to the success of your business. Fast loading time often means a better user experience, a lower bounce rate and higher user engagement. It also directly impacts your sales and conversions greatly. According to analytics by Portent, the highest ecommerce conversion rates occur on pages with load times between 0-2 seconds.
Are you looking to improve your Shopify store speed? Then this comprehensive and actionable guide is for you. Let’s get started on creating a faster and higher-converting Shopify store today!
Table of Contents
Why do you need to speed up your Shopify website?
Visitors aren’t as patient as you want to think, so a slow website outright leads to discouraged customers and lost sales. Below are reasons why you just have to speed up your Shopify website:
1. Improved User Experience: If a page takes too long to load, visitors can get frustrated and leave. Actually, 40% of people abandon a website that takes more than 3 seconds to load. If your pages load quickly, they are instead more likely to stay longer and browse more products.
2. Increased Sales and Conversions: Research has shown that a delay of just 1 second in page load time can result in a 7% decrease in conversions. As a Shopify store owner, your goal is to convert as many visitors as possible into paying customers. By speeding up your website, you can increase the likelihood of visitors making a purchase.
3. Better SEO: Google factors in site loading speed when determining SEO rankings. If your site is slow to load, it’s less likely to appear at the top of search engine results. A faster website can help improve your SEO and drive more traffic to your store.
4. Mobile Optimization: With 60.9% of website traffic coming from mobile devices, it’s important to make sure your website is optimized for mobile users. A slow loading website can be particularly irritating on a mobile device, due to its smaller screen size and limited processing power compared to a desktop computer. This can turn your potential customers away.
5. Cost Savings: A faster website can reduce your hosting costs and save you money on bandwidth. It can also help you get more out of your ad spend by retaining users longer and increasing the probability of them buying goods.
Now that you understand the importance of a fast-loading website, want to know how fast your website runs? Evaluate your own site’s speed with tools listed below!
Test your Shopify site speed
Running a speed test can help you find out how quickly your site is loading and what issues are affecting its performance.
There are several free tools available that can help:
- GTmetrix: This tool analyzes your page’s speed performance, provides actionable recommendations on where to improve, and also tracks your historical performance data.
- WebPageTest: WebPage Test allows you to run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds.
- Pingdom: Pingdom checks the load time of a page, analyzes it and shows the performance bottlenecks.
From the report generated by these tools, you may find that usually images, apps, codes, and http requests are some of the key factors affecting your store speed. However, don’t worry. Up next, we will show you the easiest ways to troubleshoot each.
Things to Optimize on your Shopify Website
If you don’t know what to optimize or have optimized the wrong things in vain, your store may become a ghost town deserted by target customers; customers who couldn’t spend forever waiting for your site to load. So keep reading to learn the most important things to optimize to speed up your Shopify website.
1. Optimise your Images
According to Shopify, image size is important for three main reasons: user experience, page speed, and rankings. While images make your store more attractive and interactive, oversized and unoptimized ones can greatly slow down your page load. This could also lead to lower user satisfaction and potentially hurt your SEO rankings. Here are the key ways to optimize your images for a faster site:
- Image Compression
Images usually make up a large portion of a Shopify website’s total weight. If an image is 1MB and used on multiple pages, it will add an extra 1MB of data to be loaded every time a user visits. But by reducing the image file size by 50% to 80%, you can see significant improvements in your site speed. Additionally, your image quality will not be lost, if you use professional image compression tools!
- Converting PNG to JPG
PNG uses lossless compression, maintaining all the image data but this results in larger file sizes. By comparison, JPG uses lossy compression, meaning it discards some image data to achieve smaller file sizes. Converting your PNG images to JPG can help to reduce the file size.
However, this isn’t a one-size-fits-all rule. PNG supports transparency, meaning that the image’s background can be see-through, but JPG doesn’t. JPG format could therefore sometimes cause your images to look incorrect.
Note that images that require high quality and clarity shouldn’t be converted. Images such as logos and thumbnails are key to maintaining your brand’s visual identity and users need a super-clear idea of what they contain. Converting these images can make them appear blurry or pixelated, negatively impacting your brand’s image. The same goes for images that contain fine details like graphs and charts, icons and buttons, infographics, etc.
- Using static images instead of GIFs
GIFs are often larger in file size compared to PNG or JPG images of the same dimensions, which can affect how fast your page loads. That’s because static images are more efficiently compressed, resulting in smaller file sizes.
GIFs are actually not optimized to be used on the web. Platforms like Twitter actually avoid them by first converting GIFs to video files (mostly MPEG4) so they don’t affect their speed by their long load times.
Putting these together, GIFs are image formats you clearly want to avoid if you care about your store’s speed and UX.
- Replacing sliders with Hero images
Sliders can easily make your store load slower, especially if the images are weighty or if the slider contains multiple images. Though typically larger, Hero images are often optimized for swifter page loading, since they require less scripts or plugins and are often lazy loaded.
Additionally, Hero images are usually resized and reformatted to fit the smaller screens of mobiles. However, sliders can be difficult to navigate on mobile devices, and the images may not resize correctly, resulting in a negative user experience.
There are also extra benefits of Hero images over sliders. Take a look if you are interested.
- Search engine optimization: Sliders can be less optimized for search engines because the images in a slider may not be indexed or ranked as highly as standalone hero images.
- Accessibility: Hero images can be easily accessible to users with visual disabilities, if optimized with Alt text, captions, etc. Doing the same for sliders is more challenging as they often contain dynamic images, making it difficult for screen readers to interpret.
- User engagement: Hero images are designed to grab users’ attention and send a clear, concise message about your product or brand. Sliders can be overwhelming and distracting. Users may not spend enough time to engage with all of the images in the slider.
2. Optimize Your App Usage
Most Shopify apps are built using JavaScript and CSS to enhance the functionality and appearance of a store. Once installed, apps will add their codes to your store, which run in the background to provide dynamic and interactive experiences for customers.
If not properly managed, they can significantly increase your page size, cause compatibility issues, and slow down your store. Here are some of the things you can do to prevent that:
- Remove unused apps.
By removing these unused apps, the store can reduce the amount of code that needs to be loaded and executed per time. This could improve the overall performance of your story.
- Log in to your Shopify admin panel.
- Go to the Apps section.
- Review the list of apps installed on your website.
- Uninstall any apps that are no longer needed or used by your website.
- Disable unused app features
You can also simply disable some unused features of your apps. By tracking how users interact with your website with Heatmap tools like Hotjar, you can identify which features are most valuable and should be maximized, likewise the least used ones you should get rid off.
Then, go to the App section of your store, locate the app and disable the feature you wish to:
- Clean the code residue of installed apps
When apps are removed from your Shopify website, their codes may still remain. Eliminating it isn’t a walk in the park. Either you have developers onboard, or hire professional expert services, in case you mess up your store codes.
3. Optimise Elements of Your Theme
Some elements in your theme can drag down your store. You can do the following to give your website a speed boost.
- Use system fonts
System fonts are fonts that are pre-installed on most computers and devices. Compared to custom fonts, they don’t need to be downloaded externally from a server, reducing the HTTP requests to load the content and thereby improving your page speed.
You can use a font family like mono, serif, or sa ns-serif. They don’t require a font license while looking great for customers.
- Disable non-essential theme features
Same as app features, disabling non-essential theme features such as pop-ups or sliders can also hasten your webpage. This will reduce the amount of code to load, likewise cut down distractions.
However, before disabling anything, you should consider how important these features are to your user engagement and conversion. Use Google PageSpeed Insights or GTmetrix to identify which elements are slowing down the website and should be removed or optimized.
- Use a lightweight, speed-optimized website theme.
A lightweight theme can set your store on a fast track to retain customers, saving you tons of time and costs in speed optimization.
Note: Changing a Shopify theme is not hard. However, you might lose some customizations and added features, if not carefully.
4. Optimise Your Videos
Videos can help you engage visitors and keep them focused on your site longer. However, unoptimized ones are often hefty, slowing down your page loading time. Your visitors may impatiently bounce and browse your competitor’s store instead.
Here are a few ways to optimize your videos to reduce page buffering and lag time.
- Embed product video links instead of uploading them.
By embedding a video from a third-party video hosting service, such as YouTube or Vimeo, you can save on storage space and bandwidth. What’s more, these services typically have faster load times and better video quality than videos directly uploaded to a website.
- Lazy load videos.
Lazy loading defers the loading of non-critical resources on your webpage, such as images and videos, until they become visible to the user. This can reduce the initial load time of your web pages. The bottom line is not to go for faster loading at the expense of user experience, like compressing video resolutions excessively. Strike a balance!
For example, ensure that your video is clearly visible and embedded in the right place. This way, users don’t have to scroll through long pages to find it.
5. Optimise Your Site Codes, Links and Requests
The HTML, CSS, JavaScript files, plugins, HTTP requests, all contribute to your store’s overall weight and the number of resources needed to display your pages correctly. Here’s how to optimize them. Note that some methods can be technically challenging. It’s best to use a professional service to get it done swiftly and easily if you don’t have a strong developer team.
- Minify HTML, CSS, and JavaScript files: This removes unnecessary white space and comments in your theme code, which can reduce the coding file size.
- Eliminate resources that are render-blocking: By this, the browser will not need to load resources until they are visible to the user.
- Address redirect loops: This means to correct any redirects that are causing the browser to go in a loop before loading the right page content.
- Migrate tracking codes to Google Tag Manager: That is, you’ll move the tracking codes to Google Tag Manager, which can improve the load time of your website.
- Use Gzip compression: Compress the data that is sent from the server to the browser. It can reduce the amount of data that needs to be sent and help your site get faster.
5. Enable AMP
AMP is a technology that creates lightweight versions of web pages that are optimized for fast loading on mobile devices.
To enable AMP on your Shopify store, you can install a professional third-party app like SEOAnt. This app allows you to easily enable AMP on your Shopify store with one click. You can also customize the design of your AMP pages to match the look and feel of your website.
6. Use Shopify’s built-in CDN
Shopify has a Content Delivery Network (CDN) that can distribute your website’s content to multiple servers around the world. This means, customers worldwide can access your page content simultaneously and quickly. It is specially built to help a Shopify store load faster. For this, you need to upgrade to the Shopify Plus plan.
