11 Tips to optimize page speed for Shopify stores

June 17, 2024

December 12, 2021

•

7 min read

Humans are inherently impatient beings, so that we’ve gone as far as labeling patience as a virtue, something to strive for as it is not easily obtained. This has only been made worse as consumers shifted to the digital realm. In fact, the human attention span has decreased by 12 seconds since 2000 and continues to decrease by 88% each year.

So how can Shopify merchants cling on to the ever impatient digital consumer? Optimizing the page speed of your store is sure to be a direct hit on a dwindling attention span.

Speed optimization quite simply involves tweaking online elements in a way that results in faster loading times. It is also useful to take note of the difference between page speed optimization and site speed optimization.

Site speed refers to the speed at which your site loads as the customer moves through various paths. Site speed is therefore gauged by forming an average from a few sample pages on a website.

Shopify page speed, on the other hand, focuses on the length of time it takes for content to load on a particular page. When you optimize the page speed of your Shopify store, you are reigning in on specific attributes that will decrease each page’s loading time.

Why Should I Optimize Page Speed?

As page speed optimization involves a more targeted response, you are ensuring that whichever page the user is accessing in your store, is loading content as fast as possible.

Page speed is also becoming a growing concern for both consumers and eCommerce merchants.

Almost 70% of consumers confess that page speed influences their likelihood of making a purchase or even returning to a site should this speed be lower than expected. This shows that time really is money for eCommerce merchants!

So just how fast do consumers expect pages to load? Pretty fast as 47% of consumers expect web pages to load in 2 seconds or less. This could be seen as a tough hurdle to overcome as even the top online retailers are falling slightly short of this expectation with an average of 3.88 seconds to load.

Even top retailers are falling short of the exceptionally high page speed consumers expect. (Source: Digital Commerce 360)

The average eCommerce retailer however should not be deterred by this seemingly difficult hurdle. Even small improvements in page speed result in positive benefits. Research from Deloitte found that a 0.1-second decrease in loading times led to an 8.4% increase in conversions with retail consumers spending almost 10% more on purchases.

In addition to satisfying consumer expectations, page speed optimization also goes a long way in improving your store’s SEO ranking. Google uses page speed as a factor in determining the website ranking on its search engine in response to this consumer concern. With Google being the king of search, it is vital for eCommerce merchants to take this into account when forming their SEO strategy.

As well as being a ranking factor for Google algorithm, page speed may also indirectly affect your ranking position through bounce rates.

Bounce rate is the percentage of visitors who leave a webpage without making any actions, such as clicking on a link. Bearing in mind the short amount of time that people expect a page to load, if your page speed is low, your bounce rate will increase as a result. It is important to note that Google does not use bounce rate to determine rankings. However, a study which analyzed 11.8 million Google search results closely correlated bounce rate with first page Google rankings.

Backlinko’s study seems to suggest a link between bounce rate and a site’s positioning on Google search.

So now you can see the benefits of optimizing your web pages for speed, it’s time to take a look into how this can be achieved with some practical tips you can start implementing now.

Read more: Cost to open a Shopify business in 2022

Tips to Optimize Page Speed on your Shopify Store

1. Limit images and videos

Rich visual content is key when it comes to showcasing your inventory to digital consumers. It lifts the barrier of consumers being unable to use all their senses to assess products online. However, large images and videos directly impact the speed at which pages load on your Shopify store. The larger these files are, the longer it will take for your pages to load.

Whilst Shopify does automatically compress the images you upload, there are a few factors you should consider to further ensure that your images are not ruining your page speed.

Image file type: your best option for images on Shopify is JPEG as they provide the best quality at smaller file sizes. PNGs will degrade in quality as they are compressed, leading to lackluster images. Additionally, PNGs are much larger in size in comparison to its JPEG counterpart.

Here we can see that the color remains the most vivid in the JPEG format when this image is reduced to a tiny 24kb. (Source: Shopify Blog)

Decorative images: these are any images which are not product related like background images, buttons and borders. Try to keep the size of the files to a minimum that won’t greatly affect their quality.
The purpose of your images: whilst images do make your site look beautiful, do make sure all of them serve an explicit purpose. If it is not to showcase a product or convey your brand, you are better off not including them.

You may be surprised to learn that in 2018, the average web page size inflated to twice the size they were three years prior. One of the main culprits of this ballooning size is the use of videos. This is a highly visible trend in the retail sector. A recent analysis by Digital Commerce 360 unveils that 42% of merchants in their Top 1000 database incorporated video in at least one location on their eCommerce site.

ASOS includes a video on almost all of their product pages, allowing visitors to better visualize the fit of their clothes. These videos do not compromise page speed as they only load once the user has clicked play.

Despite being a great tool in visualizing products' fit and usage, videos are essentially a large collection of images plus audio, so you can imagine just how drastically this could decelerate page speed.

How do you overcome this conundrum?

There is a way to include video without compromising page speed too much: video embedding with lazy loading. Video embedding involves hosting videos via an external platform, such as YouTube. It uses an embed code to insert the video onto your product pages, so you have to first upload your video on a platform and retrieve the embed code.

Now that you have the embed code, head on over to Products from your Shopify admin. Select a product to view its details page, here you’ll see the option to embed a video. This is where you’ll be able to paste the embed code.

Let’s move on to the second step, lazy loading. Lazy loading ensures that certain assets only load when it is visible or clicked on by the user. When we apply this to video, a thumbnail is shown until playback is initiated or required.

Lazysizes.js can be found in most Shopify themes, head here for a detailed guide on how to implement lazy loading to your videos and images.

When you combine these two methods, your pages are optimized for speed. Hosting frees up server space and less content needs to be rendered on the page with lazy loading.

You might also like: How to increase your Shopify conversion rates

2. Compress images

This method is the easiest one yet very effective. We all love high-resolution images, but a screenshot on your Mac could take up to 1 - 2 Mb of your customer bandwidth data. That's a lot.

Imagine if a single article has multiple photos and users visit your page with mobile data speed. Loading a page in that scenario not only takes up a massive amount of data but also might take your user forever to load fully.

The solution:

1. Use the compress image app to reduce the data size of images without losing image quality. There are plenty of them, but we recommend Tiny.png - simple, fast, and don't require any registration.

2. Make sure you use the right size for images. Assume your blog cover standard size is 900 x 600px. If you choose an 1800 x 1200 image, does it display better?

If your user uses 60 inches TV to view your blog, the answer is yes, but that is hardly the case. For most computer and phone screens, users never find any difference between those two images.

However, their browser does. This example shows that for the same image with the same ratio, the 2528 x 1104 image is much larger than its 1800 x 786 counterpart.

3. Limit App Use

Apps are great, they can strengthen your store with an array of capabilities and new ones seem to be released constantly. Hence, it’s easy to get carried away and install apps to equip your store with all the latest functions. However, they can have a great impact on your page speed.

Even when out of use, the Javascript/CSS files still run in the background, increasing loading times. It is therefore useful to go through your store and take a look at the apps you have installed, removing the ones that have not been useful.

If you are a long-time Shopify user, there may even be some you have completely forgotten about! Try to make a habit out of this by regularly sifting through your app arsenal and deleting any redundant apps.

You can also opt to use apps that serve multiple functions as a simple way to limit app use without limiting your store's capabilities.

One example of such an app is Boost’s Product Filter and Search. This app gives Shopify merchants the ability to have an advanced product filter based on limitless attributes, alongside smart search and instant search capabilities all in one neat package.

4. Use fast and responsive theme

There are a few factors that affect the loading speed of a theme:

The amount of code the theme contains. Less code means less response time from the server
The size of the file needs to download when loading a website (font, video,...)
The theme doesn't rely on jQuery JavaScript Library.
The theme has cleaner CSS, which makes them render faster.

Therefore, each theme will have slightly different performance for loading time. According to a test of wspeedfix.com, these are the faster premium Shopify theme:

Turbo
Flex
Shoptimized
Booster theme
Shella
Factor
Deputy

As for Free Shopify themes, we have checked all the demo themes with Page Speed Insight and GTMetric to find the faster one. The results are not too much difference between them: 95% in desktop performance, 70 - 75% in mobile performance for PSI score, B grade for GTMetric.

However, if you aim for the best, the top 5 fastest free Shopify themes are Brooklyn, Minimal, Supply, Boundless, and Venture.

Brooklyn theme is one of the fastest Shopify themes.

5. Use AMP

eCommerce accessed through mobile devices is soaring. Since 2015, the proportion of mobile commerce sales has more than doubled with 55% of all time spent on online retail coming from such devices. This stresses the importance of having a focus on mCommerce when considering page speed optimization.

Mobile devices, like tablets and smartphones, have a much smaller screen size and lower processing capabilities. Web pages designed only for desktop will not naturally perform well, particularly when it comes to loading times. A sure-fire way to overcome this obstacle is by making use of Accelerated Mobile Pages (AMP).

The AMP framework was created by Google to standardize web pages accessed via mobile devices so that they load instantly and elegantly. AMPs prioritize only the most performant design elements, restrict heavy JavaScript, and use cached content so that pages load at lightning speed.

The Guardian incorporated AMP from the very moment Google released this handy framework.

Once clicked on, visitors can browse through a number of news articles that load at speeds so fast that it feels like the pages exist natively. (Source: The Guardian)

Fortunately, Shopify has made adopting an AMP framework a breeze! Apps such as Fire AMP and Rocket AMP are available in the Shopify App Store and will transform your pages with just one click.

Learn more: The Future of Commerce: Top M-commerce trends to watch in 2021

6. Reduce HTTP request

Every time a visitor loads a web page in their browser, additional asset files are loaded, such as CSS files, JavaScripts, design images, etc. Whenever such a file is requested, it creates HTTP requests for the browser to process.

The more HTTP requests needed, the longer time it takes for your page to load.

From the definition, the only way to reduce HTTP requests is to reduce the file you need to load, which are:

Combine & inline CSS scripts (minification)
Inline smaller JavaScripts
Combine all JavaScripts
Minimize the use of design & functional images
CSS image sprites
Convert images to Base64 code
Minimize the number of apps, plugins on site.
Limit the number of social buttons
Use content delivery network.

If you are comfortable with diving into the code of your Shopify Store you can use tools likeCSS Nano. When added to your build process, it compresses identifiers, purges unnecessary definitions and clears extra characters.UglifyJS is another popular minifier for the JavaScript of your theme, it reduces local variables’ names to single letters, and removes unreachable code.

If this sounds a little too intimidating, or beyond your understanding of coding, apps such asFile Optimizer andHyperSpeed contain processes for automatically minifying CSS and JavaScript files.

7. Reduce redirects and get rid of broken links

Redirects can be extremely useful in letting visitors view the most up-to-date iterations of your web pages. Should they try to access a web page that has been moved to a new location, need to view the site's mobile version or a country-specific version, redirects ensure that they are taken to the correct page instantaneously. However, each redirect adds latency to the overall page load time, hence, too many redirects lead to a higher page overhead.

This does not mean you should completely abandon redirects. They are great for the customer experience and optimizes SEO, you just need to implement them wisely.

Avoid unnecessary redirects: only use redirects where they are essential. For example, if your store has a responsive design (in that it will adapt itself to mobile devices) there is no need for you to have a redirect set up to view the mobile webpage.
Clean up your redirects: go through all your redirects and verify all the ones you have set up. Get rid of any old redirects, unless they have high referral traffic.

Moving on to broken links, not only do they negatively affect the customer experience, it can also slow your pages down as they waste resources, becoming a drain on bandwidth.

You can use Google Search Console to identify all your broken links. This free tool will crawl through errors to provide a list of all links that result in a 404 error. Once these are identified, head back to your Shopify account to manually delete the links.

The more redirect chains, the longer time it take to load.

You may interested: Best SEO Practices for Shopify Collection Page

8. Organize tracking code with Google Tag Manager

Using tracking code on your site is inevitable nowadays, from basic tracking tools like Google Analytics to advanced ones such as Hotjar.

When you use a tracking tool, you have to add some lines of JavaScript code. The more tracking tools you have, the more code you must add, resulting in more processing time.

Moreover, they will process one by one; this one finishes then the next.

With Google Tag Manager, this problem would be solved. Google Tag Manager not just help you manage all kind of tracking code in one place but also make them process stimulate, independent from each other. Thus, help your site load faster.If you are interested in improving page speed through Google Tag Manager, we recommend you read this in-depth guide about the topic.

9. Use system font

If you use a font that does not yet exist on your customer's computer, the font must be downloaded before your text can be displayed.

Many templates like Brooklyn support you with three systems font: Sans Serif, Serif, and Mono.

However, in actual cases, not many websites use system font. The impact of this on page speed is small. But if you want to optimize your site speed to the limit. Have a go at it.

10. Use GZip Compression

Gzip compression is a technique that allows the web server and browser to use the same compression format (gzip), which transfers much lighter files.

According to Google, gzip compression can reduce the size of the transferred response by up to 90%.

Shopify by default is using gzip compression; however, some of Shopify Apps don't. In this case you need to check with their developer for solutions.

But first, you can find which app is not using Gzip compression by check Google Page Speed Insight score. You will see this suggestion as below picture. Check the link and you can guest/ figure out which app is not enable for Gzip.

Suggestion for compression in Google Page Speed Insight. Source: speedboostr.com

11. Use Shopify apps that optimize page speed

There are countless apps in Shopify app markets that help you optimize page speed. We will review some top page seep optimize apps (free and paid) to save your time testing one by one:

1. SEO Optimizer Page Speed

$34.95/month - 14-day free trial

With the SEO Suite app, you can boost your store's performance on all devices by using Image Optimizer, Compress Image, Instant Page, Lazy Loading & Minification, Broken Link, 404, and Page Speed Performance score.

Furthermore, it is quite simple to enhance the performance of your Google Search Console and SEO Manager using a variety of tools such as SEO Analysis, SEO Checklist, Auto-detected 404 page, SEO Plugin, HTML sitemap, Rich Snippets, and so on. The app provides a one-stop shop for novice to experienced SEO users.

2. Page Speed Booster

Free to use

The app automatically determined which page the customer would go next and preloaded the page in the browsers. They can do this by tracking the movement of the user's mouse (click, hover). You don't need to do anything, just install, and the app features are added to your theme's code.

Similar app: Page Seed Optimizer

3. Hyperspeed: Extreme Page Speed

$39/month - 7 days free trial

This app helps you optimize and compress images. Also, it comes with many helpful features: LazyLoad, preloading, font caching, inline critical CSS, & JS/CSS minification. Moreover, Hyperspeed will optimize other apps to speed up your site to the limit.

One of the customer reviews has written: "My site improved from a rating of C to A on GTMetrix, and the load time went from 21.5s to 6s! Nothing but great things to say, highly recommend."

4. Swift ‑ Page Speed Optimizer

$19 /month - Free to install

The app uses AI technology to optimize everything related to page speed in your website. It has some similar features with Hyperspeed and comes up with Speed reports and automatic optimization daily.

5. Bulk Image Edit ‑ Image SEO

Free plan available

If you don't optimize your product images before and have thousands of them, this app is for you. It enables you to bulk edit and optimize all your images with an easy-to-use dashboard.

Final Thoughts

Digital consumers are growingly impatient, desiring access to online products and services in an instant. A delay of response to this demand on your Shopify store is sure to have your potential customers running to the next best thing. Fortunately, page speed is very much controllable. By taking some, or even better, all of these actions, you’ll find your visitors on your site for longer, ready to take the leap to a purchase.

We hope these Shopify page speed optimization tips will help you improve your business.

If you have any questions related to this article, please let us know through our media channel.

Subscribe to our email or follow us on Facebook, Twitter or Linkedin now for more valuable Shopify news, tutorials as well as eCommerce’s growth hacks to boost your business.

-----

Boost Commerce is a technology company that is helping more than 11,000 Online Stores Across 80+ Countries grow sales with Shopify Advanced Filter and Search app.

Try Free Now

Trusted by fast-growing brands

Start your 14-day free trial

Get started

Ellie Ho

•

Content Marketing Specialist

June 17, 2024

•

7 min read

11 Tips to optimize page speed for Shopify stores

Start your 14-day free trial

Related Posts

How Much Cost To Open A Shopify Store For SMBs. 4 Tips To Save Money On Your First Years

How We Optimize Boost App To Improve Site Speed of Shopify Stores

9 Elements Of High Converting Shopify Fashion Stores