rafa-links/src/pages/blog/optimizeing-shopify-theme.mdx

---
layout: ../../layouts/main.astro
date: 2022-08-18
title: Optimizing performance of an old Shopify Theme
description:
  Some tips and recommendations for optimizing and boosting performance of an
  old Shopify theme.
exerpt:
  Some tips and recommendations for optimizing and boosting performance of an
  old Shopify theme.
image: https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=350&ar=16:9&fit=crop
---

# Optimizing an old Shopify Theme

<img
  alt="Optimizing an old Shopify Theme"
  class="cover"
  src="https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=300&ar=5:2&fit=crop"
  srcset="https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=300&ar=5:2&fit=crop 300w,
          https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=500&ar=5:2&fit=crop 500w,
          https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=800&ar=5:2&fit=crop 800w,
          https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=1024&ar=5:2&fit=crop 1024w"
  sizes="(max-width: 310px) 300px,
         (max-width: 510px) 500px,
         (max-width: 810px) 800px,
         1024px"
/>

## Some tips and recommendations for optimizing and boosting performance of an old Shopify theme.

At <a href="https://acromatico.dev" target="_blank">Acromático Development</a>
we are allways helping our clients optimize their Shopify stores, not only the
UX and UI, but also the performance and speed of the site. Optimizing a Shopify
theme is not a simple task, it has been a long learning path that continues
evolving and improving as we test and try new methodologies.

In this first blog post I want to share some of the things I've learned during
this process, that way maybe I can help other jump through some of the hard
parts of successfully optimizing a Shopify theme.

### Initial Analysis

Let's start by (in a really broad sense) diferenciating the optimizations that
can be done on a Site. We started by separating them in two main areas:

1. **Optimizing the Server:** Changes that have to do with where you are hosting
   the page, things like having a fast and reliable CDN, having all the correct
   catching policies, how fast the server responds, how near to the end user the
   server is located, etc. This part is nearly imposible to optimize for a
   Shopify theme since all this part is controlled by Shopify itself.
2. **Optimizing the Code:** Changes that have to be done on the code of the
   theme, here's where most of our efforts will be focused. Things like
   preconnecting to 3rd party servers, preloading assets, removing unused code,
   optimizing images and orchestating CSS and JavaScript loading times are the
   things we are going to focus on this section.

### Optimizing the Code

I know there are many ways to aproach the optimization the differents parts of
the code, but this is the process I follow, hope that it makes sense for the
mayority of the cases. For this example I will use one of our client's themes
(we have previus authorisation to use this theme as an example), the store is
calles <a href="https://lycklig.com.mx" target="_blank">Lycklig Party Shop</a>
and they sell party supplies. They have been in Shopify since 2016 and the theme
has been the same sinse the start of the store.

#### Running the first control tests

I use two tools to measure the progress that was achieved with the optimization.
Google Page Speed Insights and Web Page Test. Both tools are great, Google Page
Speed Insights is required since one of the main goals of optimizing a Shopify
store is to rank better in Google searches. Web Page Test is a professional tool
for those looking to optimize in depth their site.

Webpage Test Report:
[Report](https://www.webpagetest.org/result/220819_BiDc6R_B5K/).

PageSpeed Insights Report:

<div class="image__container">
  <img
    alt="Lycklig Not Optimized Page Speed Insights Report"
    style="aspect-ratio: 968/895;"
    src="https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_300/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png"
    srcset="https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_300/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 300w,
            https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_500/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 500w,
            https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_760/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 760w,
            https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_968/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 968w"
    sizes="(max-width: 310px) 300px,
          (max-width: 510px) 500px,
          (max-width: 768px) 760px,
          (max-width: 1024px) 500px,
          968px"
  />
  <small>Lycklig Not Optimized Page Speed Insights Report</small>
</div>

#### Preconnecting to 3rd party servers and preloading known assets

One of the easiest and most effective things to do when optimizing a Shopify
theme is to make sure that the site has the basic servers preconnected and ready
to be used by the files and assests that will be downloaded.

Using the experiments tab on the WebPage test app we found out the next servers
could be preconnected:

- fonts.gstatic.com
- cdn.shopify.com
- fonts.shopifycdn.com

As well we found out there were 2 filles that could be preloaded:

```text
- https://a.klaviyo.com/media/js/onsite/onsite.js
- https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js (Yes, this site still uses JQuery)
- https://fonts.googleapis.com/css?family=Lora:700
- https://fonts.googleapis.com/css?family=Open+Sans:400
```

We added the next lines to the head of the theme:

```html
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://cdn.shopify.com" />
<link rel="preconnect" href="https://fonts.shopifycdn.com" />
<link
  rel="preload"
  href="https://a.klaviyo.com/media/js/onsite/onsite.js"
  as="script"
/>
<link
  rel="preload"
  href="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"
  as="script"
/>
<link
  rel="preload"
  href="https://fonts.googleapis.com/css?family=Lora:700"
  as="style"
/>
<link
  rel="preload"
  href="https://fonts.googleapis.com/css?family=Open+Sans:400"
  as="style"
/>
```

#### Removing unused and slow scripts

This next step is super easy and can help a lot when optimizing a Shopify theme.
Normally a merchant will install apps or manually add code for certain
functionality they needed. If it is an old theme it is super easy to forget you
installed apps or added code that you are not longer using. In the best scenario
it will be code that gets downloaded and slows down the site, in the worst
scenario, it will generate errors.

By going to the console and the network tab we filter the JS Files and order
them by total time to load we can see the next result:

<div class="image__container">
  <img
    alt="Lycklig Not Optimized Page Speed Insights Report"
    style="aspect-ratio: 968/895;"
    src="https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_300/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png"
    srcset="https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_300/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 300w,
            https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_500/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 500w,
            https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_760/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 760w,
            https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_968/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 968w"
    sizes="(max-width: 310px) 300px,
          (max-width: 510px) 500px,
          (max-width: 768px) 760px,
          (max-width: 1024px) 500px,
          968px"
  />
  <small>Lycklig Not Optimized Page Speed Insights Report</small>
</div>

There are 5 super slow scripts:

```text
- https://cdn.shopify.com/shopifycloud/shopify/assets/shop_events_listener-65cd0ba3fcd81a1df33f2510ec5bcf8c0e0958653b50e3965ec972dd638ee13f.js
- https://cdn.shopify.com/s/files/1/1866/3075/t/8/assets/modernizr.min.js?v=21391054748206432451628529599
- ttps://cdn.shopify.com/shopifycloud/boomerang/shopify-boomerang-1.0.0.min.js
- https://cdn.shopify.com/s/files/1/1866/3075/t/8/assets/theme.js?v=95155629628367876391628529613
- https://cdn.shopify.com/s/trekkie.storefront.ebdc6f6e0c97d8f5d6a7dac9bc6ab298fff7cf1b.min.js
```

All of themm are basic scripts with the exception of modernizr. Lets go ahead
and remove modernizr file from the `theam.liquid` file and check that there are
no errors.

We got an error in the `theme.js` file. Lets see if we can fix it by removing
any reference to modernizr.

<div class="image__container">
  <img
    alt="Lycklig Not Optimized Page Speed Insights Report"
    style="aspect-ratio: 968/895;"
    src="https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_300/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png"
    srcset="https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_300/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 300w,
            https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_500/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 500w,
            https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_760/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 760w,
            https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_968/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 968w"
    sizes="(max-width: 310px) 300px,
          (max-width: 510px) 500px,
          (max-width: 768px) 760px,
          (max-width: 1024px) 500px,
          968px"
  />
  <small>Lycklig Not Optimized Page Speed Insights Report</small>
</div>

We found a `Modernizr` instance being referenced in diferent parts of the file.
We just carefully deleted them and the error was gone. If this had become a
larger prioblem we woud have gonne back to not removing the modernizr file.