Doppelt gemoppelt hält nicht besser: Galerie-Fix für Matthias Ziemer
Matthias Ziemer ist Event- und Convention-Fotograf und veröffentlicht regelmäßig umfangreiche Foto-Galerien von Veranstaltungen wie der European Juggling Convention – oft mit 60 und mehr Bildern pro Beitrag. Seine zweisprachige Website lief dabei technisch auf dem letzten Loch: Jede Galerie existierte gleich vierfach im Hintergrund, die Bilder waren unnötig groß, und seine Kunden beschwerten sich, dass die Seite auf dem Handy kaum nutzbar war. Die Lösung: eine schlanke Galerie-Lösung, die einmal gepflegt wird und auf allen Geräten und in beiden Sprachen automatisch passt – der PageSpeed-Wert kletterte dadurch von 59 auf 88.
- Ladezeit der Bildergalerien am Mobilgerät deutlich zu lang (negative Rückmeldung von Kunden)
- Erstellung und Änderung von Galerien langwierig (jeweils für große und kleine Bildschirme und beide Sprachen)
-
01
Die Ausgangssituation
Die Website ist über Polylang zweisprachig aufgebaut, und für die Galerien in den Beiträgen kam das Beaver Builder Powerpack zum Einsatz. Das Problem: In jedem Beitrag steckte die Galerie gleich zweimal – einmal für große Bildschirme, einmal für kleine – und das Ganze dann noch einmal pro Sprache. Vier identische Galerien pro Beitrag, die bei jeder Änderung einzeln gepflegt werden mussten. Dazu kamen die Bilder selbst: nur als 1.920px breite JPGs plus die WordPress-Standardgrößen, ohne weitere Optimierung. Bei Galerien mit 60 und mehr Fotos kam so einiges an Datenvolumen zusammen. Das Ergebnis ließ sich nicht ignorieren: Kunden beschwerten sich, dass die Seite vor allem auf dem Handy zu langsam war – und die Bilder teilweise gar nicht mehr zu sehen bekamen.
-
02
Die Lösung
Ich habe die vier Beaver-Builder-Galerien pro Beitrag durch ein einziges ACF-Feld "Galerie" ersetzt, das Matthias Ziemer nur noch im Beitrag der Primärsprache pflegt. Von dort aus gebe ich sie automatisch für beide Sprachen und alle Gerätegrößen aus. Das zahlt sich besonders dann aus, wenn ein Foto raus muss – was bei Convention-Fotos häufiger vorkommt, wenn abgebildete Personen bitten, ein bestimmtes Bild nicht zu zeigen: Ein Klick statt vier.
Für die Darstellung habe ich glightbox anstelle der Beaver-Builder-Lösung eingebaut. Im Masonry-Grid lade ich alle Bilder nur in der doppelten Zielgröße in Pixeln – groß genug, um auch auf Retina-Handydisplays scharf zu wirken, aber ohne unnötigen Überschuss. Erst ein Klick öffnet in der Lightbox die Vollgröße, und auch die lädt per Lazyload erst dann, wenn sie wirklich gebraucht wird. Dasselbe Prinzip habe ich für alles umgesetzt, was beim Laden erstmal außerhalb des sichtbaren Bereichs liegt. Zusätzlich habe ich alle Bilder verlustfrei in WebP konvertiert, was bei gleicher Bildqualität spürbar kleinere Dateien bedeutet. -
03
Das Ergebnis
Der PageSpeed-Wert der Galerie-Beiträge stieg von 59 auf 88, die Dateigröße pro Galerie sank von über 20 MB auf unter 5 MB. Handy-Nutzer können die Fotos jetzt tatsächlich ansehen, statt auf eine überlastete Seite zu warten. Und auch für Matthias Ziemer selbst hat sich einiges vereinfacht: Neue Galerien sind schneller erstellt, und Änderungen – etwa das Entfernen eines einzelnen Fotos – müssen nur noch an einer Stelle statt an vieren gemacht werden.