Hi. I'm Representative and CTO Takasaki.
It is a day that has started to be released from the heat that gradually rises, but how are you all?

Well, many of our companies have trouble running online shops at Shopify but slowing down their sites.

Of course, the content of each site changes so I can't say that you have to read the code for the best suggestions but here we will write advice that is common to any website.

and in our company An Introduction to Shopify Theme Development I'm out.
It is a book packed with the know-how to create an original Shopify theme, so if you don't have one, please do not hesitate. here Please purchase from us.

Relation between Site Speedup and Sales

according to research from stanford university 0 seconds later, sales will decrease by 1 percent and sales will increase 10% if you speed up one second. You can see the importance of site speedup again from here.

Let's get into concrete measures.

Preconnect gets faster with a single line in your headtag

Files such as images and PDF files uploaded to Shopify are placed on a CDN distribution server that automatically delivers fast on the Shopify side, from which they will be delivered.

However, browsers typically spend extra time loading files from a domain outside of the site they are accessing, including CDNs.

and to solve that, we're going to make sure head Within the tag, you just need to add a line of preconnect tags that will pre-read to an external domain where your files are going to be loaded as follows:

<link rel="preconnect" href="https://some-external-domain.com">

If you’re building a site with Liquid, Shopify will automatically pre-read your CDN but if for any reason you have to read files from an external domain such as web fonts, site analysis tags or Web advertising tags, the code above.

https://some-external-domain.com

Replacing and inserting an external domain where the file is located leads to speedup.

Leverage prelaod tags to read important files in head tags

While the preconnected tag above foresees external domains, the prelaod tag foresees important files in your site such as JS and CSS.
specifically <head> If you write a prelaod tag as follows in the tag, JS and CSS read ahead will be executed to speed up.

{{ 'script.js' | asset_url | preload_tag: as: 'script' }}
{{ 'style.css' | asset_url | stylesheet_tag: preload: true }}

Third-party apps check if Shopify’s theme code is contaminated

There’s no problem with the theme itself, but I often see a third-party app code called Shopfiy that is disrupting fast page views.
It is best to use only trusted apps if you can consult with Shopify experts, but please be careful of the following.

Check if the code of an app that I tried and decided not to use has been left on a theme and slows down your site.

If you want to try out an app that modifies or adds a Shopify theme code, be sure to back up the theme beforehand and if you decide not to introduce it.
If possible, we recommend the introduction of a version control tool that stores all changes made to our site including GitHub.

2. If you have an app that allows you to design your own LPs, consider whether or not what you’re doing with those apps can be replaced by a genuine Shopify feature

An app that allows you to design LPs freely with no code is very convenient, but the generated code can slow down pages.
Once the LP format has been solidified to some extent, you can consult with a Shopify expert and consider replacing it with genuine features such as Shopify’s theme section or meta-object.

At our company, we also offer technical consulting for Shopify and build sites using faster next-generation e-commerce headless commerce. here Please feel free to contact us.
So, have a nice EC life!

Reference: Introduction to preconnect and preload resource hints