Site-Performance analysieren & optimieren

Performance

Bei der Site-Performance werden im Grundsatz zwei Arten unterschieden:

  • Empfundene Performance (perceived performance)
  • gemessene Performance

Empfundene Performance

Wenn ein Benutzer das Gefühl hat, dass die Site schnell lädt ist die von ihm Empfundene Performance positiv. Die Empfundene Performance hängt in den meisten Fällen auch mit der Gemessenen - also der technischen - Performance in Korrelation.

Die Empfundene Performance ist essentiell für den Erfolg einer Website!


Zu beachten ist, dass der Benutzer die Empfundene Performance häufig unbewusst an Hand von Mitbewerber-Sites in seinem Gefühl aufbaut. Das heisst, wenn meine Site merklich (20%+) schneller ist als die der Mitbewerber, fühlt sich meine Site schnell an (und natürlich im Umkehrschluss die der Mitbewerber langsam). 


Lässt sich die Gemessene Performance nicht mehr - bzw. nur mit unrealistisch hohem Aufwand - steigern, kann die Empfundene Performance beim Seiten-/Inhalt-Laden mit Massnahmen wie zum Beispiel:

  • kleine Produkte-Texte zum Lesen einblenden 
  • progressives Laden der Bilder/Inhalte
  • kleine, schlanke - aber schnelle - Animation einblenden

verbessert werden. Natürlich muss die Gemessene Performance auch dann noch sehr gut sein, da es wenig Ärgerlicheres gibt als 30 Sekunden auf einen Progressbar oder Spinner zu starren... bzw. verlassen die meisten Benutzer gemäss aktuellen Studien die Site sowieso nach 10+ Sekunden warten.

Interessanter Artikel zu diesem Thema von Kyle Peatt.

Gemessene Performance

Bei der Gemessenen Performance handelt es sich um die Dauer bis eine Web-Seite vollumfänglich gelanden ist.

Der Fokus liegt in diesem Blog auf dieser, vergleichbaren Performance. Allerdings wird auch die Dauer bis eine sinnvoller Inhalt ersichtlich ist gemessen. Dieser Wert kann gemessen und verglichen werden, gibt aber doch gewisse Informationen zur Empfundenen Performance.

Die Performance wird im Wesentlichen durch die drei Themenbereiche:

  • Frontend-Umsetzung
  • Backend-Infrastruktur und -Umsetzung
  • Netzwerk / Datentransport
beeinflusst.

Frontend-Umsetzung

In der Frontend-Umsetzung liegt derzeit wohl das grösste Optimierungs-Potential. Die Gründe dürften primär im mangelden Wissen und Bewusstsein liegen, was z.B. zu schwere Bilder, zu viele Requests etc. für negative Auswirkungen auf die Performance (und somit auf SEO, UX, ...) haben. Zusätzlich erschwert sicherlich bei der Frontend-Umsetzung auch die Entscheidungs-'Kraft' von Designern, Marketing-Fachleuten etc. das Thema "Performance" stark zu gewichten (da bunte Bildchen halt jeder versteht; Performance, SEO etc. jedoch nicht).


In den kommenden Blog-Einträgen werde ich unter anderem die nachfolgendem Frontend-Themen beleuchten:

  • Bilder
  • Requests
  • Javascript
  • CSS
  • 3rd party-Frameworks und -Libraries
  • Ads und Tracking
  • Animations


Backend-Infrastruktur und -Umsetzung

Die Backend-Thematik hat sich in Bezug auf Performance in den letzten Jahren deutlich verbessert. Dies ist sicherlich darauf zurückzuführen, dass die Standard-Produkte z.B. im CMS-Bereich out-of-the-box immer besser optimiert wurden/werden.

Die Ursachen für Backend-Issues lassen sich ohne konkrete Kenntnisse der Infrastruktur (und/oder Zugriff auf diese) nicht analysieren.


Allerdings lässt sich auch im Backend die Performance noch problemlos 'versenken'. Nachfolgend einige Punkte die zu beachten sind:

  • Hosting-/Cloud-Provider
  • Server (Memory, CPU, Disks, ...)
  • eingesetzte Middleware, CMS, ...
  • eingesetzte Entwicklungs-Frameworks
  • Professionalität der Entwicklung
  • eingesetzte Datenbanken und der Setup
  • Datenbank-Modellierung, Query-Tuning, ...
  • Architektur (Monolith, MicroServices, WebServices, CQRS, SOA, ...)
  • Caching
  • Skalierbarkeit


Netzwerk / Datentransport

Beim Netzwerk / Datentransport werden zwischenzeitlich gut bis sehr gute Leistungen geboten. Ich arbeite z.B. seit etlichen Jahren erfolgreich mit dem sehr flexiblen Provider SimpleHosting.ch zusammen; dies auch in Bezug auf Performance. Wenn eine Site in Richtung International, Skalierung etc. geht arbeite ich mit Microsoft Azure bzw. AWS von Amazon.


Im Blog werde ich zukünftig die folgenden sehr wichtigen Themen beleuchten:

  • HTTP 1.x versus HTTP/2
  • Einfluss der Latenz
  • HTTPS