Slideshow_XH

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
olape
Posts: 1829
Joined: Fri Mar 13, 2015 8:47 am
Contact:

Re: Slideshow_XH

Post by olape » Thu Apr 29, 2021 7:30 am

frase wrote:
Tue Apr 27, 2021 1:07 pm
Haben denn die WebPs in jedem Fall eine erwähnenswerte Einsparung gebracht?
So, zweite Site umgestellt. Hier ist die Einsparung nicht mehr ganz so groß, aber immer noch nennenswert.
Irgendwo ist halt auch eine Grenze.
11 Bilder, jpg = 1,15 MB, webp = ca. 800KB
Bei diesen Bildern musste ich auch sehr individuelle Einstellungen für webp setzen.
Wärend ich bei der ersten Site alle mit Qualität 75 zufriedenstellend exportieren konnte, war es diesmal min 80 bis teilweise 95.
Allerdings habe ich eben auch noch wenig Erfahrung mit den Einstellungen. Vielleicht ist es auch noch von der verwendeten Software abhängig. Ich habe Gimp bzw. IrfanView genutzt.

frase
Posts: 4137
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Slideshow_XH

Post by frase » Thu Apr 29, 2021 7:36 am

olape wrote:
Thu Apr 29, 2021 7:30 am
So, zweite Site umgestellt. Hier ist die Einsparung nicht mehr ganz so groß, aber immer noch nennenswert.
Irgendwo ist halt auch eine Grenze.
11 Bilder, jpg = 1,15 MB, webp = ca. 800KB
Bei diesen Bildern musste ich auch sehr individuelle Einstellungen für webp setzen.
Wärend ich bei der ersten Site alle mit Qualität 75 zufriedenstellend exportieren konnte, war es diesmal min 80 bis teilweise 95.
Allerdings habe ich eben auch noch wenig Erfahrung mit den Einstellungen. Vielleicht ist es auch noch von der verwendeten Software abhängig. Ich habe Gimp bzw. IrfanView genutzt.
Na, das klingt doch alles in allem ziemlich gut.
Auf jeden Fall empfinde ich es als gewaltigen Fortschritt und die Arbeit hat sich gelohnt.

Was die Erstellung der WebPs betrifft, muss ich auch erst noch Erfahrungen sammeln. Ich habe zwei Plugins für Photoshop, die unterschiedliche Optionen bieten. Es ist nicht ganz so komfortabel, wie die PS-eigenen Plugins - geht aber.

cmb
Posts: 13768
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Slideshow_XH

Post by cmb » Fri Apr 30, 2021 11:12 am

olape wrote:
Sun Apr 25, 2021 4:24 pm
Das macht meinen Versuch, das vollständige Laden ans Ender der Page zu rücken, erst mal wieder „kaputt“.
Das wird jetzt eben auch etwas komplizierter.
Aber das halte ich als Schritt zwei immer noch für sinnvoll.
Nur jetzt vielleicht nicht mehr ganz so wichtig.
Ich bleib dran.
Hast du mal <img load="lazy"> probiert? Der Browsersupport scheint gar nicht mal so schlecht, und es sollte einfach umzusetzen sein.

PS: vielleicht auch interessant: https://www.smashingmagazine.com/2021/0 ... eb-vitals/
Christoph M. Becker – Plugins for CMSimple_XH

olape
Posts: 1829
Joined: Fri Mar 13, 2015 8:47 am
Contact:

Re: Slideshow_XH

Post by olape » Fri Apr 30, 2021 1:03 pm

cmb wrote:
Fri Apr 30, 2021 11:12 am
Hast du mal <img load="lazy"> probiert? Der Browsersupport scheint gar nicht mal so schlecht, und es sollte einfach umzusetzen sein.
Ganz allgemein mag ich das eigentlich nicht. Wenn man durch eine Website scrollt und dauernd Layoutverschiebungen sind, weil Bilder nachgeladen werden.
Aber wahrscheinlich wirklich am einfachsten umzusetzen.
Für meine Anwendungsfälle nutzt mir das aber nichts, ich habe die Slideshow jeweils im Kopf, also sofort im sichtbaren Bereich.

cmb
Posts: 13768
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Slideshow_XH

Post by cmb » Fri Apr 30, 2021 10:51 pm

olape wrote:
Fri Apr 30, 2021 1:03 pm
Für meine Anwendungsfälle nutzt mir das aber nichts, ich habe die Slideshow jeweils im Kopf, also sofort im sichtbaren Bereich.
Probier's aber bitte mal aus. Mir scheint, das ist sowohl mit aktuellem Chrome als auch Firefox eine Verbesserung, selbst wenn sich die Slideshow "above the fold" befindet.
Christoph M. Becker – Plugins for CMSimple_XH

olape
Posts: 1829
Joined: Fri Mar 13, 2015 8:47 am
Contact:

Re: Slideshow_XH

Post by olape » Sat May 01, 2021 3:04 pm

OK, offenbar wirkt lazy, was man an der Anzahl der Bilder erkennen kann.
Aber bei mehrfachen Versuchen ist die Performance mit lazy immer schlechter, als ohne :?: :?: :?:
Ein svg im Kopf, ein jpg im Inhalt, 11 webp/jpg in der Slideshow.
Das heisst, auch mit lazy werden min. 2 Bilder aus der Slideshow gleich geladen.

Code: Select all

ohne lazy, mobil: 96, desktop 100

Gesamt 25 1.356,9 KiB
Bild 13 970,1 KiB
Schriftart 5 314,1 KiB
Skript 3 42,4 KiB
Stylesheet 3 23,8 KiB
Dokument 1 6,6 KiB
Medien 0 0,0 KiB
Sonstige 0 0,0 KiB
Drittanbieter 0 0,0 KiB

Code: Select all

mit lazy, mobil: 79, desktop 98

Gesamt 16 595,6 KiB
Schriftart 5 314,1 KiB
Bild 4 208,8 KiB
Skript 3 42,4 KiB
Stylesheet 3 23,8 KiB
Dokument 1 6,6 KiB
Medien 0 0,0 KiB
Sonstige 0 0,0 KiB
Drittanbieter 0 0,0 KiB

olape
Posts: 1829
Joined: Fri Mar 13, 2015 8:47 am
Contact:

Re: Slideshow_XH

Post by olape » Sat May 01, 2021 3:18 pm

Ist es eigentlich gewollt, dass das erste Bild 2x geladen wird?
An erster und an letzter Stelle.

olape
Posts: 1829
Joined: Fri Mar 13, 2015 8:47 am
Contact:

Re: Slideshow_XH

Post by olape » Sat May 01, 2021 3:31 pm

Ich habe das jetzt testweise mal so geändert (Damit sieht die Bewertung besser aus):

Code: Select all

<!-- Slideshow_XH slideshow -->
<div class="slideshow" style="position: relative; width: 100%; overflow: hidden"
        data-effect="<?=$this->option('effect')?>" data-easing="<?=$this->option('easing')?>"
        data-delay="<?=$this->option('delay')?>" data-pause="<?=$this->option('pause')?>" data-duration="<?=$this->option('duration')?>">
<?php $slide_img_id = 0?>
<?php foreach ($this->imgs as $i => $img):?>
    <?php
    $lazy = 'eager';
    if ($slide_img_id > 0) {
        $lazy = 'lazy';
    }
    $slide_img_id++
    ?>
    <picture style="<?=$this->style($i)?>">
<?php   if ($img->hasWebp()):?>
        <source srcset="<?=$this->escape($img->getWebp())?>" type="image/webp">
<?php   endif?>
        <img src="<?=$this->escape($img->getFilename())?>" alt="<?=$this->escape($img->getName())?>" loading="<?=$lazy?>">
    </picture>
<?php endforeach?>
</div>
Und zumindest in Chrome, Edge und FF scheint das auch die gewünschte Wirkung zu haben.

cmb
Posts: 13768
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Slideshow_XH

Post by cmb » Sat May 01, 2021 4:46 pm

olape wrote:
Sat May 01, 2021 3:04 pm
OK, offenbar wirkt lazy, was man an der Anzahl der Bilder erkennen kann.
Aber bei mehrfachen Versuchen ist die Performance mit lazy immer schlechter, als ohne :?: :?: :?:

Code: Select all

ohne lazy, mobil: 96, desktop 100

Gesamt 25 1.356,9 KiB

Code: Select all

mit lazy, mobil: 79, desktop 98

Gesamt 16 595,6 KiB
Ich las neulich, dass die Erde eine Scheibe ist, weil sonst ja die Menschen auf der Südhalbkugel herunter fallen würden.

Will sagen: nicht alles was irgendwo geschrieben steht, selbst wenn es begründet wird, sollte man glauben, ohne es zu hinterfragen. In diesem Fall ist die Bewertung offensichtlich Unfug; wie kann es sein, dass mehr als doppelt so viel zu Ladendes ein besseres Ergebnis bringt?
olape wrote:
Sat May 01, 2021 3:18 pm
Ist es eigentlich gewollt, dass das erste Bild 2x geladen wird?
An erster und an letzter Stelle.
Geladen wird nur einmal. Aber richtig, das erste Bild wird per JS noch einmal ans Ende angefügt, damit die Slideshow nicht kollabiert.
olape wrote:
Sat May 01, 2021 3:31 pm
Ich habe das jetzt testweise mal so geändert (Damit sieht die Bewertung besser aus):
Das sollte eigentlich genau denselben Effekt (i.e. das selbe HTML wird erzeugt) wie mein Patch haben. Das erste Bild "eager", alle weiteren "lazy".
olape wrote:
Sat May 01, 2021 3:31 pm
Und zumindest in Chrome, Edge und FF scheint das auch die gewünschte Wirkung zu haben.
Ja. Der wichtige Punkt ist, das wohl i.d.R. DOMContentLoaded feuert bevor die Folgebilder überhaupt geladen werden (was gut ist), und dass anscheinend die Bilder tatsächlich nacheinander geladen werden (und bei schneller Verbindung sogar zeitverzögert). Das scheint mir besser, als die Variante, die ich ursprünglich im Sinn hatte, nämlich alle Folgebilder gleich nach DOMContentLoaded laden zu lassen. Und einfacher zu programmieren ist es auch. Sieht mir nach Win-Win-Situation aus. :)
Christoph M. Becker – Plugins for CMSimple_XH

cmb
Posts: 13768
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Slideshow_XH

Post by cmb » Sat May 01, 2021 5:01 pm

cmb wrote:
Sat May 01, 2021 4:46 pm
olape wrote:
Sat May 01, 2021 3:31 pm
Ich habe das jetzt testweise mal so geändert (Damit sieht die Bewertung besser aus):
Das sollte eigentlich genau denselben Effekt (i.e. das selbe HTML wird erzeugt) wie mein Patch haben. Das erste Bild "eager", alle weiteren "lazy".
Hm, ist das $img Array unter bestimmten Umständen vielleicht nicht fortlaufend indexiert (0, 1, 2, …). Das wäre natürlich ein Bug. Muss ich noch genauer prüfen.
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply