Hello there.
I was working for a store to optimize their website speed and performance.
and I think I have found a issue in shopify’s preload.js file that is included in every store tag.
so when a theme is including the fonts selected from settings in the head
{{ settings.type_body_font | font_face: font_display: 'swap' }}
its fetching the fonts from ‘//example.com/cdn/fonts/’ CDN.
but at the same time, on preload.js,
<script async="async" src="/checkouts/internal/preloads.js?locale=en-US"></script>
trying to preload the fonts but from “https://fonts.shopifycdn.com”
ending up loading the same fonts twice from different source.
Hey!
The preloads.js file is responsible for preloading checkout assets, so it’s completely separate from your storefront. The logic also makes sure everything is done with very low priority to give way to more important requests.
We do preloading to ensure required files are already in the cache when users finally decide to buy something. Our data shows measurable improvement in checkout loading times thanks to that technique. Faster load = better conversion.
All that said, we are in the process of reviewing potential improvements to when the preloads.js file is triggered. It should make the whole thing smarter and waste less bandwidth for those that never reach checkout.
I hope this helps!
1 Like
Hello, yes, i know that its to make the checkout faster and everything. and it does loads the preload.js in storefront.
but I think the problem I mentioned is: in storefront its loading fonts from different path ‘//example.com/cdn/fonts/’ and for checkout the its preloading the same fonts again from “https://fonts.shopifycdn.com”
since both are different urls it will load the fonts twice. so I was hoping if Shopify devs could fix this problem by ensuring both
{{ settings.type_body_font | font_face: font_display: 'swap' }}
and on preload.js it requests the fonts from 1 cdn only.
if its pointed to the same urls, it won’t load twice.
Let me know if that makes sense.