Page speed improvement for Shopify — a practical guide

Where should we look first?

I build apps for Shopify like Rapid Reviews and Image Sitemap. I am the creator of Page Doctor, the practical page speed and SEO tool. Follow me on twitter.

If you are reading this, one of the following things likely happened:

1. You tested your page against a page speed tool like Page Doctor or Google PageSpeed Insights and you see many recommendations and room for improvement — but maybe you have trouble understanding all of the small details.
2. Your developer said something like “actually our site is really slow, and it will take some dedicated work to fix.”
3. Your marketer said “omg, our site is so slow compared to XYZ Brand…”
4. One of your vendors said “Let’s work on some page speed improvements...”

Why is page speed so important?

Better page speed improves every single part of our business.

1. Increases customer satisfaction.
2. Increases customer engagement.
3. Reduces ad costs via lower bounce rate, more pages per session, and naturally higher conversion rate due to faster page loads and faster transaction times.
4. Increases customer support efficiency.
5. Improves SEO ranking.

What should our plan of improvement be?

Page speed improvement for any platform or web framework can be very overwhelming — Shopify is no different. The good news is that the vast majority of page speed issues are caused by foundational code issues or simple oversight. Many other issues come from ‘ease of use’ plugins, apps, and features.

Where should we start? Keep reading below.

Remove Unused Apps

Shopify’s app ecosystem is great. Installing apps is probably too easy—and many app developers unfortunately prioritize ease of use over page speed performance.

A Shopify store is only as fast as its slowest installed app.

Many Shopify store owners are unaware that most apps will inject data into their store in the background of the page. This is essential for an app to run properly. However, if we are not using an app and it is injecting code into our site, this becomes a huge area of oversight.

How do we know if this is happening? An easy way to find out what is loading on our page is to test with Page Doctor and look at the Requests tab — which will show the number of requests by origin domain.

Evaluate App Performance Before Installing

Not every app in the Shopify app store is built with page speed in mind. I see many examples of bloated and slow apps with far too many page requests and big data payloads.

My apps like Rapid Reviews and Search X are designed with performance as the highest priority; giving you equal or better features and excellent UI/UX, with uncompromising page speed profiles.

If you are not sure about the performance of an app you are looking to install, talk to your developer to help you evaluate your next app before you install it, not after.

Fix Javascript Console Errors

Every desktop browser has developer tools that can show what is called the Javascript Console.

This tool will show you any javascript errors, warnings, and messages. Fix your errors!

Javascript errors can cause all kinds of functional, page speed, and SEO issues in the background of your pages.

Work with your developer to identify and fix any issues. Sometimes errors are caused by Shopify apps or third-party plugins. In those cases, reach out to the app or plugin and demand that the errors are fixed.

Test your page with Page Doctor to review your console errors, warnings, and messages.

Nike.com console errors and messages on Jan 9, 2023

Reduce Font Includes

Font files loaded to our pages are very resource intensive and can negatively affect page load performance. The ideal number of custom fonts is zero; however that is not always possible due to brand guideline.

Try to limit the number of fonts loaded, and remove any unused font styles or weights.

Test your page with Page Doctor to see which font files and external libraries are being used.

Optimize Your Images

Images can be a huge center of page speed loading penalties.

1. Compress your images before you upload them to Shopify. This can result in massive improvements in data transfer size. WebP or JPG will always provide better compression than PNG or GIF. Refer to my Web Fundamentals class to learn more about this.
2. Lazy load your images using the newer loading="lazy" property (and remove the lazysizes library if you are still using it). Lazy loading will defer loading of images below the fold until they are scrolled into view. This is a huge benefit.
3. Use srcset= on your <img> tags to allow browsers to load the best image sizes according to device width. Read this great post about srcset for more information.
4. Always include an src= property on your <img> tags. I have seen many cases where themes or developers stop using the src= property in favor of just the srcset= property instead. Both are required. Through my app Image Sitemap I have seen that images without thesrc= property are not indexed by Google Search as well.
5. Stop using background images below the fold. Background images cannot be lazy loaded, nor can they use srcset for responsive sizing. You may want to consider using object-fit and object-size instead of traditional css background images. Small background images incur very little loading penalty. Large background images will negatively impact page rendering performance, and also your Google PageSpeed Insights score.
6. Make sure to resize your images using Shopify’s image filters.

Test your page with Page Doctor to find the most common image issues with your pages.

Update Blocking Script Tags

Script tags in the browser are used to request javascript bundles that then provide core javascript features (like jQuery) or other widgets, plugins and features. These tags look like:

<script src="https://example.com/script.js"></script>

Blocking script tags required that the browser stop all rendering and processing while loading the contents referenced by these tags.

Blocking script tags will hurt page speed and rendering performance. It is ideal that all script tags have the properties async or defer.

In our above script tag example, the desired structure would be to include the async or defer attributes.

<script src="https://example.com/script.js" async></script>

async loads faster and should be used for essential javascript or features.

defer loads slower and should be used for marketing pixels and non-essential background javascript and features.

Test your page with Page Doctor to find any blocking script tags.

*Be careful changing script tags from blocking to async or defer as the rendering of your page may be dependent on a script tag loading first. This can cause javascript errors and potentially break your page. Talk to your developer first before getting too excited.

Update Blocking CSS Tags

Many themes use tags like <link rel=”stylesheet” href="/css/styles.css"> to load css. This is the slowest way.

CSS must always be parsed and loaded into browser memory before our web page loads.

Each network request for a file is a big risk for natural network latency and connection issues. The more css file requests we make, the slower our page load. It does not matter if we minify our css — successfully opening a request transaction on the network is the part that costs the most, not necessarily its payload. Minification is a great practice, but do not underestimate the cost of an external request associated with loading a link rel.

Blocking CSS will hurt page speed and rendering performance. It is ideal that all CSS be included in the initial page bundle, so it is not subject to an additional page request. This will massively speed up its loading and evaluation by the browser.

This is not always easy to achieve, but it is something to consider.

Test your page with Page Doctor to find any blocking css <link> tags.

Remove Third-Party Javascript Libraries

Third party javascript libraries can hurt page speed in general. They are usually loaded via a script tag. As we reviewed previously, when those tags are ‘blocking,’ we will incur a specific page speed penalty.

Anything that our web page depends on for rendering and features is considered a rendering dependency.

The world’s most popular third-party javascript library is jQuery. With modern HTML 5 and CSS 3 transitions, jQuery should no longer be considered necessary.

Another popular library that should be considered decremented and ancient is lazysizes. I recommend that you remove this library in favor of the newer loading="lazy" property.

We should apply these considerations to all other third-party libraries, widgets, or features that we are loading into our pages. Rip them out if we can!

Consider Changing Your Theme

Like Shopify apps, some themes can be page speed killers. If your theme is older, it may not be set up to take advantage of newer browser capabailities that remove the need for external javascript libraries like jQuery.

Unfortunately I am unable to recommend specific themes (mostly because I have not had enough time to review many in detail). There seem to be some nice resources and writeups that can help you find something speedy.

Work With Your Developer!

Every year that passes, I realize how little I know. I write code almost every single day of a calendar year, and each time I dive into a specific area of code or analysis, I am continually humbled by how deep, complex, and expansive even the most mundane aspect of the web and software can be.

I start every optimization thinking that I am the master of some conceptual domain; yet I end each optimization humbled, and sometimes a little embarrassed at my own limitations and ignorance.

While all of the recommendations in this post may be actionable by a less technical store owner, the single thing that I recommend above all is to work with your developer or development partner before you start making page speed improvements.

Page speed improvement requires dedication, practical prioritization, and time.

Because Shopify makes things so easy, store owners are tricked into thinking everything should be fixable with a single click, an app, or a theme widget. This is just not the case.

To operate at the highest level on Shopify—to achieve the best possible page speed—we should set aside considerable budget to achieve our goals. It takes many hours to improve page speed. Do not be fooled and think that there is a 1-click fix.

If we can generate $2,000,000 in revenue from our Shopify store, while paying only $89/month to do so, we need to start defining our performance improvement budget as a percentage of our revenue, not as a percentage of what Shopify costs each month.

I build apps for Shopify like Rapid Reviews and Image Sitemap. I built Page Doctor, the practical page speed and SEO tool. Follow me on twitter.