Ladezeit einer Webseite messen und verbessern

Seit HTTP2 gilt nicht mehr die pauschale Formel, dass weniger Dateien, die geladen werden müssen, gleich schneller laden. Denn es sind mehrere parallele Zugriffe möglich.

Aber häufig werden unnötige Dateien und Daten geladen. Was benötigt man wirklich, was nicht? Gerade in CSS und JS-Dateien gibt es meist viel Code, der nicht (mehr) gebraucht wird oder besser formuliert werden kann. Bibliotheken wie jQuery sind zudem recht umfangreich und werden nur zu einem kleinen Teil wirklich benötigt. Vanilla-JS wäre das Stichwort für eine Suche nach alternativen Scripten.

Weiter lassen sich mit Bildkomprimierung große Einsparungen erzielen, was die generell zu ladenden Datenmenge betrifft. Auch moderne Bildformate wie webp oder avif helfen dabei.

Nur alles, was direkt im Viewport sichtbar ist und dafür benötigt wird, sollte direkt geladen werden (kritischer Renderingpfad).

Alle weiteren Daten sollten nachgeladen werden. Selbst das weitere CSS. Bilder mit loading lazy und JavaScript mit async, defer.

Die Tools zur Ladezeitmessung sowie bessere Browser-Consolen geben diese Hinweise von sich aus. Einfach in Ruhe anschauen und testen.

Wie schon oben erwähnt, lassen sich Bilder ohne sichtbaren Qualitätsverlust komprimieren und so deutliche Einsparungen erzielen.

Auch HTML, CSS, JS, … sind komprimierbar. Kompression spart durchschnittlich 70 %. So kann man die Klartext-Dateien schon reduzieren, indem man Kommentare, Leerzeilen etc. entfernt. Im CSS kann man Shorthand verwenden und beispielsweise die abschließenden ; entfernen. Zusätzlich kann man diese Dateien komprimiert an den Browser ausliefern, was die Übertagungsgröße enorm mindert. Das Entpacken und Anzeigen kostet dann zwar Rechnerleistung beim Anzeigenden, an der es aber ja meist nicht mangelt.

Viele Dateien einer Webseite ändern sich sehr selten. Ein Teil der Besucher dürfte also bei weiteren Besuchen theoretisch die identischen Dateien sehen, die sein Browser schon einmal (in den Zwischenspeicher) geladen hatte. Wieso also diese Dateien nochmal vom Server holen, wenn der Besucher die schon auf dem Rechner hat?

Dazu muss man serverseitig den Expires-Header (und Cache-Control) jeder Datei übertragen, damit der Browser das auch erkennt.
Ändert man aber die CSS-Datei muss man auch deren Namen ändern, um ein Laden der alten CSS-Datei bei diesen Besuchern zu vermeiden. Mehr zum Browser-Cache löschen.

404-Fehler vermeiden. Werden zu ladende Dateien nicht gefunden, kann das die Ladezeit etxrem verlängern. Selbst wenn nur irgendein kleines Icon fehlt, das dauert! Also prüfen, da sich das sehr leicht beheben lässt.

Sehr viele Redirect-Anweisungen in der .htaccess beeinträchtigen die Ladezeit extrem. Also versucht man diese soweit wie möglich zu vermeiden.