Easy Steps to Boost Shopify Store Speed

Shopify is an amazing app that provides all the tools a merchant like you needs to start selling and growing your business. However, there are also a lot of things that you yourself can do to improve not only your website’s performance but also your customer’s experience, and that is optimizing your Shopify store.

Speed is a very important factor in any online store. This is because the faster it loads, the lower your bounce rate. A good website performance affects the overall customer experience. Plus, Google likes fast loading websites which is an important factor for SEO.

So, let’s get started.

Step 1: Identify the factors affecting your store’s speed

To get things started, you will need to first check the current page speed of your Shopify store pages to note how they perform before and after optimization. You can do this on an excel sheet so you can compare their performance.

 

First, identify all the pages that your customers may frequent so you can focus on the most important pages. This is usually your home page and all product pages.

There are a couple of tools that you can use but we recommend Google Page Speed Insights Tool as it generates a page speed score as well as recommendations to make your pages faster. 

 

Below, we tested Shopify store, Fashion Nova’s home page.

PageSpeed show’s the page performance here so you can take note of this on your excel file. When you scroll down, it provides some suggestions to improve speed.

There are factors that you can and cannot control. Those you cannot are:

• Your customer’s device, network, and location
• Shopify’s infrastructure (as your store is hosted on Shopify)
• Content delivery network
• Local browser cache
• Server-side page cache
• Assets inside the content_for_header liquid tag

But there are some aspects where you can make changes yourself. Let’s explore more of them.

Step 2: Optimize images in your Shopify store

Images take up a lot of your Shopify store since they are the main component of your site. You need to provide high-quality product photos so you don’t want to compromise on quality but you also need to lessen loading time. In the future, always compress images before uploading them to save you time.

A great way to have quality and speed is by lossless compression. You can use tools like JPEGmini or Kraken.io for image compression before uploading. For existing images, you can try Shopify apps, Crush.pics, or Image Optimizer to compress images with quality loss.

Also, take note of image dimension and quality when uploading. Shopify usually provides you with a recommended size for items such as your home page banner or product sizes. If you’re only asked to upload a banner that’s 1500 x 500 px there is no reason to go bigger than that.

Use only images you absolutely need as too many images on one page can also affect your performance.

Step 3: Manage the apps that are installed

There are a lot of apps that do help you and your store but if you aren’t using them at the moment, it’s best that you uninstall them. The majority of these apps will add JavaScript or CSS files to your store which run in the background and affect your site’s performance.

Just go through your store and check for any apps that aren’t in use and remove them. You might have left some that you were trying out before and haven’t deleted yet.

Step 4: Optimize your site for mobile

If you don’t know yet, a lot of online traffic comes from mobile devices so optimizing for mobile is a must. Even Google will soon prioritize the mobile version of a site to rank its content. You could check your Google analytics to see how much traffic on your site comes from mobile by going to Google Analytics then Audience > Mobile > Overview report.

To optimize your website, you will have to create an AMP version of your Shopify store. AMP or Accelerated Mobiles Pages is a project by Google to improve page loading speed on mobile devices. (Read more about AMP here: Google AMP) Shopify doesn’t offer AMP yet but there are apps that can do it for you such as FireAMP or RocketAmp.

Step 5: Choose a fast theme

Your Shopify theme greatly affects your store speed so always make sure to check for a fast and responsive them, check if it’s up to date, check the live preview, and run the preview page through the Google Page Speed Insight.

You can also try avoiding content sliders on your home page. Sliders are popular because they are able to contain 2-5 images but this actually slows down your page because of its size. There are many cons to using sliders such as not being mobile-friendly, increases bounce rates making it bad for SEO, and reducing visibility. You can opt to use a single hero layout for your themes.

Step 6: Load only visible images

When a visitor opens your website, all images on that page will load regardless if they see it or not which affects the overall speed. There is a technique called lazy loading which basically delays the initialization of an object until it is needed. In this case, these are images on a website.

Lazy loading works by displaying a low-quality version of your image as a placeholder while the visitor is scrolling through and not looking at that particular image, when they stop on that image, it gets replaced by a higher-quality version of the picture. On websites, you can see this when you scroll through products and images which change from faded to low in contrast to high-quality and clear.

(Read more about lazy loading here: How Lazy Loading can Optimize Your Shopify Theme Images)

Step 7: Reduce HTTP requests

First, check the number of requests your web page makes before fully loading your page. Use Gift Of Speed which checks the amount of image files, JavaScript files, CSS files, iframes, font files and favicon files your web page uses.

In general, the more HTTP requests your web page makes the worse it is for page speed. When your web pages make too many requests you should reduce it to a lower amount.

Check this guide on how to reduce the number of requests.

Step 8: Seek professional help

There are just a few things where a developer might be a better choice than doing it yourself if you have no CSS and Javascript experience. This is when you need to:

Minify HTML and JavaScript: As mentioned, all websites contain a lot of HTML, CSS and Javascripts which can affect loading time. These include files that appear on your website and make it function. This is where a developer comes so that they can minimize any HTML code and the Javascript or CSS in it that can save you bytes of data and speed up page loading.

Eliminate render-blocking JavaScript and CSS in above the fold content: JavaScripts and CSS codes can increase your page load time and sometimes block the rendering of your page. The visitor’s browser will load Javascripts first before loading the rest of the HTML on the page making the page take longer to load. On the visitor’s end, it will take time before they can view the whole website. Scripts like these are called render-blocking JavaScript and CSS.

These are just some of the most practical and easy ways to speed up your Shopify store. You will need to constantly check your website’s performance so don’t forget to note any improvements on your excel file so you can keep track of everything.

If you need professional help to improve your Shopify page, contact your Shopify experts at Webinopoly today.

Webinopoly specializes in e-commerce marketing and advanced eCommerce Analytics for eCommerce and Conversion Rate Optimization service. We house a team of Shopify experts in web design and development and can customize a design for you to match your vision and brand.