Is there a performance downside to adding custom CSS/JS files to a Shopify theme?

Technical Q&A
1

Hey performance guru’s

Wanted to ask you about different approach of adding of custom css or js to shopify theme.

If we call css file as my-custom-styles.css.liquid (same with js) we have some simple version control between some past versions and also we could assign and use liquid variables inside it, like ’ .template-index { top-padding: {{ big-padding }} } . ’

Could you tell please if there any signifficant negatives regarding performance and other things besides that this liquid will be compiled to css in this approach?

2

This won’t have any affect on performance if the liquid file is cached, though it will cause TTFB to be slower when the cache is broken. This can happen at random, or when the liquid variables being referenced change.

For version control you’re better off using theme kit / Git.

If you want to see a performant way of using native CSS variables with some liquid assignment, you can check out how the new Dawn 2.0 theme does it.

2 Likes
3

Thank you for your answer.

So based on it, if we won’t use liquid variables inside that css/js liquid file, everything will be ok, it just won’t be considered as a good practice (will check into Dawn theme files)?

4

Also one more question. If we split our custom CSS into ‘product.css’, ‘collection.css’ etc, and will load them with e.g

{% if template contains 'product' %}

{% endif %}

will we win anything in terms of performance or there is some better solution?

5

Yeah, several other themes do this and Shopify is moving towards that with dawn too, which loads CSS and JS in the section, rather than all in one big file where some of it may never be used.

1 Like
6

Thank you for your answers :slightly_smiling_face:

1 Like