--- 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 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 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 Lycklig Party Shop 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:
Lycklig Not Optimized Page Speed Insights Report Lycklig Not Optimized Page Speed Insights Report
#### 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 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 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.