Re: Section modular

Solved

Does multiple file requests affect my website performance?

tim202
Shopify Partner
31 4 3

Hello, 

I have a question regarding performance,

when I saw the Dawn theme it has been requesting this files multiple times

will this perhaps decrease my website performance.

 

 

section/slideshow.liquid

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}

<section> 
....
</section>

 

index.liquid

{% section 'slideshow' %}
{% section 'slideshow' %}
{% section 'slideshow' %}
{% section 'slideshow' %}
{% section 'slideshow' %}

 

Thanks in advance,

 

Accepted Solution (1)
tim202
Shopify Partner
31 4 3

This is an accepted solution.

after some time I discovered how to settle this 

basically I will create another modular section that would request for the files that are used 

 

section/slideshow

<div class='slideshow'>
...
</div>

{%shema%}
{...}
{% endschema %]

 

section/assets

<script src='js'></script>
<link href='css'>

{%schema%}
{
...
"block":[
{"name":"slideshow assets"},
...
],
"presets":[
{ "type":"slidshow","name":"slideshow_assets"}
]
}
{%endschema %}

 

with this I can call multiple

slideshow

slideshow

slideshow

 

and just add the the js and css via section/slideshow_assets

 

 

 

View solution in original post

Replies 4 (4)

LitExtension
Shopify Partner
4860 1002 1151

Hi @tim202,

I checked and Dawn theme only uses json template, ie with index.json file instead of index.liquid file.

Therefore, if the section file is called many times manually, you can get the css link and call it directly at the theme.liquid file, it will perform better and not be repeated.

Refer:

Screenshot.png

paste here

Screenshot.png

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
tim202
Shopify Partner
31 4 3

Thank you for the reply
but the problem will be if, for example slideshow is not in use, this will then still then request for unused slideshow js and css.

 

timvma_0-1650244297873.png

 

Is there like a command like 

{% if this has section slideshow %}
... css and js
{% endif %}

 

I could probably use js to inject the files but is there a liquid equivalent I wonder.

LitExtension
Shopify Partner
4860 1002 1151

Hi @tim202,

With the same condition code, as you sent, Shopify doesn't support it, so this is not possible. You can add block to show this.

Please send me the code of slideshow.liquid file, I will check it.

 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
tim202
Shopify Partner
31 4 3

This is an accepted solution.

after some time I discovered how to settle this 

basically I will create another modular section that would request for the files that are used 

 

section/slideshow

<div class='slideshow'>
...
</div>

{%shema%}
{...}
{% endschema %]

 

section/assets

<script src='js'></script>
<link href='css'>

{%schema%}
{
...
"block":[
{"name":"slideshow assets"},
...
],
"presets":[
{ "type":"slidshow","name":"slideshow_assets"}
]
}
{%endschema %}

 

with this I can call multiple

slideshow

slideshow

slideshow

 

and just add the the js and css via section/slideshow_assets