Performance — Wie messe ich die Geschwindigkeit der Website?

Um die Geschwin­dig­keit der Web­site zu ver­bes­sern, muss zunächst die Geschwin­dig­keit ermit­telt wer­den. Danach kön­nen Maß­nah­men ergrif­fen wer­den, um zu sie verbessern. 

Zur Ermitt­lung der Geschwin­dig­keit kön­nen exter­ne Tools, die über den Brow­ser auf­ge­ru­fen wer­den, kos­ten­frei und ohne wei­te­re Anga­ben (wie E‑Mail-Adres­sen) ver­wen­det wer­den. Es wer­den häu­fig genutzt:

In der Regel muss ledig­lich die URL der zu prü­fen­den Web­site ein­ge­ge­ben wer­den und das Tool prüft via Zugriff die Per­for­mance. Jedoch ist zu beach­ten, dass der Ser­ver­stand­ort, von dem aus auf­ge­ru­fen wer­den soll, eine Rol­le spielt: Han­delt es sich um eine deutsch­spra­chi­ge Web­site, die in ers­ter Linie deut­sche Besu­cher anspre­chen soll, so es sinn­voll, als Ser­ver­stand­ort eine deut­sche Stadt (häu­fig: Frank­furt) einzugeben.

Die “Ant­wort­zeit” der Tools ist in der Regel “kurz”: Hat man die Anfra­ge abge­schickt, so dau­ert eini­ge Sekun­den, bis das Ergeb­nis vor­liegt. Die Ergeb­nis­se kön­nen von Auf­ruf zu Auf­ruf leicht vari­ie­ren, da Schwan­kun­gen auf dem Ser­ver oder im Inter­net gene­rell mög­lich sind.

Alle hier vor­ge­stell­ten Tools haben ihre indi­vi­du­el­len Vor­zü­ge. Daher wer­den — auch von Pro­fis — vie­le Tools par­al­lel eingesetzt. 

1. Die einzelnen Tools im Vergleich

ToolAnzahl Wer­teAnmer­kungSer­ver­stand­ort
1.GTMe­trics5Ver­wen­det “ande­re” Tools und fasst zusammenVan­cou­ver, Canada
2.Ping­dom4Ein­fach und übersichtlichEin­stell­bar
3.Web Page Test6Sehr detail­liert, von ger­ne von Exper­ten genutztEin­stell­bar
4.Light­house4 (+1)Ist der “Qua­si-Stan­dard”Offen
5.Page­Speed Insights1Fasst Ergeb­nis­se von Light­house zusammenOffen
6.Yel­low­lab10Gibt auch Aus­kunft über Code-QualitätOffen
7.Dare­boost4Kann nur ein­mal pro Monat auf­ge­ru­fen wer­den, daher nicht empfehlenswertOffen

Wesent­li­che Wer­te, die (immer) ermit­telt wer­den sol­len sind:

  • TTFB — Time to first byte, oder ein­fach “first byte”: Die­ser Wert gibt an, wie lan­ge es dau­ert, bis nach Absen­den der Anfra­ge an den Ser­ver / die Web­site das ers­te Byte / die ers­ten Daten im Brow­ser erschei­nen. Damit erhält man ein Maß für die (rei­ne) Ser­ver­ge­schwin­dig­keit im Zusam­men­spiel mit dem eige­nen Code der Website

2. Beispiele

Hier sind bei­spiel­haft eini­ge (Ergeb­nis­se der) Tools dargestellt.

2.1 GTmetrix

GTMe­trix lie­fert zwei “Gra­des” aus — zum einen Per­for­mance, zum ande­ren Struc­tu­re. Bei bei­den Gra­des soll­te idea­ler­wei­se ein Wert von min­des­tens 80 % her­aus­kom­men, sonst sind Nach­bes­se­run­gen sinnvoll.

2.2 Das Pingdom-Tool

Beim Ping­dom-Tool wird nach Ein­ga­be der URL (und des Ser­ver-Stand­orts) ein Test gestar­tet, der das Abruf-Ver­hal­ten von einem Stand­ort wider­spie­gelt. Die­ser Test dau­ert in der Regel eini­ge Sekun­den. Zu beach­ten ist, dass bei “Test from” die Loac­tion “Euro­pe — Ger­ma­ny — Frank­furt” aus­ge­wählt wird.

Als Ergeb­nis wer­den unter “Your Results” vier Ergeb­nis­se angezeigt.

Typi­sche Wer­te sind:

Grö­ßeBedeu­tungZiel­wert
Per­for­mance gradZeigt einen Wert von 0 bis 100. Je höher der Wert, des­to besserZumin­dest “B” (oder grün)
Load timeZeigt die Lade­zeit in Sekun­den an. Je nied­ri­ger der Wert, des­to besserweni­ger als 2 Sekunden
Page sizeGibt die Grö­ße der Sei­te in kB an. Je nied­ri­ger der Wert, des­to besserUnter 500 Kilobyte
RequestsGibt die Anzahl der Auf­ru­fe von Code-Frag­men­ten an: Je nied­ri­ger der Wert, des­to besserUnter 50

2.3 WebPageTest

Nach Ein­ga­be der Test Loca­ti­on (“Frank­furt, Ger­man — EC2 (Chro­me, Fire­fox)”) erhält man durch “Start Test” eine Aus­wer­tung, die sechs agg­re­gier­te Wer­te enthält.

In der wei­te­ren Detail­lie­rung zei­gen sich 

Zudem ist die Was­ser­fall-Dar­stel­lung (“Water­fall View”) sehr beliebt, da dort der Zeit­be­darf der ein­zel­nen Scrip­te visua­li­siert wird.

2.5 PageSpeed Insights

Page­Speed Insights ist ein Tool von Goog­le, wel­ches auch die Daten der (bis­he­ri­gen) Besu­cher ein­be­zieht, inso­fern sie vor­han­den sind.

2.7 Yellowlab

Das Tool von Yel­low­lab lie­fert 10 Ergebnisse.

Nr.WertInhaltTypisch
1.Page weight
2.Requests
3.DOM com­ple­xi­ty
4.JS com­ple­xi­ty
5.Bad JS
6.jQuery
7.CSS com­ple­xi­ty
8.Bad CSS
9.Web fonts
10.Ser­ver config

3. Die Messergebnisse sind da — und dann?

Die Mess­ergeb­nis­se wer­den in der Regel Ska­len zuge­ord­net und dann farb­lich unter­legt (grün, gelb, rot). In der Regel wer­den die Schwach­stel­len benannt, wobei sel­ten eine “ein­fa­che Ver­bes­se­rung” mög­lich ist. Gera­de die Zuord­nung, was in Word­Press zu tun ist, fällt häu­fig schwer.

Daher mei­ne Empfehlungen:

  • Es soll­ten kei­ne “roten” Wer­te bei der Über­prü­fung / Mes­sung auftauchen
  • Es ist häu­fig nur mit sehr hohem Auf­wand zu errei­chen, dass alle Wer­te top sind, dies muss daher auch nicht unbe­dingt ange­strebt werden

Ach­tung:

  • Eini­ge Tools geben den Hin­weis, die Bild­grö­ße zu opti­mie­ren. In der Regel fol­gen dann Tipps, die auf spe­zi­el­le Tools oder Bild­for­ma­te hin­aus­lau­fen. Die­se Tipps sind mit Vor­sicht zu beach­ten, denn dahin­ter ver­ber­gen sich häu­fig Herstellerinteressen
  • Es gibt Tools (in Word­Press), die aus­schließ­lich dazu die­nen, die Mess­ergeb­nis­se zu ver­bes­sern, ohne jedoch etwas an der Per­for­mance zu opti­mie­ren. Von dem Ein­satz die­ser Tools ist abzuraten

4. Weitere Tools zur Performance-Messung

Es gibt noch eini­ge wei­te­re Tools, mit denen Aus­sa­gen zur Per­for­mance getrof­fen wer­den kön­nen. Hier sind eini­ge davon aufgelistet:

  • Core Web Vitals von Experte.de: Hier­über kön­nen die ein­zel­nen Web-Vitals-Wer­te für “alle” Web­sei­ten am Stück bestimmt wer­den: Wird der Test durch Ein­ga­be der Web­site-URL ange­sto­ßen, so wird alle Web­sei­ten gecrawlt und nach und nach aus­ge­wer­tet. Das kann lan­ge dau­ern, da pro Web­sei­te eini­ge Sekun­den benö­tigt werden.
Nach oben scrollen