da die mobile Seitengrösse ja bald ein wichtiger Rankingfaktor ist, habe ich mir mal die Ladegeschwindigkeit unserer
Startseite mit gtmetrics angesehen (https://gtmetrix.com/).
Dabei habe ich gesehen, dass bei den Kategorie Teaser Widgets das Bild an die Bildschirmgröße angepasst wird. Das Bild ist als Background Image
geladen und scheint keine Thumbs zu verwenden. Daher werden auf dem Handy irre große Bilder geladen, was natürlich katastophal für
die Seitenladezeit auf dem Handy wird.
Kann man da irgendwas einstellen in den Widets, damit ein kleines Bild geladen wird?
Oder muss ich manuell für das Handy ein separates Widget mit kleinem Bild einbauen?
Ich habe in den Mediaeinstellungen für die EKW Elemente einen neuen Thumbnail 480x480 an Stelle 3 hinzugefügt
Dann habe ich das category teaser widget in meinem Theme überschrieben und folgendermassen geändert:
#teaser--{$Data.objectId} {
background-image: url('{$images[3].source}');
}
{if isset($images[3].retinaSource)}
@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#teaser--{$Data.objectId} {
background-image: url('{$images[3].retinaSource}');
}
}
{/if}
@media screen and (min-width: 30em) {
#teaser--{$Data.objectId} {
background-image: url('{$images[0].source}');
}
}
{if isset($images[0].retinaSource)}
@media screen and (min-width: 30em) and (-webkit-min-device-pixel-ratio: 2),
screen and (min-width: 30em) and (min-resolution: 192dpi) {
#teaser--{$Data.objectId} {
background-image: url('{$images[0].retinaSource}');
}
}
{/if}
Images[3] ist der neue Thumbnail mit 480x480.
Wie kann ich feststellen, ob der Kategorie Teaser nur die Hälfte des Bildschirms einnimmt?
Dann könnte ich noch kleinere Thumbnails nehmen und noch mehr Datenvolumen sparen.
Eigentlich kann das nicht so ganz stimmen, was Du schreibst. Nach Quellcode werden über die Breakpoints bis fast Desktop nur die 200x200 Thumbnails geladen.
Darum sind die BIlder für Katteaser bei Tablet und Smartphone auch grauenhaft verpixelt.
Hatte ich schon in einem Ticket im Otokber 2017 angeregt, das zu ändern. Mit Background-Image kann man leider keine src-set anlegen, mit denen der Browser dann die passende Größe laden kann. Geht nur mit media-queries auf die Fläche im Browser.
Ich glaube eher, dass Dein gtmetrics die Media-Queries im Inline-Style falsch auswertet und daher ein zu großes Bild meldet.
@sonic:
Ich kann Deine Beobachtungen nicht nachvollziehen. Laut Quellcode wird bis 48em das image[0]
aus der Medienverwaltung genommen und erst ab 48em images[1] verwendet.
Da bei mir in der Medienverwaltung an Stelle 0 ein Thumnail mit 800x800 steht, wurde diese Bildgrösse auch eifrig auf dem Handy
ausgespielt. Das haben mir alle Tools so angezeigt.
Deshalb habe ich jetzt eine neue Thumbnailauflösung von 480x480 an Position 3 gesetzt und
spiele diesen Thumbnail unter 30em Bildschirmbreite aus. Hast Du eine andere Thumbnailgrösse oder Reichenfolge in Deiner Mediathek?
Das funktioniert auch so und spart mächtig Bandbreite.
P.S.: Ich habe die Mediathek jetzt mit jpegoptim auf dem Server komprimiert und konnte die Grösse der Mediathe von 4 auf 3 Gb verringern. Die Bilderqualität sieht auch noch gut aus.
