Pagespeed zur Steigerung der Nutzererfahrung im Metallbau-Shop

Pagespeed zur Steigerung der Nutzererfahrung im Metallbau-Shop

Nach gängigen Analysen sind Ladezeiten zum Seitenaufbau jenseits der zwei Sekunden der Tod für jede gewinnbringende Konversion. Auch wenn es nur ein einzelner Punkt auf einer langen ToDo-Liste des Webseitenbetreibers ist, welche er abarbeiten sollte, um konkurrenzfähig zu bleiben, so sollte er diesen nicht außen vor lassen.

Am Beispiel vom Metallbau-Mehner Werkzeugmaschinen Shop soll hier auf die technischen Möglichkeiten zur Pagespeed-Senkung und der dadurch positiveren Nutzererfahrung eingegangen werden.

Einleitend zur Ladezeitenreduzierung werden die mir wichtigsten Punkte aufgezählt

  • Speichergröße der genutzten Bilder
  • Asynchrones Laden von Scripten und CSS-Definitionen
  • Browser-Caching
  • HTML, CSS und Java-Script Speicherreduzierung
  • Datenbankabfragen reduzieren

Dateigröße der Bilder

Um gut komprimierte Bilder zu erhalten, führen einige Wege nach Rom. Zum einen ist es möglich die hochauflösenden Bilder auf den Webserver zu laden und dort serverseitig mit Scripten zu komprimieren, zum anderen sind auch Stapelverarbeitungen, wie z.B. bei Photoshop, möglich. Nachteilig bei der serverseitigen Bearbeitung ist primär die Datenmenge, welche auf den Server kopiert werden muss. Schon beim Upload kann man mit der Stapelverarbeitung via Photoshop oder ähnlichen Programmen bis zu 90% an Traffic einsparen.

HTML, CSS und Script Reduzierung

Mittels Leerzeichenreduktion der einzelnen Dateien können bis zu 30% des Traffics eingespart werden und so die Ladezeiten ebenso gedrückt werden. Gerade im mobilen Sektor eine dankbare Eigenschaft. Nun muss dies nicht händisch bewerkstelligt werden, hierfür gibt es viele gute Tools für den Desktop als auch browserbasiert.

Browser-Caching

Mit dem Caching reduziert man zwar nicht die Zugriffszeiten beim Erstkontakt auf der Webseite, dennoch werden die Folgeseiten schneller geladen, wenn gleiche Webseiten-Elemente genutzt werden. Die einzelnen Scripte, CSS-Dateien, Bilder etc. verbleiben so auf dem genutzten Device und müssen nicht noch einmal vom Webserver herunter geladen werden.

Datenbankabfragen reduzieren

Datenbankabfragen sind wichtig für die Response-Zeiten. Je mehr Abfragen getätigt werden müssen, desto mehr Zeit verbringt der Webserver mit der Zusammenstellung bis er die Webseite an den Nutzer ausgeben kann. Aus diesem Grunde sollte man auf Abfragen die dem Nutzer keinen Mehrwert bieten verzichten.

Asynchrones Laden

Ein unverzichtenbares Werkzeug als auch mächtiges Tool ist das „Asynchrone Laden“, welches nicht weniger bedeutet, als dass es eine Reihenfolge der zu ladenden Webseitenelemente gibt. In der Regel sollte der Hauptcontent und die primären Styleelement für die Struktur der Webseite zuallererst geladen werden. So kann der User ohne weiteres erstmal die Webseite auf seine Bedürfnisse scannen. Während sich der User schon umsehen kann, werden die höheren Funktionen der Webseite noch nachgeladen und nach und nach aktiv.

Im Webshop von Metallbau-Mehner kamen all diese Punkte zum Tragen und wurden schon in der Programmierphase bedacht. Gegenüber dem originalen unoptimierten Template konnten so allein durch die reine Produktbildoptimierung 65% an Traffic eingespart werden. Die CSS-Dateien wurden gegenüber dem Original 32% kleiner und Java-Script um 16%. Durch die Reduzierung der Datenbankabfragen, um teilweise bis zu 20 Datenbankabfragen pro Seitenaufruf wurde die Antwortzeit des Servers von 0,74s auf teilweise bis zu 0,35s verkürzt, was 47% schnelleren Zugriff bedeutet. Das asynchrone Laden brachte deutliche Behaglichkeit beim Nutzer, so waren die Wartezeiten teilweise um 2,0s kürzer und die Informationsbeschaffung konnte schon nach 0,5s begonnen werden.

Abschließend ist zu sagen, der Pagespeed ist ein sehr gewichtiger Faktor in der Webseitenoptimierung geworden, doch ist er nur ein Zahnrad in der Webseiten-Optimierung.

Links

 

 

Bewerte diesen Beitrag:
Netzwerk mit SSL
Konfigurationsmanagement für Software
 

Kommentare (0)

There are no comments posted here yet

Einen Kommentar verfassen

Posting comment as a guest.
Anhänge (0 / 3)
Share Your Location