Zurück zur StartseiteWolfgang Tanzmeister

Webdesign

Website-Ladezeit verbessern: Was wirklich messbar hilft

Von Wolfgang Tanzmeister, Web-Resonanz8 Min. Lesezeit

Stoppuhr im warmen Sonnenlicht auf neutralem Untergrund
Ladezeit-Optimierung wird häufig zur Punktejagd in Testwerkzeugen. Interessant ist aber nur, was Besucher tatsächlich spüren: Wie schnell erscheint der Hauptinhalt, wie schnell reagiert die Seite und ob etwas springt. Dieser Ratgeber ordnet Maßnahmen nach realer Wirkung.

Die drei Messwerte verständlich erklärt

  • LCP (Largest Contentful Paint): Wann ist das größte sichtbare Element – meist das Hauptbild oder die Überschrift – fertig geladen? Das ist der Moment, in dem sich eine Seite „da" anfühlt.
  • INP (Interaction to Next Paint): Wie lange dauert es nach einem Klick oder Tippen, bis sichtbar etwas passiert? Hohe Werte entstehen fast immer durch zu viel JavaScript.
  • CLS (Cumulative Layout Shift): Wie stark springt das Layout beim Laden? Ursache sind Bilder und eingebettete Elemente ohne feste Größenangabe.

Maßnahmen nach Wirkung

1. Bilder – fast immer der größte Hebel

Ein unkomprimiertes Foto direkt aus der Kamera ist schnell fünf Megabyte groß und wird in einem Bereich von 800 Pixel Breite angezeigt. Richtig gemacht: passende Größe ausliefern, im WebP-Format komprimieren, width und height setzen (verhindert Layoutsprünge) und alles unterhalb des sichtbaren Bereichs mit loading="lazy" verzögern. Das Hauptbild bleibt bewusst ausgenommen – es soll früh geladen werden.

2. Drittanbieter-Skripte ausmisten

Chat-Widgets, Tracking, Karten, Bewertungs-Einbindungen und Schriftdienste laden Code von fremden Servern, den Sie nicht kontrollieren. Prüfen Sie jedes einzelne Skript: Wird es genutzt? Muss es sofort laden oder erst bei Interaktion? Eine Karte lässt sich als Standbild mit Klickfläche einbinden, ein Chat-Widget erst nach dem ersten Scrollen nachladen.

3. Schriften selbst hosten

Extern geladene Schriften kosten eine zusätzliche Verbindung und blockieren die Textdarstellung. Selbst gehostet, auf die tatsächlich verwendeten Schnitte reduziert und mit font-display: swap ausgeliefert, verschwindet dieser Effekt weitgehend – nebenbei ist es die datenschutzfreundlichere Variante.

4. Nur laden, was gebraucht wird

Ungenutztes CSS aus Vorlagen, Icon-Bibliotheken mit tausend Symbolen für fünf verwendete, Animationsbibliotheken für einen Effekt: Solcher Ballast summiert sich. Auf Mobilgeräten lohnt es sich zusätzlich, aufwendige Animationen und Filter zu reduzieren.

Richtig messen

Testwerkzeuge liefern Laborwerte unter simulierten Bedingungen – gut für die Fehlersuche, nicht als absolutes Urteil. Aussagekräftiger sind Felddaten echter Besucher, sichtbar in der Search Console. Messen Sie immer mobil, mehrfach und nach jeder Änderung einzeln, sonst wissen Sie nicht, welche Maßnahme gewirkt hat.

Was meist nichts bringt

  • Punktejagd im Testwerkzeug, während der Hauptinhalt weiterhin spät erscheint.
  • Caching-Module, die nur das Symptom eines überladenen Systems kaschieren.
  • Serverwechsel, solange die Seite fünf Megabyte Bilder ausliefert.

Fazit

Schnelle Seiten entstehen nicht durch ein Werkzeug, sondern durch Weglassen. Wer Bilder diszipliniert behandelt, fremde Skripte hinterfragt und Schriften selbst ausliefert, erreicht in den meisten Projekten gute Werte – ohne aufwendige Spezialtechnik.

Ladezeit im roten Bereich?

Ich analysiere Ihre Seite, priorisiere die Maßnahmen nach Wirkung und setze sie um.

Projekt anfragen

Begriffe kurz erklärt

Die Begriffe, die in Webdesign- und KI-Projekten am häufigsten erklärt werden müssen – jeweils in einem Satz definiert, danach eingeordnet.

Individuelles Webdesign
Individuelles Webdesign bezeichnet eine Website, deren Layout, Typografie und Funktionen eigens für ein Unternehmen entworfen und entwickelt werden, statt ein vorgefertigtes Template zu befüllen.
Abgrenzung: Ein Baukasten-Template ist fertig gestaltet und wird nur mit Inhalten gefüllt. Individuelles Webdesign beginnt bei Zielgruppe und Marke und endet bei einer Struktur, die nur zu diesem Unternehmen passt.
Auch bekannt als: maßgeschneidertes Webdesign, Custom Webdesign, individuelle Website
One-Pager
Ein One-Pager ist eine Website, die alle Inhalte auf einer einzigen, scrollbaren Seite darstellt und über Sprungmarken navigiert wird.
Geeignet für klar umrissene Angebote mit einem Hauptziel, etwa einer Kontaktanfrage. Umsetzungsdauer bei Web-Resonanz: typischerweise 1–2 Wochen.
Auch bekannt als: Onepager, Single-Page-Website, One-Page-Website
Multipager
Ein Multipager ist eine Website mit mehreren eigenständigen Unterseiten, die jeweils ein eigenes Thema, eine eigene Leistung oder eine eigene Zielgruppe abdecken.
Sinnvoll, sobald mehrere Leistungen einzeln gefunden werden sollen: Jede Unterseite kann in Suchmaschinen und KI-Antworten separat ranken. Umsetzungsdauer: typischerweise 2–3 Wochen.
Auch bekannt als: Multipage-Website, Mehrseiter
Responsive Design
Responsive Design ist eine Bauweise, bei der sich das Layout einer Website automatisch an die Bildschirmgröße des Geräts anpasst – vom Smartphone bis zum großen Monitor.
Kein Zusatzfeature, sondern Grundvoraussetzung: Der überwiegende Teil der Erstbesuche auf Websites von Selbstständigen erfolgt mobil.
Auch bekannt als: mobile Optimierung, mobilfreundliche Website
SEO (Suchmaschinenoptimierung)
SEO umfasst alle technischen und inhaltlichen Maßnahmen, die dafür sorgen, dass eine Website in Suchmaschinen wie Google zu passenden Suchanfragen gefunden wird.
Technische Basis (Ladezeit, Struktur, Metadaten, strukturierte Daten) wird beim Bau gelegt. Inhaltliche Sichtbarkeit entsteht danach über Texte, die konkrete Fragen beantworten.
Auch bekannt als: Suchmaschinenoptimierung, Search Engine Optimization
GEO (Generative Engine Optimization)
GEO bezeichnet die Optimierung von Inhalten für generative KI-Suchsysteme wie ChatGPT, Google AI Overviews, Gemini, Claude oder Perplexity, die Antworten formulieren statt Linklisten auszugeben.
Zentrale Hebel: eindeutig benannte Entitäten, zitierfähige Ein-Satz-Definitionen, konsistente Fakten über alle Seiten hinweg, strukturierte Daten und eine maschinenlesbare Zusammenfassung (llms.txt).
Auch bekannt als: AI Search Optimization, KI-Suchmaschinenoptimierung, Answer Engine Optimization
CMS (Content-Management-System)
Ein CMS ist eine Verwaltungsoberfläche, über die Inhalte einer Website ohne Programmierkenntnisse geändert werden können.
Ein CMS lohnt sich, wenn Inhalte regelmäßig selbst gepflegt werden. Bei seltenen Änderungen ist die direkte Pflege durch den Entwickler oft günstiger und schneller.
Auch bekannt als: Content Management System, Redaktionssystem
KI-Assistent
Ein KI-Assistent ist ein auf firmenspezifische Inhalte trainiertes Sprachmodell, das wiederkehrende Aufgaben wie Kundenanfragen, Terminvereinbarungen oder Lead-Qualifizierung rund um die Uhr übernimmt.
Er ersetzt keine persönliche Beratung, sondern filtert und beantwortet Standardfälle, bevor ein Mensch übernimmt.
Auch bekannt als: KI-Chatbot, AI Assistant, KI-Service-Assistent

Weitere Ratgeber

Über den Autor

Wolfgang Tanzmeister ist Webdesigner und Entwickler aus Wien und betreibt Web-Resonanz als Ein-Personen-Studio. Er begleitet Selbstständige und kleine Unternehmen von der Konzeption bis zur laufenden Betreuung – ohne Agentur-Zwischenebenen, mit KI als Werkzeug statt als Ersatz für persönliche Beratung.

Kontakt: office@web-resonanz.at · +43 699 18106505