Antlers performance issue with glide and many conditions

Hi there,

i have a image partial that is used to display different source sets for images. This looks like this:

{{ if image }}
{{ asset url="{ image | url }" }}
<picture>
    {{ if preset && preset === "1440x400" }}
            <source media="(min-width: 1024px)" srcset="{{ glide :src="image" width="1440" height="400" fit="crop_focal" format="webp" }}" type="image/webp">
            <source media="(max-width: 1024px)" srcset="{{ glide :src="image" width="1024" height="284" fit="crop_focal" format="webp"}}" type="image/webp">
            <source media="(max-width: 786px)" srcset="{{ glide :src="image" width="768" height="213" fit="crop_focal" format="webp"}}" type="image/webp">
            <source media="(max-width: 640px)" srcset="{{ glide :src="image" width="640" height="340" fit="crop_focal" format="webp"}}" type="image/webp">
            <source media="(min-width: 1024px)" srcset="{{ glide :src="image" width="1440" height="400" fit="crop_focal" }}" type="image/jpeg">
            <source media="(max-width: 1024px)" srcset="{{ glide :src="image" width="1024" height="284" fit="crop_focal" }}" type="image/jpeg">
            <source media="(max-width: 786px)" srcset="{{ glide :src="image" width="768" height="213" fit="crop_focal" }}" type="image/jpeg">
            <source media="(max-width: 640px)" srcset="{{ glide :src="image" width="640" height="340" fit="crop_focal" }}" type="image/jpeg">
            <img src="{{ glide :src="image" width="1440" height="400" fit="crop_focal" format="jpg" }}"
                 alt="{{  alt }}" title="{{ title }}"
                 class="{{ className }} w-full">
    {{ elseif preset && preset === "1440x500" }}
        <source media="(min-width: 1024px)" srcset="{{ glide :src="image" width="1440" height="500" fit="crop_focal" format="webp" }}" type="image/webp">
        <source media="(min-width: 1024px)" srcset="{{ glide :src="image" width="1440" height="500" fit="crop_focal" }}" type="image/jpeg">
        <source media="(max-width: 1024px)" srcset="{{ glide :src="image" width="1024" height="356" fit="crop_focal" format="webp" }}" type="image/webp">
        <source media="(max-width: 1024px)" srcset="{{ glide :src="image" width="1024" height="356" fit="crop_focal" }}" type="image/jpeg">
        <source media="(max-width: 786px)" srcset="{{ glide :src="image" width="768" height="267" fit="crop_focal" format="webp" }}" type="image/webp">
        <source media="(max-width: 786px)" srcset="{{ glide :src="image" width="768" height="267" fit="crop_focal" }}" type="image/jpeg">
        <source media="(max-width: 640px)" srcset="{{ glide :src="image" width="640" height="240" fit="crop_focal" format="webp" }}" type="image/webp">
        <source media="(max-width: 640px)" srcset="{{ glide :src="image" width="640" height="240" fit="crop_focal" }}" type="image/jpeg">
        <img src="{{ glide :src="image" width="1440" height="500" fit="crop_focal" format="jpg" }}"
             alt="{{  alt }}" title="{{ title }}"
             class="{{ className }}">
    {{ elseif preset && preset === "730x560" }}
        <source media="(min-width: 1024px)" srcset="{{ glide :src="image" width="730" height="560" fit="crop_focal" format="webp" }}" type="image/webp">
        <source media="(min-width: 1024px)" srcset="{{ glide :src="image" width="730" height="560" fit="crop_focal" }}" type="image/jpeg">
        <source media="(max-width: 1024px)" srcset="{{ glide :src="image" width="480" height="650" fit="crop_focal" format="webp" }}" type="image/webp">
        <source media="(max-width: 1024px)" srcset="{{ glide :src="image" width="480" height="650" fit="crop_focal" }}" type="image/jpeg">
        <source media="(max-width: 786px)" srcset="{{ glide :src="image" width="768" height="267" fit="crop_focal" format="webp" }}" type="image/webp">
        <source media="(max-width: 786px)" srcset="{{ glide :src="image" width="768" height="267" fit="crop_focal" }}" type="image/jpeg">
        <source media="(max-width: 640px)" srcset="{{ glide :src="image" width="640" height="640" fit="crop_focal" format="webp" }}" type="image/webp">
        <source media="(max-width: 640px)" srcset="{{ glide :src="image" width="640" height="640" fit="crop_focal" }}" type="image/jpeg">
        <img src="{{ glide :src="image" width="730" height="560" fit="crop_focal" format="jpg" }}"
             alt="{{  alt }}" title="{{ title }}"
             class="{{ className }}">

    ... approx. 10 more conditions...


    {{ else }}
        <img src="{{ glide :src="image" fit="crop_focal" format="{ format or 'pjpg'}" }}" alt="{{  alt }}" title="{{ title }}"
            class="{{ className }}">
    {{ /if }}
</picture>
{{ /asset }}
{{ /if }}

Problem: this takes for ever to load. If I delete the content of each else statement, it also takes for ever to load. Only if I reduce the number of else if statements the page loads faster.

I do not understand why more conditions mean longer loading time.

Any idea would be appreciated.

Thx,

Andreas

>>>>>>> Unanswered <<<<<<<
7 Replies
3 Followers