Usability
Was ist denn eigentlich die Usability? Grob gesagt bedeutet dieser Begriff die Benutzerfreundlichkeit eines Produkt. In unserem Falle wäre es die Benutzerfreundlichkeit einer Website.
Es gibt sogar tatsächlich eine ISO-Definition der Usability: Der User sollte seine Ziele effektiv, effizient und zufriedenstellend auf unserer Webseite erreichen können:
“…Ziele effektiv, effizient und zufriedenstellend zu erreichen.“ (DIN EN ISO 9241-11)
Wenn unsere User aber ewig lang auf den Content warten müssen, wenn die Seite beim Surfen langsam lädt, ist es zum einen ziemlich frustrierend. “Effektiv, effizient und zufriedenstellen” ist es mit Sicherheit ebenfalls nicht.
Die Webseite/Webanwendung/e-Commerce-Plattform sollte zügig geladen werden. Und zwar spricht man dabei von einer Ladezeit von nicht mehr als zwei Sekunden. Der ungeduldige und mittlerweile von Hunderten Anbietern verwöhnte User hat es nun mal nicht mehr nötig auf einen “unfähigen” Anbieter zu warten.
Die Ladezeit ist demnach wichtig damit die User auf der Seit verweilen, um überhaut dem Charme unserer Marketing-Künste zu verfallen 😉
Doch wie schaffen wir es unser Webprojekt flott und wettbewerbsfähig zu machen?
Na ganz einfach! Wir müssen uns nur mit Webhosting, Datenbanken, SSDs, RAID-Levels, SQL-Performance Tuning, Gzip, nginx, apache, Bild-Größe, Bild-Kompressionen, HTML, CSS, Javascript, JSON, PHP, JS und CSS minifying, Caching, Frameworks, Bootstrap, jQuery, AngularJS und natürlich CND auskennen. 😀
Doch um ernst zu sein, gibt es so einiges, was man als nicht ITler oder nicht Anwendungsentwickler, machen könnte:
Auswahl des Hostings:
Es ist wichtig, dass das gebuchte Hostingpaket dem modernen Standard entspricht und auf das Vorhaben angepasst ist. Schnelle Datentäger (SSDs) genügend Arbeitsspeicher, stets aktuelle Serverbetriebssysteme gehören zum absoluten Muss! Es macht durchaus Sinn sich da beraten zu lassen. Somit hätten wir aus unserer Liste schon eine Menge Technikkram weg gestrichen:
Webhosting, Datenbanken, SSDs, RAID-Levels, SQL-Performance Tuning, Gzip, nginx, apache, Bild-Größe, Bild-Kompressionen, HTML, CSS, Javascript, JSON, PHP, JS und CSS minifying, Caching, Frameworks, Bootstrap, jQuery, AngularJS und natürlich CND auskennen.
Nun haben wir also unser Hosting, was super schnell, hochperformant und auf die Erwartungen unserer Zielgruppe abgestimmt ist.
Jetzt machen viele den Fehler uns nutzen diverse Homepagebaukästen. Hierbei hat man jedoch keinerlei Kontrolle über die Code und über die Qualität des Codes. Es ist ziemlich oft vorgekommen, dass nach einem Wechsel von einem Baukasten zu einem CMS mit der Möglichkeit der Codeoptimierung die Besucherzahlen nach oben geschossen sind. Bei Projekten mit hohem Budget und einer Agentur, die die Entwicklung und Wartung der Webseite betreut, ist man immer auf der sicheren Seite.
Die Betriebe, die auf mein Lieblings-CMS setzen – WordPress – können die Komprimierung des Codes mit Hilfe einiger Plugins ganz gut in den Griff bekommen. Die Ergebnisse sind direkt deutlich spürbar und man wird mit einem schöneren Score auf PageSpeed Insights belohnt.
Die Liste wird nun kleiner:
Webhosting, Datenbanken, SSDs, RAID-Levels, SQL-Performance Tuning, Gzip, nginx, apache, Bild-Größe, Bild-Kompressionen, HTML, CSS, Javascript, JSON, PHP, JS und CSS minifying, Caching, Frameworks, Bootstrap, jQuery, AngularJS und natürlich CND auskennen.
Caching
Bei dieser Technologie werden bestimmte Teile der Webanwendung im Browser des Users gespeichert. Beim nächsten Besuch müssen diese Teile logischerweise nicht erneut berechnet, heruntergeladen etc. werden. Es ist eine recht einfache Vorgehensweise um die Ladezeiten zu verkürzen.
Bilder/Grafiken etc. – die Größe zählt!
Diesen Punkt habe ich absichtlich zum Schluss aufgeführt, weil wir genau an dieser Stelle viel falsch aber auch viel richtig machen können.
Heutzutage leben gute und erfolgreiche Webseiten von schönen Bildern. Denn ein Bild sagt mehr als Tausend Worte (die übrigens eh keiner wirklich liest). Doch es sind genau die Bilder die nach Aussage von Yahoo und Google über 70% der Bandbreite beim Laden einer Seite beanspruchen.
Das bedeutet für uns, dass wir genau an dieser Stellschraube drehen können, wenn wir folgende Regeln beachten:
- Bilder auf die Webgröße verkleinern
- Bilder komprimieren
Folgende Tools helfen dabei: Tiny PNG, ImageOptim, Kraken. Sogar die – leider auf “Legacy” gesetzte Photoshop Funktion “Für Web speichern…” könnte nützlich sein…
Ein Video sagt mehr als tausend Wörter?
Die Videos gehören mittlerweile auch zu einem modernen Webseite. Ab einer bestimmten Videogröße sollte man überlegen die Videos auf einer externen Plattform oder auf einem externen Server zu platzieren. Hier gibt es wiederum einige Anbieter und Möglichkeiten von Vimeo und YouTube bis Amazon S3.
Das Thema der Ladezeitoptimierung ist jedoch sehr umfassend, ich hoffe ich konnte einigermaßen Tool uns Anregungen mit diesem Beitrag geben.
