Shopify Speed Optimization | Themes and Apps

Everything besides Shopify's mandatory files is optional. I have inspected google.com, youtube.com and twitter.com and the 1 thing they all do is load resources only when they are necessary

The below 3 points are the core things that can be done on a website to speed it up and you can ask them from a developer

- 1. Load the bare minimum of code(HTML, CSS and JavaScript) for each page. Most themes put most of their JavaScript code in a .js file and the CSS in a .css file. These are being loaded on all main pages whether or not you use certain components on a particular page. There are also themes and apps that depend on external plugins whose amount of code is used a little. For example they use 10% of the plugin’s code but 90% is also imported.

- 2. Load the most important parts first, then the secondary ones.The first parts that are visible on the screen should load first, then secondary parts can load progressively after, in order not to slow down the loading of the first part.

- 3. Start loading secondary parts when they are visible or close to be visible in the viewport

- How to choose a theme or app that is optimised for speed?

- Usually themes and apps are being developed as fast as possible and to offer many features but haven’t been optimised for the above 3 points probably because of the cost and complexity

- 1. Choose a theme that was optimised for speed. Before buying a theme from Shopify you have the options to preview and try it. If in the preview the theme behaves fast you can try it on your store and then have a preview. In the preview process you can use Chrome developer tools's Network tab or Lighthouse to test the speed. More details in the points below

- 2. Choose apps optimised for speed. There are usually multiple apps that offer the same thing and you should choose the most performant one. Test your pages before and after the installation of an app

- Tools for testing a live site: Google PageSpeed Insights pagespeed.web.dev and gtmetrix.com

- Tools for testing a site that is not public: On Google Chrome, in the developer tools you have the tabs: Lighthouse and Network

- I’ve heard that there are tricks to get good scores on those tools but not in the real performance. So the ultimate test is to navigate your site like a regular user and see how it behaves. Additionally, on desktop you can open the browser’s developer tools(I prefer Chrome) and select an option to simulate a low internet connection. One more metric is to use the network tab on Google Chrome, refresh the page and look at the info from the bottom: amount of requests, data transferred, resources data, Finish time, DOMContentLoaded time, and Load time. Here is an intro about the Chrome Network tab: https://www.youtube.com/watch?v=e1gAyQuIFQo https://developer.chrome.com/docs/devtools/network/reference/

- If you want me to optimise your Shopify store you can contact me