Rafael González

Blog de Rafael González

Christian Husband, father of two and e-commerce developer. I'm allways builiding stuff personally and professionally 🚀

Optimizing an old Shopify Theme (Part 2)

Optimizing an old Shopify Theme

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

At Acromático Development we are always 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.

This is a continuation of the Optimizing an old Shopify Theme series, if you want to read about the initial analysis done to know what to look for in a theme, check out the part 1 of this series.

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:

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

- 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:

<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:

Lycklig JS DownloadLycklig JS Downloaded by Theme

There are 5 super slow scripts:

- 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 essential 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.

Lycklig Modernizr ErrorLycklig Modernizr Error

We found a Modernizr instance being referenced in diferent parts of the file. We just carefully deleted them and the error was gone. The problem was that all the icons of the theme changed to text 👎. This has become a larger prioblem so we will go back to not removing the modernizr file.

Images Optimization and Elements with Layout Shifts

By looking at the Web Vitals Webpage Test Report we can see diferent elements that produce layout shifts. The main one is the announcement bar. Lets add a fix height to the announcement bar to fix that issue.

As well the main logo appears from no where and moves the size of the header. We can add an aspect ratio property to the logo to fix that by adding aspect-ratio: 10/3; to the logo style tag.

Something we noted in the code was that all the images of the theme have lazy loading added, even the initially rendered ones. We removed all the lazuy loading added to the initial images. as well we added a srcset attribute and a sizes attribute to the images and even some images where still rendered with the CSS background-image property, we changed that to be an img tag.

This is the code to render the images of the slider before the changes:

<style>
  @media screen and (max-width: 1024px) and (max-height: 768px)  {
    .hero__image--{{ block.id }} {
      background-image: url('{{ block.settings.image | img_url: '1024x1024' | format: 'jpg' }}');
    }
  }
  @media screen and (min-width: 1025px), screen and (min-height: 769px) {
    .hero__image--{{ block.id }} {
      background-image: url('{{ block.settings.image | img_url: '2048x2048' | format: 'jpg' }}');
    }
  }
</style>

<div
  class="hero__image hero__image--{{ block.id }}"
  data-image="{{ block.settings.image | img_url: '1024x1024' | format: 'jpg' }}"
></div>

After we changed the code it looked like this:

<div class="hero__image hero__image--{{ block.id }}">
  <img
    srcset="{{ block.settings.image | img_url: '320x320' }} 320w,
                {{ block.settings.image | img_url: '480x480' }} 480w,
                {{ block.settings.image | img_url: '800x800' }} 800w,
                {{ block.settings.image | img_url: '1024x1024' }} 1024w,
                {{ block.settings.image | img_url: '2048x2048' }} 2048w"
    sizes="(max-width: 320px) 320px,
              (max-width: 480px) 480px,
              (max-width: 800px) 800px,
              (max-width: 1024px) 1024px,
              2048px"
    src="{{ block.settings.image | img_url: '2048x2048' }}"
    loading="lazy"
    width="2048"
    height="2048"
    alt="{{ block.settings.image.alt | escape }}"
    class=""
  />
</div>

The Final Results

Over all we think the theme was all ready well optimized, changes where minor and the most relevant change had to do with the slider images. There are other areas of improvement like removing modernizr and jquery from the base libraries the theme uses but that is considered a huge change in which case it would be better to consider migrating to a newer theme.

The final reports made in Web Page Test ands Google Page Speed Insights are available here:

Hope this entry helps you optimizing your Shopify Themes, this same concept can be applied to any web page with the difference of the usage of liquid and maybe having more control over the scripts that are being loaded in the page.