bakura10
commented
5 years ago I am the developer of Maestrooo themes (like Prestige) and indeed, the expectations from merchants on themes lead us to have increasingly complex Liquid (however, contrary to your statement, I am personally taking performance as my main concern for all our themes, by making sure all the Liquid is as optimized as possible ; we also recently get rid of jQuery in all our themes).
I don't think this is particularly related to Liquid (but more to Shopify), but let me answer to some of your questions from what I have figured out. Once again, those are based on my personal findings and I agree that it would be awesome to have more technical details.
Caching
From what I can see, the cache is completely invalidated as soon as anything changes (eg. adding a new product to the cart, having a metafield changing...). I'm really not sure that Shopify has "smarter" caching where only parts of the page (some sections only for instance) are invalidated, while others are left untouched. But I may be wroong.
Metafields
I had to investigate this for a friend who used metafields extensively and I found some interesting things. He was using heavily variant metafields, on collection pages:
{% for product in collection.products %}
{% for variant in product.variants %}
{{ variant.metafields.foo.bar }}
{% endfor %}
{% endfor %}Each product having a large number of metafields, this constantly leaded to 2-3 seconds rendering. After a lot of tests, I figured out that if you group each metafields under the same namespace, this is way faster. Said otherwise:
{{ variant.metafields.foo.bar }}
{{ variant.metafields.foo.baz }}is much faster than:
{{ variant.metafields.foo.bar }}
{{ variant.metafields.bim.baz }}Once you've accessed a namespace, getting different values from same namespace is cheap, but getting a value from another is not.
Especially when the number of variants adds up. I'm pretty sure that internally when you get a value from a given namespace, Shopify does a kind of JOIN that get all the keys from the given namespace. So put it simply: put all your metafields in same namespace for best performance.
Lack of some features
Finally, other common issue is the lack of some variables that force us to do very complex Liquid, which involve a lot of looping that quickly adds up (especially on collection pages). For instance, what if you want to get all the variants associated with the option "Red"?
Ideally, we should be able to do that:
{% for option in product.options_with_values %}
{% if option.name == 'Color' %}
{% for option_value in option.values %}
{% if option_value == 'Red' %}
{% for variant in option_value.variants %}
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}This is often needed to build full-featured swatches on collection pages, but unfortunately there is no such thing as option_value.variants, so we have to do a lot of complex matching by iterating through every variants and do a lot of string comparaison.
There are other areas where new variables could be exposed to drastically increase performance.
shopmike
jonathanmoore
Based on my experiences as a partner, stores with high TTFB times (above 2 seconds) are becoming increasingly common and I think how Liquid is being used has to do a big part in it. Compared to years ago, themes are getting much more complex and more apps are being used.
Site speed became a factor in Google search results in July 2018 and is also used grade the quality score of an ad. This is an issue that directly impacts sales and non-technical stakeholders can see it is a problem.
I know this is very hard to solve in practice since these problems are due to things out of Shopify's control and that there is huge variance in network quality.
App and theme developers tend to not put a huge emphasis on performance and in the end, all these things add up. To their defense, there are absolutely no resources on how to deal with this or measure it.
Some ideas:
Add performance section to Shopify Help Center
I have a feeling this may be tough for you guys to have documentation on this since things are probably changing on a day to day basis but I think even the smallest amount of information would be a lot of help.
Add performance measurement to Liquid
If a client asks me to solve high TTFB times, I basically have to review their entire theme by measuring the impact of removing and adding different parts of their theme which can potentially be time consuming to the point where a rewrite of the theme is actually feasible. This is an extremely bad look for all sides.