Die Performance der Bilder ist eines der größten Bottlenecks für fast alle Seiten im Internet. Für discoverize Branchenportale im Besonderen, da wir auf allen Seiten etliche Bilder laden und vorhalten müssen. In diesem Update haben wir etliche Performance Verbesserungen umgesetzt.
Performance Verbesserung für Bilder – schnelleres Laden für Besucher
Der Fokus dieses Updates für alle Branchenportale lag vor allen Dingen auf der Verbesserung der Performance beim Laden von Bildern. Auf nahezu allen Portalen stellt das Laden von Bildern eine große Performance-Aufgabe dar. Vor allen auf der Suchseite werden viele Bilder in verschiedenen Größen abhängig vom Endgerät geladen. Je besser wir dieses Laden optimieren, desto schneller lädt die Seite für Besucher. Schnell ladende Seiten performen besser, Besucher sind zufriedener und Google belohnt schnell ladende Seiten mit einem besseren Ranking.
Folgende konkrete Maßnahmen haben wir in den letzten Monaten umgesetzt:
Optimale Bilder für alle Endgeräte – Responsive Images
Nach einer umfangreichen Auswertung der Endgeräte, mit denen Besucher auf discoverize Portalen surfen, haben wir die meisten verwendeten Endgerätformate (bzw. Viewportformate) gelistet. Anhand dieser Liste liefern wir jetzt optimal passende Bilder aus. Diese Technik bezeichnet man als „responsive images„.
responsive Images auf der Suchseite in Branchenportalen
Bei mobilen Endgeräten bedeutet dies, dass der Browser stets nur das passendste Bild lädt, und wir somit Daten und Browser Performance einsparen können. Im Desktop verbessert sich die Aufbaugeschwindigkeit, da wir angezeigten Bilder nicht mehr skalieren sondern stets in ihrer „echten“ Größe anzeigen. Ebenso kommunizieren wir die korrekten Seitenverhältnisse der Bilder direkt an den Browser – so kann die Seite schneller erstellt (gerendert) werden.
Schnelleres Laden durch besseres Caching
Hinzu kommt, dass wir die Bildergrößen auf der Suchseite auf 4 meist genutzte Bildergrößen reduziert haben: 320px, 360px, 375px, 414px.
Dadurch verbessern wir das Caching (Zwischenspeichern) der Bilder enorm, da die Server jetzt nurmehr diese 4 Größen aktiv vorhalten müssen.
Lazy-Loading: Nachladen von Bildern erst bei Bedarf
Ebenso haben wir mit aktueller Browser-Technologie umgesetzt, dass Bilder erst geladen werden, wenn sie in der Nähe des sichtbaren Bereichs (Viewport) des Benutzers sind. Diese Technik bezeichnet man als „lazy loading„.
Dadurch werden auf allen Seiten Bilder die weiter unten erscheinen nicht bereits beim Seitenaufruf geladen. Dadurch lädt die Seite initial deutlich schneller. Gerade für mobile Endgeräte werden so oft deutlich weniger Daten geladen werden, da Besucher ja nicht immer bis zum Ende der Seite scrollen. Sobald der Besucher scrollt, werden diese weiter unten erscheinenden Bilder automatisch nachgeladen, so dass für den Besucher keine Nachteile entstehen.
Detailseite mobil: direktes Laden des optimalen Bildes
Auf der mobilen Detailseite (Smartphones, Tablets) haben wir bisher 2 Bilder laden müssen, um die optimale Größe darstellen zu können. Dies haben wir jetzt umgebaut, so dass wir einen kompletten Request einsparen und das optimale Bild direkt laden. Dies ist auch mit der responsive images (s.o.) Technik umgesetzt worden.
responsive Images auf der Detailseite
Auf der Detailseite (Unternehmensseite) halten wir insgesamt 7 Bildergrößen (wieder nach den gängigen Endgerätformaten) vor: 320px, 360px, 375px, 414px, 768px, 800px, 1160px.
Design und Usability Update Suchseite
Im Zuge der verbesserten Bildergrößen mussten wir auch das Suchseiten-Layout komplett umbauen, um diese Bilder korrekt darstellen zu können. Hierbei haben wir mit dem Feedback unserer Portalbetreiber gleich einige kleine Verbesserungen in der Usability der Suchseite durchgeführt.
Kompaktere Darstellung Layout – Karte, Suchergebnisse, Interaktionen
Suchseite Usability Update: Kompaktere Darstellung
Die bisherigen Interaktionen zum Wechsel des Suchseiten-Layout haben wir vereinfacht:
- das Schließen der Karte erfolgt über den Button oben rechts
- die volle Karte anzuzeigen erfolgt über den Button auf der linken Seite
- die Umkreissuche erfolgt zusätzlich über den Button darunter
Dadurch konnten wir eine gesamte Zeile einsparen und somit die Karte weiter oben, in den meisten Fällen „above the fold“ also bereits beim Laden der Seite sichtbar anzeigen (im Desktop).
Ebenso haben wir die Länder/Bundesländer-Buttons verbessert: Die Anzahl der Ergebnisse wird jetzt in einer eigenen Bubble angezeigt. So können wir den Button schmaler halten und die Kartenansicht insgesamt übersichtlicher machen.
Um die Filter besser von den anderen Elementen abzugrenzen, sind diese jetzt dezent farblich hinterlegt. Diese Farbe kann auf Wunsch angepasst werden.
Hinterlasse eine Antwort