Große Webseiten

Im Kontext von Webseiten kann „Größe“ verschiedene Bedeutungen haben. Eine große Webseite kann viele Unterseiten umfassen, was dann eine umfangreiche Seitenanzahl und -struktur beschreibt. Hier geht es jedoch um die Größe einzelner HTML-Seiten. Im weiteren Verlauf zeige ich, wann eine Seite groß ist und ob das schlecht ist.

Denn: ob eine Seite zu groß ist, ist oft nicht die richtige Frage. Besser wäre es zu fragen „Wie schnell ist die Seite?„, bzw. „Ist die Seite zu langsam?„.

Woraus bestehen Websites eigentlich?

HTML (Hypertext Markup Language) ist die standardisierte Auszeichnungssprache, die zur Strukturierung und Darstellung von Inhalten im Web verwendet wird. Es definiert die Anordnung und den Aufbau von Elementen wie Überschriften, Texten, Bildern, Links und anderen Medien auf einer Webseite.

CSS definiert das visuelle Design der Webseite, inklusive Farben, Layouts und Abstände. Es sorgt dafür, dass die Seite ansprechend aussieht und für verschiedene Geräte angepasst ist.

Bilder unterstützen das Design und die Benutzererfahrung, können jedoch bei großen Dateigrößen die Ladezeit verlangsamen. Bilder gibt es in verschiedenen Formaten, wie JPEG für Fotos, da es eine gute Qualität bei kleiner Dateigröße bietet, PNG für Grafiken mit Transparenz, GIF für einfache Animationen und SVG für skalierbare Vektorgrafiken, die ideal für Logos und Icons sind.

Schriftarten (Fonts) sind ebenfalls eine Ressourcen, die das Design beeinflussen. Externe Webfonts können die Ladezeit verlängern, daher sollten sie sparsam und in optimierten Formaten eingebunden werden.

JavaScript bringt dynamische und interaktive Funktionen auf die Seite, wie Formulare, Animationen und Nutzerinteraktionen.

Anzahl der einzelnen Ressourcen klein vs. groß

Auf einer Webseite muss jede Ressource, sei es eine Datei, ein Skript oder ein Bild, über eine eigene URL geladen und verarbeitet werden. Dies hat sowohl auf kleinen als auch auf großen Webseiten Einfluss auf die Ladezeit und Performance.

Anzahl der einzelnen Ressourcen auf einer kleinen und einer großen Webseite:

1. Kleine Webseite
   • Anzahl der Ressourcen: 20 bis 50 URLs (z.B. HTML, CSS, JavaScript, Bilder, Schriftarten)
   • Typische Ressourcen: Eine HTML-Datei, 1-2 CSS-Dateien, 1-2 JavaScript-Dateien, 5-10 Bilder, 1-2 Schriftarten.
   • Lade- und Verarbeitungsaufwand: Aufgrund der geringeren Anzahl an Ressourcen werden weniger Anfragen gestellt und die Verarbeitung erfolgt schneller.
2. Große Webseite
   • Anzahl der Ressourcen: 100 bis 300+ URLs
   • Typische Ressourcen: 10+ CSS-Dateien, 10+ JavaScript-Dateien, 50+ Bilder, mehrere Schriftarten, zusätzliche eingebettete Ressourcen wie iframes, Videos oder externe Tracking-Skripte, die tlw. wiederum komplette Seiten sind.
   • Lade- und Verarbeitungsaufwand: Mehr Anfragen führen zu längeren Ladezeiten und mehr Rechenaufwand für den Browser, um alle Elemente zu laden und zu verarbeiten. Jede Ressource muss vom Server geladen und anschließend vom Browser interpretiert werden, was die Geschwindigkeit beeinträchtigen kann.

	Kleine Seite	Große Seite
HTML	1	1
CSS-Dateien	2-5	10+
JavaScript-Dateien	2-5	10+
Bilder	15-30	50+
Schrift­arten	1-3	5+
Externe Ressourcen (Werbung, iframes, APIs etc.)	0	1+
Gesamt­zahl Ressourcen	20 – 50	100+

Wie misst man die Geschwindigkeit einer Webseite?

Die Ladezeit (Page Load Time) ist die Zeitspanne, die eine Webseite benötigt, um alle Inhalte vollständig zu laden, nachdem sie vom Browser angefordert wurde. Sie umfasst das Laden aller Ressourcen wie HTML, CSS, Bilder und JavaScript. Gemessen wird sie in Sekunden oder Millisekunden, wobei der Zeitpunkt vom ersten Anfordern der Seite bis zum vollständigen Laden aller Inhalte gemessen wird. Tools wie Google PageSpeed Insights oder WebPageTest werden verwendet, um diese Zeit präzise zu erfassen.

First Contentful Paint (FCP) ist die Zeitspanne, die vom Start des Ladens einer Webseite bis zu dem Moment vergeht, an dem der erste sichtbare Inhalt, wie Text, Bilder oder andere Elemente, auf dem Bildschirm erscheint. Es misst, wann der Nutzer das erste Mal einen visuellen Hinweis darauf erhält, dass die Seite geladen wird. FCP wird in Millisekunden oder Sekunden gemessen und dient als Indikator dafür, wie schnell die erste sichtbare Reaktion der Seite erfolgt. Dieser Wert gibt einen ersten Hinweis darauf, wann der Nutzer die Webseite tatsächlich sieht.

Time to Interactive (TTI) ist die Zeitspanne, die vom Beginn des Ladens einer Webseite bis zu dem Punkt vergeht, an dem die Seite vollständig interaktiv ist. Das bedeutet, dass die Seite auf Benutzerinteraktionen wie Klicks, Scrollen und Eingaben ohne Verzögerung reagieren kann. TTI misst, wann alle notwendigen Ressourcen geladen sind und keine größeren blockierenden Prozesse mehr ablaufen. Es wird in Sekunden gemessen und ist ein wichtiger Indikator dafür, wann eine Seite bereit ist, uneingeschränkt genutzt zu werden.

Largest Contentful Paint (LCP) misst die Zeitspanne, die vom Start des Seitenladens bis zum Rendern des größten sichtbaren Elements auf dem Bildschirm vergeht. Dieses Element kann ein Bild, ein Video oder ein großer Textblock sein. LCP gibt Aufschluss darüber, wann der Hauptinhalt der Seite für den Nutzer sichtbar wird. Die Messung erfolgt in Sekunden, und der LCP ist ein wichtiger Faktor für die wahrgenommene Ladegeschwindigkeit der Webseite.

Total Blocking Time (TBT) misst die Zeitspanne, während der eine Webseite für den Nutzer blockiert ist und nicht auf Interaktionen wie Klicks oder Scrollen reagieren kann. TBT erfasst die Zeit zwischen dem First Contentful Paint (FCP) und dem vollständigen interaktiven Zustand der Seite (Time to Interactive, TTI). Es gibt an, wie lange JavaScript- oder andere Prozesse das Benutzererlebnis behindern. TBT wird in Millisekunden gemessen und ist ein wichtiger Indikator dafür, wie flüssig die Seite während des Ladevorgangs genutzt werden kann.

Cumulative Layout Shift (CLS) misst die visuelle Stabilität einer Webseite und gibt an, wie oft und in welchem Ausmaß sich sichtbare Elemente unerwartet während des Ladens verschieben. Ein hoher CLS-Wert bedeutet, dass Inhalte wie Bilder, Buttons oder Texte ihre Position ändern, was zu einer schlechten Benutzererfahrung führen kann, wenn der Nutzer versehentlich falsche Elemente anklickt oder scrollt. Der CLS-Wert wird als Summe aller Layoutverschiebungen während des Ladevorgangs ermittelt, wobei ein Wert von 0 als stabil gilt und Werte über 0,1 als problematisch angesehen werden.

Welcher Wert ist am wichtigsten?

Welcher Wert am wichtigsten ist, hängt vom jeweiligen Ziel ab. Für die Nutzererfahrung ist jedoch Largest Contentful Paint (LCP) besonders entscheidend. Der LCP gibt an, wann der Hauptinhalt der Seite sichtbar wird, was direkt die Wahrnehmung der Geschwindigkeit beeinflusst. Wenn der Nutzer sieht, dass der Inhalt schnell erscheint, wirkt die Seite reaktionsschnell und performant.

Während andere Werte wie Time to Interactive (TTI) und Total Blocking Time (TBT) ebenfalls relevant sind, ist LCP der aussagekräftigste Wert, um die wahrgenommene Ladegeschwindigkeit einer Webseite zu bewerten.

Welche Tools gibt es zur Messung?

Jeder moderne Browser (erreichbar mit F12): Die Developer Tools (DevTools) sind in allen gängigen Browsern integriert und bieten zahlreiche Funktionen zur Analyse und Optimierung von Webseiten. Die Netzwerkanalyse ist dabei besonders nützlich, um die Ladezeiten, Anfragen und Datenübertragungen einer Webseite im Detail zu untersuchen.

Google PageSpeed Insights: Ein kostenloses Online-Tool von Google, das die Leistung einer Webseite auf Desktop und Mobilgeräten analysiert. Es liefert einen Performance-Score und detaillierte Metriken wie FCP, LCP und TTI sowie konkrete Optimierungsvorschläge.

GTmetrix: Dieses Tool analysiert die Geschwindigkeit und Performance der Webseite und bietet umfassende Berichte über Ladezeit, Seitengröße und Anzahl der Anfragen. Es stellt auch Empfehlungen zur Optimierung bereit, basierend auf verschiedenen Performance-Metriken.

WebPageTest: Ein fortschrittliches Tool, das Tests unter verschiedenen Netzwerkbedingungen und aus verschiedenen geografischen Standorten ausführen kann. Es bietet detaillierte Ladezeit-Analysen und erlaubt die Betrachtung von einzelnen Ladeprozessen.

Lighthouse (im Chrome DevTools integriert): Lighthouse ist ein leistungsfähiges, integriertes Tool in Chrome, das detaillierte Analysen zu Performance, Zugänglichkeit, Best Practices und SEO bereitstellt. Es ist besonders nützlich, um die Performance direkt im Browser zu überprüfen und Optimierungen vorzunehmen.

Langsame Seiten: wenn man es dem Nutzer schwer macht

Langsame Webseiten sind nicht nur durch technische Faktoren wie Ladezeiten bedingt, sondern oft auch durch eine schlechte Informationsarchitektur und einen ineffizienten Seitenaufbau. Wenn Nutzer lange brauchen, um Inhalte zu verstehen, oder Schwierigkeiten haben, gewünschte Aktionen durchzuführen, kann dies ebenso problematisch sein wie technische Verzögerungen. Ein unübersichtliches Design, eine verwirrende Navigation oder eine Überfrachtung mit Informationen können dazu führen, dass der Nutzer unnötig viel Zeit auf der Seite verbringt, ohne sein Ziel zu erreichen.

Diese Probleme des Seitenaufbaus und der Informationsarchitektur, können auch eine Seite langsamer machen:

1. Unklare Navigation: Wenn die Menüstruktur nicht intuitiv ist oder wichtige Inhalte schwer zu finden sind, wird die Benutzerführung erschwert und die Nutzer verlieren schnell das Interesse.
2. Zu viele Optionen auf einer Seite: Überfrachtete Seiten mit zu vielen Auswahlmöglichkeiten oder Handlungsaufforderungen (Calls-to-Action) können den Nutzer überfordern und die Entscheidungsfindung erschweren.
3. Fehlende visuelle Hierarchie: Wenn Inhalte nicht klar strukturiert sind und keine visuelle Trennung zwischen wichtigen und weniger wichtigen Informationen besteht, kann der Nutzer Schwierigkeiten haben, relevante Inhalte schnell zu erfassen.
4. Unnötig lange Seiten: Lange Scrollseiten ohne klare Abschnitte oder Struktur können den Nutzer ermüden und wichtige Informationen untergehen lassen.
5. Inkonsistente Seitenelemente: Wenn Designelemente wie Buttons, Links oder Schriftgrößen von Seite zu Seite stark variieren, führt das zu Verwirrung und einem inkonsistenten Nutzererlebnis.
6. Zu viele Unterseiten: Wenn wichtige Informationen über zu viele Unterseiten verteilt sind, muss der Nutzer häufig klicken und navigieren, um relevante Inhalte zu finden, was die Benutzerfreundlichkeit mindert.
7. Mangelnde klare Handlungsaufforderungen (Calls-to-Action): Wenn es unklar ist, was der Nutzer als nächsten Schritt tun soll, wird die Interaktion erschwert und der Nutzen der Seite sinkt.

Folgen einer zu großen und zu langsamen Seite

• Verlieren wir potenzielle Kunden, weil die Seite zu lange lädt und sie ungeduldig abspringen?
• Kommen Bestandskunden weniger häufig wieder?
• Kaufen Kunden auf langsamen Seiten weniger oder brechen Sie Käufe ganz ab?
• Hat die lange Ladezeit negative Auswirkungen auf die Position in Suchmaschinen?
• Hat das langfristig Auswirkungen auf unsere Reputation?

Die Antwort auf diese Fragen ist Ja: potenzielle Kunden springen ab, Bestandskunden kommen seltener wieder, Käufe werden abgebrochen, die Suchmaschinenposition kann sich verringern, und langfristig kann die Reputation leiden.

Potenzielle Kunden springen häufig ab, wenn eine Webseite zu lange lädt. Untersuchungen zeigen, dass Nutzer bereits nach wenigen Sekunden Wartezeit dazu neigen, die Seite zu verlassen und eine Alternative zu suchen. Insbesondere im E-Commerce-Bereich führt eine längere Ladezeit oft zu höheren Absprungraten, was direkten Einfluss auf die Conversion-Rate und letztlich auf den Umsatz hat. Schnelle Ladezeiten sind daher entscheidend für die Benutzerfreundlichkeit und den Erfolg einer Webseite. Links: Studie von Google, Mobile Site Speed Playbook pdf von Google

Bestandskunden kommen seltener zurück, wenn sie wiederholt eine langsame Ladezeit auf einer Webseite erleben. Nutzer, die bereits eine Verbindung zu einem Unternehmen haben, erwarten eine gleichbleibend positive Erfahrung. Langsame Ladezeiten frustrieren und beeinträchtigen das Vertrauen in die Marke. Studien zeigen, dass wiederkehrende Besucher bei schlechten Ladeerfahrungen dazu neigen, alternative Anbieter zu bevorzugen, was langfristig die Kundenbindung und Loyalität gefährdet.

Akamai Report: „The State of Online Retail Performance“
Nielsen Norman Group: „Website Response Times and User Experience“

Lange Ladezeiten haben negative Auswirkungen auf die Position in Suchmaschinen. Allerdings nicht direkt: Google und andere Suchmaschinen berücksichtigen allerdings wie Nutzer mit einer Seite interagieren. Wenn die Ladezeit also eine negative Auswirkung auf diese Interaktion hat, dann wird es sich auch auf die Rankings auswirken.