August 22nd 2022

Speed is one of the key aspects that every Shopify website owner should take into consideration. A faster website will have a significant positive impact on SEO, contribute to a better user experience and conversion rate. The performance of your Shopify website also can affect your other digital marketing strategies. Whether you are utilising paid, email or social advertising, traffic coming from all these channels will be impacted by the speed of your site.

A study by the Aberdeen Group, found that just a second delay in the page load time equals with:

  •  11% fewer page views
  •  16% decrease in customer satisfaction
  •  7% loss in conversions

Whilst “out-of-the-box” the Liquid/Ruby Shopify base is pretty fast; over time and with design, plus apps, you can significantly slow your site down without even realising.

Here are some tools and tips to help you get things back under control and measure the speed/performance of your Shopify website.

Below you can find the top three tools that we frequently use at Erudite:

  1. Google Lighthouse report – This open-source tool, created by Google, Lighthouse collects and analyzes lab data, which is then combined with real-world data from the Chrome User Experience Report dataset. While using it, a score summarizing performance is generated along with recommendations.Lighthouse can be used against any web page or app. It has audits for speed performance, accessibility, progressive web apps, SEO, and best practices, but it`s primarily focused on Google’s Core Web Vitals. These are the key metrics Google uses to measure web pages’ speed and overall User Experience (UX). The three components of it are Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).To use the Lighthouse report you need to download Google Chrome, if you don`t have it already on your computer. Open Chrome DevTools and search for the Lighthouse plugin. After installing the plugin, you can analyse any website, just by clicking the Lighthouse icon in the chrome bar. If you don`t want to install this plugin, you can use the Google PageSpeed Insights tool instead, which integrated Lighthouse plugin, but measures only the performance metric.
  2. GTmetrix is a tool developed by GT.net, a company based in Canada, as a tool to help their hosting customers determine the performance of their sites. Along with the Lighthouse report, GTmetrix is probably one of the most popular tools to measure a Shopify website speed. GTmetrix’s basic version is free to use, which is the best way to get started.GTmetrix is easy to use compared to other developer tools, and even a beginner can pick it up quickly. The tool uses Google PageSpeed Insights and YSlow to generate scores and recommendations.
  3. Online store speed by Shopify – This is a tool provided for free to Shopify website owners. It uses Lighthouse to measure the speed of your website. If you want to view your speed score you need to go to Online Store > Themes and there you will find your Online Store speed score. To view your speed score and open the speed report from the Themes page, you need to have the Reports and Themes staff permissions.

3 major things that you can do to improuve your Shopify website speed

1. Use compressed images

tinyjpg

Images play an important role when it comes to speed. High-resolution images tend to be larger files and can significantly slow down page loading times.

Shopify supports the following image formats:

• JPEG or JPG
• Progressive JPEG
• PNG
• GIF
Compression is important for faster loading web pages. A good advice when optimizing images is to make sure your images are an acceptable size and to avoid adding too many images on a single page. Also, try not to compromise the image quality while resizing it.

A good and free tool that you can use for compressing new images is tinypng.com and tinyjpg.com.

You could also use Crush.pics to compress image files for already-posted images on a Shopify store without sacrificing quality.

2. Reduce the number of installed apps

There are many apps that you can use for ecommerce tracking and monitoring, or for measuring performance, for example. However, a lot of these applications add some Javascript/CSS files to your store that are always running in the background, which makes your website speed slower.

The first thing that you should do, is to have a look on all these apps and see if do you really need all of them? If not, then remove them.

3. Use a Hero image instead of sliders

When chosing a Shopify website theme, many entrepreneurs are inclined to choose themes that include sliders. Indeed, some these themes that include sliders seem to look more attractive, but these sliders also tend to reduce website speed because multiple high-quality images take time to load when the user clicks on the site link. In the same time sliders are distracting and can lead to confusion in the eyes of your website visitors. So much so that in a handful of tests across multiple different niches/industries has shown that sliders can reduce engagement in a page by more than 60%. In turn decreases conversion rates by 30%-50%.

Instead of using a slider, opt for a high-quality Hero layout image with a clear call to action.

Conclusion

Follow these easy steps to improuve the speed of your Shopify website. You can also have a look at our Speed audit checklist for a more comprehensive approach. And don`t hesitate to contact us in case you need a professional advice.