Hier findest du einen Rückblick auf unser Meetup vom 9.06.2020 zum Thema Seitenladezeiten.
Was ist eine schnelle Website und wovon hängt die Geschwindigkeit ab? Wie kann man die Ladezeit einer Website selber messen? Inwiefern ist die Seitenladezeit relevant?
Wir besprechen anschaulich die Basics zu Page Speed beziehungsweise Ladezeiten am Beispiel unserer WPDUS-Website. Und zeigen, wie man mit ein paar Best-Practice-Handgriffen die Seitenladezeit mit WordPress verbessern kann.
Inhalt
Tools um die Ladezeit zu messen
Um die Ladezeit zu messen, gibt es einige kostenfreie Onlinetools.
Damit lassen sich schnell erste Analysen zur Messung der Ladezeiten durchführen.
Hinweis: Es wird empfohlen, die Testlocation in der Nähe der potentiellen Besucher auszuwählen. (Also Benutzer der Seite in Deutschland, dann auch Teststandort Deutschland, nicht beispielsweise in Kanada).
Was ist Ladezeit?
- Die Seitenladezeit einer Website beschreibt die Zeit von einer Anfrage einer URL über einen Browser bis zu einer Antwort mit Daten des Servers und deren Darstellung im Browser.
- Neben der technischen Ladezeit gibt es auch die gefühlte Ladezeit bei den Nutzer*innen. Diese ist die relevante – aber nicht so einfach zu messen.
- Messverfahren nutzen für unterschiedliche Events im Ablauf des Request eigenständige zum Teil unterschiedliche Fachbegriffe oder Key Metrics.
Eine gute Übersicht über die Ladezeit bieten Wasserfalldiagramme. Ein Wasserfalldiagramm ist die visuelle Darstellung der Ladezeit einer Website. In der Regel aufgeteilt auf die verschiedenen Ressourcen, die von der Website geladen werden müssen.
- Wichtige Indikatoren sind:
First Byte Time (auch TTFB=Time to first byte) Server-Antwortzeit - Document Completion Time
| First Byte (TTFB) | Server-Antwortzeit / Erste Kommunikation zwischen Client und Server, bevor die ersten Daten der Website zurückgeschickt werden. | SSL, IP, DNS | |
| Start Render | Grüne Linie | Bis hierhin ist die Seite weiß, ab diesem Zeitpunkt sieht man zum ersten Mal etwas im Browser. | |
| Document Complete | Blaue Linie | Zeigt an wie schnell der Nutzer die Seite sehen und mit ihr interagieren kann. | window load event (onload) |
| Fully Loaded | (Schwarze Rahmen) | Zeitpunkt an dem keine weiteren Daten an den Browser gesendet werden. |
Optimierung
Die folgenden Optimierungsschritte wurden konkret am “lebenden” Objekt unserer WPDUS-Webseite vorgeführt.
Optimierung: Serverwechsel
Als ersten Schritt wurde testweise ein Serverwechsel vorgenommen (ein Umzug auf einen anderen Server / Provider). Ein Umzug auf einen anderen Provider wird häufig auch technisch von diesem (kostenfrei) unterstützt.
Hier das Ergebnis des ersten Schritts:
Zusätzlich haben wir den Einfluss PHP Version überprüft. Nach Möglichkeit sollte man immer die neueste stabile PHP Version nutzen, die für die aktuelle WP Version empfohlen ist.
Test Ladezeit PHP 5.6 vs. 7.3
Optimierung: Minify
Als nächster Schritt wurden JS und CSS Dateien minifiziert.
Konkret ergab sich dabei nur eine geringe Ladezeitverkürzung.
Optimierung: Caching
Das Caching hat noch einmal einen großen Ladezeitfortschritt gebracht, da Berechnungsprozesse der Website vorab durchgeführt werden und als statische Dateien auf dem Server abgelegt werden.
Für das Caching von WP stehen viele erprobte Plugins zur Verfügung.
Hier eine kleine Auswahl von Plugins mit unterschiedlichen Funktionen:
Optimierung: Tinify
Hier ist der wichtigste Ansatzpunkt zur Ladezeitoptimierung die Verkleinerung und Komprimierung von Bildern. Bei uns ergaben sich hier nicht so große Vorteile.
Das Wasserfalldiagramm zeigt aber bereits sehr deutlich, bei welchen Bildern unbedingt nachgebessert werden muss.
Auch für die Komprimierung gibt es hilfreiche Plugins.
Hinweis: ein gutes Bildformat ist das WebP Format. Dies wird aber derzeit noch nicht von allen Browsern unterstützt.
Optimierung: .htaccess
Weitere Möglichkeiten der Ladezeitoptimierung ist die .htaccess Datei auf Apache oder der conf Dateien auf einem nginx Server:
Apache Server → Einstellungen, Weiterleitungen, Browsercaching
.htaccess
- Sehr technisch und leicht fehleranfällig => Eher für Entwickler
- Caching-Plugins kümmern sich i.d.R. drum.
- Kann zur Steuerung des Browsercaching verwendet werden.
Aufzeichnung
- 0:00 WordPress Stack
- 6:44 Unterschiedliche PHP Versionen
- 13:02 Optimierung durch Minifizierung
- 19:59 Optimierung durch Caching
- 25:07 Weitere Infos zum Caching
- 36:20 Caching-Plugins
- 38:48 Minifizierung mit Autoptimize
- 41:33 HTTP2 statt Minifizierung
- 43:42 Erfahrungsbericht Nitro Pack
- 45:42 GZIP
- 46:55 Optimierung durch Tinify
- 56:27 .htaccess-Datei
- 58:44 Offene Runde: CDN
- 1:08:32 Offene Runde: Query Times prüfen
- 1:09:14 Offene Runde: Frage Optimierung Kauf-Themes
- 1:11:44 Offene Runde: Hosterwechsel
- 1:13:42 Offene Runde: Beim WordPress Update Caching deaktivieren
- 1:15:50 Offene Runde: nginx vs. Apache