Website-Performance · Ladezeiten-Optimierung

Website Optimieren:
Ladezeiten & Performance

Jede Sekunde zählt. Wie externe Tools, Bilder und Dateistrukturen Ihre Ladegeschwindigkeit beeinflussen – und wie Sie gegensteuern.

März 2023 3 Min. Lesezeit Praxisbericht
86
PageSpeed-Score
mobil (mit Chatbot)
−10–20 %
Performance-Verlust
pro externem Tool
2 s
bis Besucher
abspringen

Website Optimierung: Ein zweischneidiges Schwert

Die Gestaltung der eigenen Website ist oftmals ein zweischneidiges Schwert. Beliebte Funktionen von Drittanbietern – das Einbinden von Google Maps, YouTube-Videos, ein Chatbot oder sonstige nützliche Hilfsmittel zum Analysieren und Betreiben der Webseite – wirken sich negativ auf die Ladegeschwindigkeit aus. Hier gilt es abzuwägen, welche Funktionen essentiell sind und man daher den Verlust an Geschwindigkeit in Kauf nehmen möchte.

Eine weitere Überlegung könnte darin bestehen, bestimmte Funktionen nur auf speziellen Unterseiten einzurichten. Wie wäre zum Beispiel die Einbindung des eigenen Standorts mit Google Maps nur auf der Kontaktseite anstatt direkt auf der Hauptseite?

Weniger ist oft mehr – aber nur, wenn das Wenige gut optimiert ist.

Auf meiner eigenen Seite habe ich aktuell einen Chatbot nur auf der Startseite. Ich gehe damit bewusst den Verlust einiger Leistungspunkte bei der Ladegeschwindigkeit ein und priorisiere die Funktion, per wenigen Klicks mögliche Fragen zu beantworten. Geht ein Besucher gezielt auf eine Unterseite, gehe ich davon aus, dass dieser bereits weiß, wo er seine gewünschte Information findet.

Dieses Vorgehen setzt aber eine starke Optimierung der Ladezeiten voraus. Nach einem aktuellen Pagespeed-Test mit den Insights von Google steht mein jetziger Score bei einer soliden 86 für mobile Geräte. Mit dem Einsatz weiterer externer Tools würde der Leistungs-Score weiter sinken. Der Einsatz von zu vielen externen Tools sollte daher genau überlegt sein – er kostet uns am Ende 10–20 % der Performance, die wir mühevoll erst optimieren müssen.

Website optimieren – Google PageSpeed Insights Score meiner Website
Aktueller Google PageSpeed Score auf bruegmann.tech · Quelle: PageSpeed Insights

Was die Ladegeschwindigkeit Ihrer Website wirklich bestimmt

Die wichtigsten Punkte kurz zusammengefasst – damit Sie Ihre Ladegeschwindigkeit gezielt verbessern können.

Faktor 1

Bilder auf der Website optimieren

Bei Bildern gibt es viele kleine Verbesserungen vorzunehmen. Den größten Einfluss hat oft die Bildgröße selbst. Wenn Sie eine Grafik am Rand des Textes anzeigen wollen, muss diese keine Auflösung von 5 000 × 2 500 Pixeln haben. Komprimieren Sie die Grafik – allein dieser Schritt spart erheblich Zeit, denn kleinere Bilder werden schneller geladen.

Neben JPG und PNG sollten Sie unbedingt das Dateiformat WebP kennen. Besonders da es von Google selbst entwickelt wurde, um Ladezeiten zu verkürzen und Dateien noch einmal deutlich kleiner zu machen.

Wenn Ihre Bilder sich mit der Bildschirmauflösung des Besuchers skalieren und keine feste Größe haben, gibt es die Möglichkeit, unterschiedliche Ressourcen für dasselbe Bild bereitzustellen – Ihre Website liefert dann automatisch das am besten passende Format aus. In HTML wird dies über die Tags <picture>, <source> und das Attribut srcset realisiert.

Faktor 2

HTTP-Requests optimieren

Das klingt fachspezifisch, ist aber schnell erklärt: Hinter dem Begriff verbirgt sich der Zugriff auf Dateien, die unsere Website beschreiben (.css-Dateien) oder Aktionen per Skript steuern (.js-Dateien). Pro Seite werden oft mehrere solcher Dateien geladen – bei WordPress-Seiten kann jedes installierte Plugin eine eigene .css-Datei mitbringen.

Für jede dieser Dateien schickt der Webserver einen HTTP-Request. Je mehr Requests, desto höher die Ladezeit. Die Lösung: mehrere Dateien zusammenführen und dadurch nur noch einen größeren HTTP-Request zu versenden.

Weniger Requests = schnellere Seite. Es klingt simpel – und ist es auch.
Faktor 3

Statische Dateien optimieren: Caching, Ladereihenfolge & GZIP

Caching: Geladene Daten werden im Zwischenspeicher gespeichert, sodass beim nächsten Besuch nur noch neue Daten geladen werden müssen. Das reduziert die Anzahl der HTTP-Requests deutlich und führt zu einem spürbaren Performance-Anstieg, sobald die ersten Ressourcen einmalig geladen wurden. Bei globalen Webseiten wird an dieser Stelle auch das Thema CDN interessant, um physische Übertragungswege zu verkürzen.

Ladereihenfolge: Im <head>-Bereich einer Website sollten grundsätzlich nur .css-Dateien geladen werden, da sie essentiell für die Darstellung sind. JavaScript-Dateien hingegen können problemlos am Ende geladen werden und sollten mit dem Attribut async ergänzt werden. Skripte ohne große Priorität können zusätzlich das Attribut defer erhalten – sie werden dann erst geladen, wenn alles andere fertig ist.

GZIP-Komprimierung: Diese Technik komprimiert alle Website-Dateien serverseitig, bevor sie übertragen werden. Alle modernen Browser unterstützen GZIP, sodass keine negativen Auswirkungen oder besondere Browsereinstellungen zu befürchten sind. Schlanker Code ohne unnötige Leerzeichen, Kommentare und ungenutzten Code rundet diesen Faktor ab – nach dem Motto: Kleinvieh macht auch Mist.

Ladezeiten optimieren lohnt sich – immer

Langsame Webseiten sind ein großes Ausschlusskriterium für Besucher. Sie kennen das wahrscheinlich selbst: Sie klicken auf eine Internetseite in der Google-Suche und nach 2 Sekunden passiert immer noch nichts – und sofort werden Sie als Nutzer nervös.

Durch viele kleine Website-Optimierungen lassen sich Ladezeit-Probleme sehr gut in den Griff bekommen – und die Mühe lohnt sich, weil Ladegeschwindigkeit auch ein SEO-Faktor für Google ist.

Zusammenfassend sollten Sie daher folgende Punkte beachten:

  • Optimierung Ihrer Bilder (komprimieren, WebP-Dateiformat, srcset für responsive Bilder)
  • Statische Inhalte richtig behandeln (Caching, GZIP-Komprimierung, richtiger Ladezeitpunkt)
  • HTTP-Request-Anzahl reduzieren (CSS/JS-Dateien zusammenführen)

Das Ziel: Die zu ladende Gesamtgröße aller Inhalte reduzieren und so wenig HTTP-Requests wie möglich versenden.


Externe Tools gezielt einsetzen

Jedes externe Tool kostet Performance. Hinterfragen Sie bei jedem Drittanbieter-Dienst, ob er auf jeder Seite wirklich notwendig ist – oder ob er auf spezifische Unterseiten beschränkt werden kann.

Frederik Brügmann
Frederik Brügmann · bruegmann.tech
Fullstack-Entwickler · Praxisbericht
Eine performante Website erfreut nicht nur Ihre Besucher – sie verbessert auch Ihr Google-Ranking. Beides zusammen ist kein Zufall, sondern das Ergebnis konsequenter Optimierung.

Häufige Fragen zur Ladezeiten-Optimierung

Antworten auf die Fragen, die Website-Betreiber am häufigsten stellen.

Wie kann ich die Ladegeschwindigkeit meiner Website verbessern?
Die wichtigsten Stellschrauben sind: Bildoptimierung (Komprimierung, WebP-Format, srcset), Reduzierung von HTTP-Requests durch Zusammenführen von CSS- und JS-Dateien, Caching für statische Inhalte sowie GZIP-Komprimierung auf Serverseite. Schon kleine Verbesserungen in diesen Bereichen können den Google PageSpeed Score merklich steigern.
Was ist das WebP-Dateiformat und warum sollte ich es nutzen?
WebP ist ein von Google entwickeltes Bildformat, das speziell für das Web optimiert wurde. Es erzielt deutlich kleinere Dateigrößen als JPG oder PNG bei vergleichbarer Qualität. Da es alle modernen Browser unterstützen, ist WebP heute die empfohlene Wahl für Bilder auf Websites.
Was sind HTTP-Requests und warum beeinflussen sie die Ladezeit?
Für jede Datei (CSS, JS, Bilder etc.), die eine Website lädt, wird ein separater HTTP-Request an den Webserver gesendet. Je mehr Requests, desto mehr Wartezeit entsteht. Durch das Zusammenführen mehrerer CSS- oder JS-Dateien zu einer einzigen Datei lässt sich die Anzahl der Requests und damit die Ladezeit deutlich reduzieren.
Was bewirkt GZIP-Komprimierung auf einer Website?
GZIP ist eine Kompressionstechnik, die der Webserver anwenden kann, bevor er Dateien an den Browser sendet. Die Dateigröße aller übertragenen Inhalte wird dadurch erheblich reduziert. Alle modernen Browser unterstützen GZIP, sodass keine Kompatibilitätsprobleme entstehen.
Warum sollte ich nicht zu viele externe Tools auf meiner Website einbinden?
Jedes externe Tool – ob Google Maps, Chatbot, Analyse-Skripte oder Social-Media-Plugins – lädt eigene Ressourcen und erzeugt zusätzliche HTTP-Requests. Das kostet messbar Performance. Es empfiehlt sich, externe Tools gezielt einzusetzen – z. B. Google Maps nur auf der Kontaktseite statt auf der Startseite.
Wirkt sich die Ladegeschwindigkeit meiner Website auf das Google-Ranking aus?
Ja. Die Seitengeschwindigkeit ist ein offizieller Google-Rankingfaktor und fließt über die Core Web Vitals in die Bewertung ein. Eine schnelle Website verbessert nicht nur die Nutzererfahrung, sondern auch die organische Sichtbarkeit in der Google-Suche.

Website optimieren?

Lassen Sie uns gerne über Ihre Optimierung sprechen.

E-Mail: frederik@bruegmann.tech
Telefon: +49 175 6657457



Kommentare:




Dirk Müller:

Gut und verständlich erklärt, Frederik!


28.04.2024