--- layout: ../../layouts/main.astro date: 2022-08-18 title: Optimizing performance of an old Shopify Theme (Part 1) 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 (Part 2)

## 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](/blog/optimizeing-shopify-theme-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: - 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 ``` #### 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 Not Optimized Page Speed Insights Report

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.

Lycklig Not Optimized Page Speed Insights Report

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.