Amazing Speed from this Shopify Store - but HOW?

PampasB
Tourist
6 0 0

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?

0 Likes
Speedimize
Shopify Partner
213 35 93

Hi @PampasB 

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. 

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
0 Likes
PampasB
Tourist
6 0 0

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?

0 Likes

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:

  • In their HTML, they're using preconnect hints to establish connections with Shopify's servers as quickly as possible
  • They only load 1 stylesheet, which reduces the number of round trip requests, and its only 29 KB, making it load very fast
  • They've inlined web font definitions, so fonts load as early as possible
  • Despite the fast load, their LCP is still high. This is because they're using JS to load their carousel image.
  • The low TTI and TBT indicates they aren't loading very many third parties/apps, which usually always affects these metrics which are 40% of the Lighthouse score

 

Some takeaways:

  • Use preconnect hints to connect to Shopify's servers early
  • Combine your stylesheets into 1 file to reduce round trip network requests
  • Simplify your stylesheet as much as possible
  • Inline web fonts definitions in the head tag
  • Try to use as little third parties as possible, or defer their load until after the page has loaded
PampasB
Tourist
6 0 0

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.

0 Likes
JoesIdeas
Shopify Expert
1241 111 310

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.

 

Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfillment + more automations).
More apps: Theme Scientist (A/B testing), Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).
JohnCodes
Shopify Partner
82 6 42

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.

 

Developer at SpeedBoostr (Shopify optimization and dev agency).
Try out our Shopify Analyzer (free performance analysis tool).
Check out Order Automator (app that auto tags + fulfills orders, and more automation)
More Apps: Theme Scientist (A/B testing tool), Tip Jar (add a tip button to your store), File Optimizer (optimize CSS, JS, Liquid)
0 Likes
hashiromer
Explorer
44 3 10

@PampasB 

 

If you think that was amazing, check this website . It is extremely fast with instant page loads depsite being feature rich.

 

https://shopify.demo.vercel.store/

 

This is not a typical Shopify site though, its built upon modern tooling.