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.
Okay, but do you see how clicking between pages has no load time? The screen doesn't "flash" if that makes sense.
Any ideas how this is done?
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:
Great response and attention to detail. One last question. Do you notice the fade out to white and fade into white when clicking on links? This seems to give the appearance of speed as 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.
Yes I agree with your post highlights but you can see my account details for further information because some weeks ago its was going well but now its speed is going slow day by day what will be the reason behind it?
So, maybe this is of interest to you, https://ed-burton.medium.com/a-journey-to-page-speed-100-6de3f6533450, we've achieved pagespeeds of 100 (instant load speeds even on 3G networks and poor mobiles).
The way we achieved this is:
So, the way to get absolute control is to decouple your front-end application from the Shopify backend. That way anything that is possible with modern web development is also possible for your store,
I think headless is necessary if we want to achieve the best performance and improve interactivity but the main reason this trend won't catch up is that most small scale shopify business rely upon apps in markeplace to add functionality to their storefront which is deeply integrated with liquid. It is almost impossible to to integrate those apps with headless storefront.
What do you think?
It is definately a problem that needs solving, relying on code from third parties (Liquid + App Store) will always result in quicker turnaround but you lose control of important factors such as speed. I think we will increasingly see a two tier system where the top stores go headless and take ownership of their stores and plug and play solutions are increasingly left with poorer experiences...
Headless is extremely expensive and labour intensive, thus probably only really viable at scale, many smaller stores can't afford the time / expense or overhead...
I do not think a headless setup is nessecary for fast performance or using a JS based template framework/library like React.
All of the points that @ejb503 shared in the article can be applied to a shopify theme hosted on shopify.
Most of the free themes in shopify are just using antiquated standards for performance, so are many of the premium themes.
If you look at Shopify's new online store 2.0 Theme, Dawn, you'll see how things like building css and js a module specific way, and not loading unused js and css will speed up a theme, also UX/UI desicions like not using a homepage slider.
If you look at the total css, they only load the css for the sections that are being used. Same with the JS, and they don't have big stuffy libraries like Jquery or lodash, and they eschew IE11 support that adds alot of uneeded weight to a theme.