Amazing Speed from this Shopify Store - but HOW?

[PampasB]

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?

[Anonymous]

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. 

[PampasB]

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?

[jameskosh]

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]

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.

[JoesIdeas]

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.

[JohnCodes]

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.

[hashiromer]

@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. 

[iaerty73]

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?

[ejb503]

Hi Pampas:

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:

• Pre-rendering / SSR (building using frameworks such as gatsby or Next Js), they pre-build content meaning that information doesn't have to be processed AFTER visitors go to the site
• Building a headless front-end, this gives you complete control over the functionality (and speed), the tradeoff being that many app-store applications won't be compatible

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,

Edward

[hashiromer]

@ejb503 

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?

[ejb503]

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...

[John_Sherry]

Shopify does not support webp image files

[oreoorbitz]

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.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Forionsuperduperteststore.m...

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.