Performance
Ladezeit optimieren: Website schneller machen
Konkrete Maßnahmen, um die Ladezeit deiner Website zu reduzieren, Core Web Vitals zu verbessern und Besucher nicht durch lange Wartezeiten zu verlieren.
Mateusz Viola Inhalt
Jede Sekunde Ladezeit kostet Nutzer. Studien zeigen, dass Websites, die länger als drei Sekunden brauchen, einen erheblichen Teil der Besucher verlieren, bevor die Seite überhaupt vollständig geladen ist. Suchmaschinen werten Ladezeit als Rankingfaktor. Schnelle Seiten performen besser in jeder Hinsicht.
Wo die Zeit vergeht
Bevor du optimierst, musst du verstehen, wo deine Website Zeit verliert. Die Browser-Entwicklertools (F12) zeigen im Reiter “Netzwerk” jede einzelne Anfrage mit Dauer. Alternativ liefern kostenlose Werkzeuge wie PageSpeed Insights von Google oder WebPageTest.org detaillierte Auswertungen mit konkreten Verbesserungsvorschlägen.
Die wichtigsten Metriken im Überblick:
Time to First Byte (TTFB): Wie lange dauert es, bis der Browser das erste Byte der HTML-Antwort erhält? Ein hoher Wert deutet auf langsame Server-Verarbeitung oder fehlende Caches hin.
Largest Contentful Paint (LCP): Wann ist das größte sichtbare Element geladen? Google empfiehlt unter 2,5 Sekunden.
Cumulative Layout Shift (CLS): Wie sehr verschieben sich Elemente beim Laden? Springende Seiten frustieren Nutzer und sorgen für versehentliche Klicks.
Interaction to Next Paint (INP): Wie schnell reagiert die Seite auf Nutzereingaben? Unter 200 ms gilt als gut.
Bilder optimieren
Bilder sind in den meisten Websites die größten Dateimengen. Drei Hebel bringen sofortige Ergebnisse:
Dimensionen anpassen: Ein Bild, das 2000 Pixel breit angelegt wurde aber maximal 800 Pixel breit dargestellt wird, lädt unnötig viel Daten. Verkleinere Bilder auf die tatsächlich benötigte Größe.
Format wechseln: WebP statt JPEG oder PNG spart je nach Bild 25 bis 50 Prozent Dateigröße bei vergleichbarer Qualität. Die meisten modernen Build-Tools und CMS-Plugins können diesen Schritt automatisieren.
Lazy Loading: Bilder, die erst nach dem Scrollen sichtbar werden, müssen nicht sofort geladen werden. Das HTML-Attribut loading="lazy" teilt dem Browser genau das mit und ist ohne JavaScript nutzbar.
JavaScript und CSS reduzieren
Jede JavaScript-Datei, die der Browser lädt und ausführt, blockiert das Rendering. Einige Strategien:
Code-Splitting: Lade nur den JavaScript-Code, der für die aktuelle Seite benötigt wird. Moderne Build-Tools wie Vite oder Webpack unterstützen das automatisch.
Ungenutzte Abhängigkeiten entfernen: Prüfe regelmäßig, welche npm-Pakete noch wirklich verwendet werden. Tools wie depcheck helfen dabei.
CSS minimieren: Entferne ungenutzte CSS-Regeln mit Tools wie PurgeCSS. Eine große CSS-Datei mit Hunderten ungenutzter Klassen verlangsamt das erste Rendering.
Render-blocking vermeiden: Vermeide <link rel="stylesheet"> im <head> für nicht-kritisches CSS. Lade kritisches CSS inline und den Rest asynchron.
Server-seitige Optimierungen
Kompression aktivieren: GZip oder Brotli komprimieren HTML, CSS und JavaScript vor der Übertragung auf 20 bis 30 Prozent der Originalgröße. Nahezu jeder Webserver unterstützt das, oft muss es nur eingeschaltet werden.
HTTP/2 oder HTTP/3 nutzen: Neuere HTTP-Versionen erlauben mehrere parallele Anfragen über eine einzige Verbindung. Das reduziert die Auswirkungen von Request-Overhead erheblich.
Server-Caching: Dynamisch generierte Seiten werden bei jedem Aufruf neu berechnet. Mit einem serverseitigen Cache (z.B. Varnish, Redis oder der eingebaute Cache eines CMS) wird das Ergebnis zwischengespeichert und sofort ausgeliefert.
CDN einsetzen
Ein Content Delivery Network stellt Ressourcen von Servern aus, die geografisch nahe beim Nutzer stehen. Statt einer Anfrage von Hamburg nach Frankfurt oder gar in ein US-amerikanisches Rechenzentrum antwortet ein Knoten in der Nähe. Das reduziert Latenz um Dutzende von Millisekunden.
Für statische Ressourcen wie Bilder, CSS und JavaScript ist ein CDN besonders wirkungsvoll. Cloudflare bietet eine kostenfreie Einstiegsstufe, die auch für kleinere Websites sinnvoll ist.
Monitoring nach der Optimierung
Ladezeit-Optimierung ist kein einmaliger Vorgang. Jedes Deployment kann neue Performance-Probleme einführen: eine vergessene console.log-Anweisung, ein neues großes Bild, ein zusätzliches Analytics-Skript. Regelmäßige Prüfungen mit diesem Tool und mit PageSpeed Insights zeigen, ob die Verbesserungen über Zeit erhalten bleiben.
Richte automatische Performance-Tests im CI/CD-Prozess ein, damit Regressionen gar nicht erst produktiv gehen. Das spart im Nachhinein deutlich mehr Zeit als die manuelle Suche nach einem langsam eingeführten Flaschenhals.
Häufige Fragen
Was ist ein guter Wert für die Time to First Byte (TTFB)?
Google empfiehlt einen TTFB-Wert unter 800 Millisekunden für eine gute Nutzererfahrung. Unter 200 ms gilt als ausgezeichnet. Werte über 1,8 Sekunden sind verbesserungswürdig und können auf Server-Probleme, zu viele ungecachte Datenbankabfragen oder ein fehlendes CDN hinweisen.
Welches Bildformat sollte ich auf meiner Website verwenden?
WebP bietet bei gleicher visueller Qualität deutlich kleinere Dateigrößen als JPEG oder PNG, etwa 25 bis 35 Prozent. AVIF ist noch effizienter, wird aber nicht von allen Browsern unterstützt. Verwende WebP als primäres Format mit JPEG als Fallback, und nutze das HTML-Element 'picture' für die Auswahl des besten Formats durch den Browser.
Was bewirkt Browser-Caching?
Mit Browser-Caching teilst du dem Browser mit, wie lange er Ressourcen wie Bilder, CSS und JavaScript lokal speichern darf, ohne sie erneut vom Server anzufragen. Beim zweiten Seitenaufruf lädt der Browser diese Dateien aus dem Cache statt aus dem Netz, was die Ladezeit drastisch verkürzt.
Quellen
- web.dev/performance von Google (Leitfaden zu Core Web Vitals und Ladezeit-Optimierung)
Über die Autorenschaft
Mateusz Viola
Betreiber und redaktionelle Verantwortung website-status-checker.de
Themengebiet: Mathematik, Kalenderrechnung, Schaltjahre, Statistik und ISO 8601
Mehr über Mateusz Viola →Verwandte Artikel
Grundlagen
Website-Status prüfen: So geht es richtig
Was bedeutet es, den Status einer Website zu prüfen? Dieser Leitfaden erklärt die Grundlagen, welche Methoden es gibt und worauf es ankommt.
Lesezeit 6 Min.
HTTP
HTTP-Statuscodes erklärt: 2xx, 3xx, 4xx und 5xx
Eine vollständige Übersicht der wichtigsten HTTP-Statuscodes mit Erklärungen, was sie bedeuten und wann sie auftreten.
Lesezeit 7 Min.
HTTP
404 Not Found: Was dieser Fehler bedeutet und wie man ihn behebt
Der HTTP-Fehler 404 ist einer der bekanntesten Codes im Web. Dieser Artikel erklärt, warum er auftritt und wie man ihn richtig behebt.
Lesezeit 6 Min.