BoostAcademy

Better Speed, More Revenue – Shopify Speed Optimization

Page speed is one of the critical Technical SEO parameters. As we know from Google, there are lots of metrics that show how we improve page speed.

Google’s tools, Lighthouse and PageSpeed Insights, can help us to see which metrics, like FID, Speed Index, or etc., you need to optimize to improve your page speed performance. But when we talk about a website built by Shopify and if we don’t have an I.T. team, we need to optimize it ourselves.

However, especially for e-commerce, when it comes to search engine optimization, high page speed, and site performance are key factors.

Page speed is a critical factor when it comes to ranking your website higher on Google’s search engine results.

— Neil Patel

So in this article, you will able to see how you will increase your Shopify website’s page speed performance.


The BBC found they lost an additional 10% of users for every extra second their site took to load. — Google Developers Blog

Before start, you need to determine which metrics should be optimized. And here, you can use page speed tools to see how is your page speed performance and how many seconds it take to load all of your content.

Page Speed Analyze Tools

These commonly used two tools can help you a lot

#1 – Page Speed Insight

Probably, you will see a report like this. The first step to being a fast website has an optimized First Contentful Paint, which is one of an important metric.

Page Speed Insight Report
Page Speed Insight Report

 

Now you can understand something going wrong, and you should focus on red metrics.

However, just a little scroll down the opportunities part will inform you what you can do.

Page Speed Insight Report - Opportunities
Page Speed Insight Report – Opportunities

#2 – GTmetrix

This tool is also helpful in which metrics need optimization.

GTmetrix Report
GTmetrix - Speed Analysis
GTmetrix – Page Speed Analysis

Step-by-step Improve Your Shopify Page Speed

More Speed Less Bounce

Google Speed Research
Google Speed Research

#1 – Images Compression

Google Speed Analysis
Source: Google Speed Analysis

Image is always related to page speed because every single picture, especially more quality ones, has a huge image size. And highly sized images causes more data request to load it to your page.

Compress your images

Well-compressed images positively affect the boot speed. And reduces time-wasting while opening process.

P.S. Shopify can allow you to use a new image format WEBP.

#2 – Removing Shopify Apps (Like W.P. Plugins)

There are applications in Shopify as well as plugins on websites that are created based on WordPress. These applications help us with many issues and enable us to carry out our site activities more efficiently. But apps, like plugins, add a specific piece of code to your site. These codes they add significantly affect the speed of site loading, slow it down.

Elements that run dynamically on the site, such as popups, chat-bots and etc., are often coded in Javascript. Javascript is a technology with modern frameworks, but when we talk about the website, it affects a critical factor such as a site speed negatively.

Shopify Speed Optimization
Source: Shopify Speed Optimization

For this reason, we should carefully select the Shopify Apps that we will use for our sites and use it as little as possible.

#3 – Preloads

Thanks here to Ilias Haddad, because he mentioned this part in his article, clearly.

a) WebFonts

As you know, all websites use specific typography. Many theme creators use Google Fonts for site font style. This is similar to Shopify’s themes.

For users who have previously visited your site downloaded your web font once. If you use the preloading, users will not have to download the font again. And this will enable them to reach your site faster.

Here what you need to do;

&display=swap add this parameter end of your font link.

And it should be like https://fonts.googleapis.com/css?family=Lobster&display=swap

b) J.S. and CSS

It works in the same logic as image preloads. Add this code below the web font code.

  • JavaScript (J.S.)

<link rel="preload" href="{{'app.js' | asset_url }}" as="script" type="text/javascript" >

  • Cascading Style Sheets (CSS)

<link rel="preload" href="{{'theme.scss.css' | asset_url }}" as="style" type="text/css" >


The three steps above will provide high speed for your site. (If your website is not optimized for these topics)

Also, if you examine the articles here, you can see useful and working tips, tricks, and optimizations.

Shopify Speed Optimization — Step-by-Step Guide

Improve Your Ecommerce Site Performance & Speed to 2X Conversions

9 Tips for Boosting the Speed of your Shopify Website

By clicking here, you can see all our SEO blog posts. If you got any questions, feel free to say hey at me on Twitter.

Emre Kahraman

As a digital enthusiast, I would like to develop myself in a T-shape way, to become an expert in Growth, and to have quality knowledge and operational capability in SEO and Analytics.