Hi, looking for how https://littindustries.com/ did it. It seems everything on their site is pre-loaded somehow? When clicking various links, the speed is ridiculously fast.
Shopify community, any ideas how this is done?
Aibek is here from Speedimize.io
As an optimization agency, to see such fast and beautiful store. It's a real pleasure for us.
Our brief analysis shows that this shop:
- Have a very good theme and all processes inside are optimized
- Very few apps, which is very important for the speed performance
If you wish, we can help you with Speed Optimization and obtain results like them.
Taking a look at their homepage, here's some things I see:
PageSpeed Insights reports a score of 44 on mobile.
FCP: 2s, LCP: 7.5s, TTI: 8.4s, TBT: 670ms, CLS: 0.013
Pretty decent metrics for a Shopify website.
Here's some reasons their site performs well:
I think the fading in/out makes the load feel slower to me actually. In most cases where we've removed this from sites, the load speed seems faster because you see content, rather white screen and visually noticing the page change.
The fading is also a problem for momentary network lapses, if you click around enough pages you'll probably be able to trigger it - you'll see a blank white screen for a few seconds while waiting for the page to load (this is random but happened to me on that site after around 5 link clicks). Without the fade effect, at least you can still see the page content while waiting for a load.
But ya I agree with @jameskosh point that preloading is great, it won't show up on analysis tools but it's excellent for the user experience. There are a few tactics you can use (preloading, prefetch, preconnect...). If you need a guide to implement that we (team of Shopify optimization professionals) have one here: https://speedboostr.com/preloading. Just duplicate your live theme then edit the backup theme so you can properly test before publishing live.
I disagree though with the recommendation to "Combine your stylesheets into 1 file to reduce round trip network requests". This used to be a good practice a few years ago+ but with modern browsers this can actually slow the load time (case study: https://speedboostr.com/concatenation-case-study/), plus combining stylesheets on a template platform like Shopify adds technical debt, making future editing take more time.
I agree that apps are a major contributor (especially for tools like Google PSI), my recommendation is to be cognizant of that but always remember your main goal - to make more sales. If an app contributes to a slower load but increases your conversion rate, it's probably worth using. One tip you can do for apps is to conditionally load the app code - only load the code on the page(s) where it's used. You can do this if the app code is in your theme, by using Shopify Liquid code to only load it for certain templates.
It looks like @JoesIdeas and I responded at the same time haha. I'm editing my post so that we aren't repeating the same info. I'd just refer to his post instead.