Dateigröße

Die Dateigröße einer HTML-Datei hängt von vielen verschiedenen Faktoren ab und beeinflusst die Ladezeit einer Webseite direkt. Trotz immer besserer und schnellerer Internetanbindungen, spielt die Dateigröße einer HTML-Datei immer noch eine wichtige Rolle, wenn es um die Ladezeit einer Webseite geht. Zu Zeiten als die Internetanbindung noch deutlich langsamer war, waren längere Ladezeiten üblich. Negativ beeinflusst wird die Ladezeit beispielsweise durch die Anzahl der Bilder. Daneben können aber auch die Anzahl der verwendeten Skripte negative Auswirkungen auf die Ladezeit einer Webseite haben. Um den Ladevorgang einer Webseite zu beschleunigen, sollten die Dateien eine möglichst geringe Größe aufweisen. Im Zeitalter vom mobilen Surfen sollte auch ein weiterer wichtiger Punkt berücksichtigt werden. Und zwar die Dateigröße von mobilen Webseiten. Häufig sind die zur Verfügung stehenden Datenvolumen bei mobile Devices begrenzt. Somit macht es durchaus Sinn, die Dateigröße mobiler Webseiten immer im Blick zu halten. Dateigrößen werden mit verschiedenen Einheiten angegeben: Kilo-, Mega- und Gigabyte. Eine feste Obergrenze für eine Webseite gibt es nicht. Zur Einordnung: Nach dem Web Almanac des HTTP Archive (Stand Oktober 2024) wog die mittlere Seite 2.652 Kilobyte (abgekürzt: kB) auf dem Desktop und 2.311 kB auf dem Smartphone — alles eingerechnet, also HTML, Bilder, Skripte und Stylesheets. Entscheidend ist heute weniger die reine Kilobyte-Zahl als das, was der Nutzer davon merkt; gemessen wird das über die Core Web Vitals (siehe unten).

Faktoren welche die Dateigröße entscheidend beeinflussen

Auch ohne festen Grenzwert gilt: Jedes Kilobyte, das nicht übertragen werden muss, beschleunigt die Seite. Es gibt zahlreiche Faktoren, welche Einfluss auf die Größe einer Datei haben.

Zunächst der Klassiker unter den Einflussfaktoren: Bilder! Bilder werden häufig in einer zu hohen Auflösung und Farbtiefe auf einer Webseite angezeigt. Sowohl eine zu hohe Auflösung als auch eine zu große Farbtiefe beeinflussen die Größe der Datei negativ. Verringert man diese beiden Faktoren, bieten sich eine Menge Einsparpotential. Die Folge: Die Ladezeit der Webseite bzw. der Bilder wird verringert. Neben Bildern, kann aber auch Dateigröße von eingebundenen Videos entscheidend sein. Das Video an sich ist umso größer, je größer das einzelne Bild ist. Zusätzlich spielt auch die Bildfrequenz eine Rolle. Je größer die Bilder sind und je schneller die Bildfrequenz ist, desto negativer wirkt sich dies auf die Gesamt-Dateigröße aus. Bei Audiodaten verhält es sich sehr ähnlich. Hier korreliert die Gesamt-Dateigröße mit der Tonqualität. Je besser die Qualität bzw. der Klang ist, desto größer ist die Datei.

Weiteren Einfluss auf die Ladezeit hat der verwendete HTML-Code. Der HTML-Code ist umso größer, je mehr Informationen in ihm enthalten sind. Hat man z. B. überproportional viele Bilder oder Zeichen im Quellcode verwendet, kann die entsprechende Datei schnell sehr groß werden und möglicherweise ein vorher definierte Maximalgröße überschreiten. Negativen Einfluss auf die Größe einer Datei haben sowohl JavaScript als auch eingebundene CSS-Dateien. Auch hier korreliert die Gesamtgröße der entsprechenden Datei mit der Gesamtzahl an verwendeten Zeichen. Umso mehr Code, desto größer die Datei.

Die Größe einer Datei lässt sich verringern

Möchte man die Dateigröße einzelner HTML-Dateien klein halten oder sogar verringern, gibt es verschiedene Mittel und Wege. Hier bietet sich beispielsweise eine Komprimierung der Dateien an. Grundsätzlich sollten alle Medien (Bilder, Videos, etc.) die in die Webseite eingebunden werden sollen, im Vorfeld komprimiert werden.

Textdateien — HTML, CSS und JavaScript — sollten serverseitig komprimiert ausgeliefert werden, in der Regel mit gzip oder Brotli; laut der HTTP-Dokumentation von MDN spart das bis zu 70 Prozent. Bereits komprimierte Formate wie Bilder, Audio und Video nimmt man davon aus: Eine zweite Komprimierung bringt dort nichts und kann die Datei sogar vergrößern. Bei Bildern empfehlen Google und web.dev heute die moderneren Formate WebP und AVIF, die bei gleicher Qualität deutlich kleiner ausfallen als JPG und PNG; JPG und PNG bleiben als Rückfallebene für ältere Browser sinnvoll. Möchte man Bilder für eine Webseite verwenden, sollte man sich im Vorfeld Gedanken über die gewählte Auflösung machen: Das Bild wird in der Größe ausgeliefert, in der es auch angezeigt wird — für verschiedene Bildschirmbreiten über das srcset-Attribut oder das picture-Element. Die width- und height-Attribute sollte man trotzdem immer setzen, allerdings nicht, um ein zu großes Bild zu verkleinern, sondern damit der Browser den Platz schon vor dem Laden reserviert und die Seite beim Aufbau nicht springt (Layout Shift). Bilder außerhalb des sichtbaren Bereichs lädt das Attribut loading="lazy" erst, wenn der Nutzer in ihre Nähe scrollt; das größte sichtbare Bild oben auf der Seite bleibt davon ausgenommen. Statt Bilder per iframe von fremden Servern einzubinden, liefert man statische Dateien heute über ein Content Delivery Network aus.

Die Dateigröße aus Sicht der Suchmaschinenoptimierung

Dass die Dateigröße aus Sicht der Suchmaschinenoptimierung eine nicht unbedeutende Rolle spielt, wird dadurch deutlich, dass Google die Core Web Vitals in seinen Ranking-Systemen verwendet. Das sind drei Messwerte: der Largest Contentful Paint (LCP) für die Ladezeit des größten sichtbaren Elements (gut: bis 2,5 Sekunden), der Interaction to Next Paint (INP) für die Reaktionszeit auf Eingaben (gut: bis 200 Millisekunden; er hat im März 2024 den First Input Delay abgelöst) und der Cumulative Layout Shift (CLS) für die visuelle Stabilität (gut: bis 0,1). Google betont dabei, dass gute Werte allein keine Spitzenplatzierung garantieren; die Relevanz des Inhalts bleibt wichtiger. Große Dateien verschlechtern vor allem den LCP, und hier besteht häufig noch eine Menge Optimierungspotential. Ein bekanntlich hohes Maß an Einsparpotential bieten Bild-Dateien. Wer bei Google nach Software für Bilderkomprimierung sucht, wird schnell fündig.

Für fast alle Webseitenbetreiber wird das Thema „mobile“ immer wichtiger. Vor allem für diejenigen, die einen Großteil ihres Traffics über mobile Devices generieren, sollten auf die Dateigröße achten. Das gilt erst recht dann, wenn auf der Webseite viele Bilder verwendet werden. Für den Webseitenbesucher ist das häufig sehr ärgerlich, da viel seines ohnehin limitierten Datenvolumens, für den Besuch einer „großen“ Webseite verbraucht wird.

Kleine Dateigrößen sind aber nicht nur aus Nutzersicht attraktiv. Für den Betreiber einer Webseite gibt es Einsparpotential bei den laufenden Serverkosten. Sind die Kosten nämlich abhängig vom generierten Traffic, können sich bei sehr vielen Webseitenaufrufen schon kleine Änderungen der Dateigröße bemerkbar machen. Auch hier bieten Bilder zumeist sehr großes Optimierungspotential. Schnell lassen sich 50 Prozent oder mehr der ursprünglichen Dateigröße einsparen.

Eine kleine Dateigröße bei Bildern wirkt sich ebenfalls positiv auf die Bildersuche bei Google aus. Legt man also Wert darauf, bei Google auch dort gefunden zu werden, sollten Bilder möglichst komprimiert sein; Google empfiehlt in seiner Dokumentation zur Bildersuche ausdrücklich responsive Bilder und aktuelle Optimierungstechniken, immer mit einer Rückfall-URL im src-Attribut. Zusätzlich sollte das Bild mit einem beschreibenden ALT-Attribut versehen sein — ohne Aneinanderreihung von Keywords. Die Google-Suche unterstützt die Bildformate BMP, GIF, JPEG, PNG, WebP, SVG und AVIF.