Rückblick: WordPress Meetup #44 – Seitenladezeit

Hier fin­dest du einen Rück­blick auf unser Meet­up vom 9.06.2020 zum Thema Sei­ten­la­de­zei­ten.

Was ist eine schnel­le Web­site und wovon hängt die Geschwin­dig­keit ab?

Wie kann man die Lade­zeit einer Web­site sel­ber mes­sen?

Inwie­fern ist die Sei­ten­la­de­zeit rele­vant?

Wir bespre­chen anschau­lich die Basics zu Page Speed bezie­hungs­wei­se Lade­zei­ten am Bei­spiel unse­rer WPDUS-Web­site. Und zei­gen, wie man mit ein paar Best-Prac­ti­ce-Hand­grif­fen die Sei­ten­la­de­zeit mit Wor­d­Press ver­bes­sern kann.

Der Groß­teil des Meetups wurde auf Video auf­ge­zeich­net. Die Vide­os in x Tei­len sind ent­spre­chend in den Text ein­ge­bun­den .

(Hier die ganze YouTube-Playlist)
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

Struk­tur:

  1. Tools um die Lade­zeit zu mes­sen
  2. Was ist Lade­zeit
  3. Opti­mie­rung
    1. Opti­mie­rung: Ser­ver­wech­sel
    2. Opti­mie­rung: Mini­fy
    3. Opti­mie­rung: Caching
    4. Opti­mie­rung: Tini­fy
    5. Opti­mie­rung: htac­cess

1. Tools um die Ladezeit zu messen

Um die Lade­zeit zu mes­sen, gibt es eini­ge kos­ten­freie Online­tools.

  • webpagetest.org
  • gtmetrix.com
  • developers.google.com/speed/pagespeed/insights/
  • web.dev
  • developers.google.com/web/tools/lighthouse/ (In Chro­me)
  • tools.pingdom.com

Damit las­sen sich schnell erste Ana­ly­sen zur Mes­sung der Lade­zei­ten durch­füh­ren.
Hin­weis: Es wird emp­foh­len, die Test­lo­ca­ti­on in der Nähe der poten­ti­el­len Besu­cher aus­zu­wäh­len. (Also Benut­zer der Seite in Deutsch­land, dann auch Test­stand­ort Deutsch­land, nicht bei­spiels­wei­se in Kana­da).

https://youtu.be/HlWkOeWD-DI?t=0s Wor­d­Press Stack

2. Was ist Ladezeit

  • Die Sei­ten­la­de­zeit einer Web­site beschreibt die Zeit von einer Anfra­ge einer URL über einen Brow­ser bis zu einer Ant­wort mit Daten des Ser­vers und deren Dar­stel­lung im Brow­ser.
  • Neben der tech­ni­schen Lade­zeit gibt es auch die gefühl­te Lade­zeit bei den Nutzer*innen. Diese ist die rele­van­te – aber nicht so ein­fach zu mes­sen.
  • Mess­ver­fah­ren nut­zen für unter­schied­li­che Events im Ablauf des Request eigen­stän­di­ge zum Teil unter­schied­li­che Fach­be­grif­fe oder Key Metrics.

Eine gute Über­sicht über die Lade­zeit bie­ten Was­ser­fall­dia­gram­me. Ein Was­ser­fall­dia­gramm ist die visu­el­le Dar­stel­lung der Lade­zeit einer Web­site. In der Regel auf­ge­teilt auf die ver­schie­de­nen Res­sour­cen, die von der Web­site gela­den wer­den müs­sen.

  • Wich­ti­ge Indi­ka­to­ren sind:
    First Byte Time (auch TTFB=Time to first byte) Ser­ver-Ant­wort­zeit
  • Docu­ment Com­ple­ti­on Time
First Byte (TTFB) Ser­ver-Ant­wort­zeit / Erste Kom­mu­ni­ka­ti­on zwi­schen Cli­ent und Ser­ver, bevor die ers­ten Daten der Web­site zurück­ge­schickt wer­den.SSL, IP, DNS
Start Ren­derGrüne LinieBis hier­hin ist die Seite weiß, ab die­sem Zeit­punkt sieht man zum ers­ten Mal etwas im Brow­ser. 
Docu­ment Com­ple­teBlaue LinieZeigt an wie schnell der Nut­zer die Seite sehen und mit ihr inter­agie­ren kann.win­dow load event (onload)
Fully Loa­ded(Schwar­ze Rah­men)Zeit­punkt an dem keine wei­te­ren Daten an den Brow­ser gesen­det wer­den. 

3. Optimierung

Die fol­gen­den Opti­mie­rungs­schrit­te wur­den kon­kret am “leben­den” Objekt unse­rer WPDUS-Web­sei­te vor­ge­führt.

3.1. Optimierung: Serverwechsel

Als ers­ten Schritt wurde test­wei­se ein Ser­ver­wech­sel vor­ge­nom­men (ein Umzug auf einen ande­ren Ser­ver / Pro­vi­der). Ein Umzug auf einen ande­ren Pro­vi­der wird häu­fig auch tech­nisch von die­sem (kos­ten­frei) unter­stützt.

(Play­list ein­fü­gen / Link ein­fü­gen)

Hier das Ergeb­nis des ers­ten Schritts:

Opti­mie­rung: Ser­ver­wech­sel

Zusätz­lich haben wir den Ein­fluss PHP Ver­si­on über­prüft. Nach Mög­lich­keit soll­te man immer die neu­es­te sta­bi­le PHP Ver­si­on nut­zen, die für die aktu­el­le WP Ver­si­on emp­foh­len ist.


Test Lade­zeit PHP  5.6  vs.  7.3
Geschwin­dig­kei­ten bei ver­schie­de­nen PHP Ver­sio­nen

https://youtu.be/HlWkOeWD-DI?t=404s Unter­schied­li­che PHP Ver­sio­nen

3.2. Optimierung: Minify

Als nächs­ter Schritt wur­den JS und CSS Datei­en mini­fi­ziert.
Kon­kret ergab sich dabei nur eine gerin­ge Lade­zeit­ver­kür­zung.

Nach Opti­mie­rung: Mini­fy

https://youtu.be/HlWkOeWD-DI?t=782s Opti­mie­rung durch Mini­fi­zie­rung

https://youtu.be/HlWkOeWD-DI?t=2328s Mini­fi­zie­rung mit Aut­op­ti­mi­ze

https://youtu.be/HlWkOeWD-DI?t=2493s HTTP2 statt Mini­fi­zie­rung

3.3. Optimierung: Caching

Das Caching hat noch ein­mal einen gro­ßen Lade­zeit­fort­schritt gebracht, da Berech­nungs­pro­zes­se der Web­site vorab durch­ge­führt wer­den und als sta­ti­sche Datei­en auf dem Ser­ver abge­legt wer­den.

Nach Opti­mie­rung: Caching

https://youtu.be/HlWkOeWD-DI?t=1199s Opti­mie­rung durch Caching

https://youtu.be/HlWkOeWD-DI?t=1507s Wei­te­re Infos zum Caching

Für das Caching von WP ste­hen viele erprob­te Plugins zur Ver­fü­gung.
Hier eine klei­ne Aus­wahl von Plugins mit unter­schied­li­chen Funk­tio­nen:

Caching Plugins

https://youtu.be/HlWkOeWD-DI?t=2180s Caching-Plugins

3.4. Optimierung: Tinify

Hier ist der wich­tigs­te Ansatz­punkt zur Lade­zeit­op­ti­mie­rung die Ver­klei­ne­rung und Kom­pri­mie­rung von Bil­dern. Bei uns erga­ben sich hier nicht so große Vor­tei­le.

Das Was­ser­fall­dia­gramm zeigt aber bereits sehr deut­lich, bei wel­chen Bil­dern unbe­dingt nach­ge­bes­sert wer­den muss.

Auch für die Kom­pri­mie­rung gibt es hilf­rei­che Plugins.
Hin­weis: ein gutes Bild­for­mat ist das WebP For­mat. Dies wird aber der­zeit noch nicht von allen Brow­sern unter­stützt.

Nach Opti­mie­rung Tini­fy

https://youtu.be/HlWkOeWD-DI?t=2815s Opti­mie­rung durch Tini­fy

3.5. Optimierung: .htaccess

Wei­te­re Mög­lich­kei­ten der Lade­zeit­op­ti­mie­rung ist die .htac­cess Datei auf Apa­che oder der conf Datei­en auf einem nginx Ser­ver:

Apa­che Ser­ver → Ein­stel­lun­gen, Wei­ter­lei­tun­gen, Brow­ser­caching

.htac­cess

  • Sehr tech­nisch und leicht feh­ler­an­fäl­lig => Eher für Ent­wick­ler
  • Caching-Plugins küm­mern sich i.d.R. drum.
  • Kann zur Steue­rung des Brow­ser­caching ver­wen­det wer­den.

Bei­spie­le: https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess

https://youtu.be/HlWkOeWD-DI?t=3387s .htac­cess-Datei

4. Offene Runde

https://youtu.be/HlWkOeWD-DI?t=2622s Erfah­rungs­be­richt Nitro Pack

https://youtu.be/HlWkOeWD-DI?t=2742s GZIP

https://youtu.be/HlWkOeWD-DI?t=3524s Offe­ne Runde: CDN

https://youtu.be/HlWkOeWD-DI?t=4112s Offe­ne Runde: Query Times prü­fen

https://youtu.be/HlWkOeWD-DI?t=4154s Offe­ne Runde: Frage Opti­mie­rung Kauf-The­mes

https://youtu.be/HlWkOeWD-DI?t=4304s Offe­ne Runde: Hos­ter­wech­sel

https://youtu.be/HlWkOeWD-DI?t=4422s Offe­ne Runde: Beim Wor­d­Press Update Caching deak­ti­vie­ren

https://youtu.be/HlWkOeWD-DI?t=4550s Offe­ne Runde: nginx vs. Apa­che