Warum wird beim Bestsellerslider nicht img class=unveil genutzt?

[Timm]

Warum wird in der box_best_sellers.html nicht

Code: XML  [Auswählen]

<span class="cb_image">{if $box_data.PRODUCTS_IMAGE}<img class="unveil" data-src="{$box_data.PRODUCTS_IMAGE}" alt="{$box_data.PRODUCTS_NAME|onlytext}" title="{$box_data.PRODUCTS_NAME|onlytext}" />{/if}</span>

genutzt, wie es in der product_listing_include.html auch gemacht wird? Der Slider ist doch noch weiter unten und somit würde es nicht auffallen, wenn die Bilder erst später geladen werden, wie es bei den unteren Artikelbildern auch schon der Fall ist.

Das Ergebnis bei einem Bestsellerslider mit 18 Bildern ist schon ordentlich: Die einsparbare Zeit für "Defer offscreen Images" sinkt dadurch von 5,57s auf ca. 2s und der Performancewert steigt von 79 auf 86.

[ Für Gäste sind keine Dateianhänge sichtbar ]

[ Für Gäste sind keine Dateianhänge sichtbar ]

Gruß Timm

EDIT:
Vielleicht könnte @Markus vom Team was dazu sagen, auch wenn wohl eh geplant ist den jetzigen Slider zu ersetzen. Vor allem weil die Bilder darin viel zu groß sind und sinnlos runterskaliert werden müssen. Das Problem könnte sich aber auch verkleinern, wenn die mini icons kommen.

Linkback: https://www.modified-shop.org/forum/index.php?topic=39713.0

[Markus]

Hi Tim,

du kannst es ja mal testen ..

box_bestsellers_box.html

suche:

Code: XML  [Auswählen]

        <span class="cb_image">{if $box_data.PRODUCTS_IMAGE}<img src="{$box_data.PRODUCTS_IMAGE}" alt="{$box_data.PRODUCTS_NAME|onlytext}" title="{$box_data.PRODUCTS_NAME|onlytext}" />{/if}</span>
 

ersetze mit:

Code: XML  [Auswählen]

        <span class="cb_image">
          {if $box_data.PRODUCTS_IMAGE}
            <img class="unveil" src="{$tpl_path}css/images/loading.gif" data-src="{$box_data.PRODUCTS_IMAGE}" alt="{$box_data.PRODUCTS_NAME|onlytext}" title="{$box_data.PRODUCTS_NAME|onlytext}" />
            <noscript><img src="{$box_data.PRODUCTS_IMAGE}" alt="{$box_data.PRODUCTS_NAME|onlytext}" title="{$box_data.PRODUCTS_NAME|onlytext}" /></noscript>
          {/if}
        </span>

schöne Grüße

Markus

[Timm]

Hallo Markus

Funktioniert! Danke. Bilder im Slider sind nun nicht geladen solange nicht im sichtbaren Bereich sondern das Loading.gif ist an der Stelle. Hat starke positive Wirkung auf die Pagespeedwerte, vor allem bei vielen Bestseller-Sliderbildern.

Hab das bei mir aber noch etwas umgeändert, damit es mit den SEO-Bildernamen funktioniert. Ist aber sonst das gleiche, falls jemand gucken möchte.

Gruß Timm