Seitengröße aufschlüsseln

Wir laden eine Seite so herunter, wie es der Browser eines Erstbesuchers täte, mit leerem Cache, und zählen jedes Byte, das über das Netz geht. Sie erhalten die Summe, ihre Herkunft und was wegfallen könnte.

Oder probieren Sie mozilla.org, wikipedia.org

Jede Datei hat zwei Größen

Es gibt die Größe einer Datei im Netz und die Größe, die sie entpackt hat. Angenommen, Ihr Server komprimiert ein Skript von 400 KB auf 110 KB. Der Besucher bezahlt 110 KB an Download und mobilen Daten, und sein Handy muss trotzdem alle 400 KB lesen. Dieses Tool bewertet die erste Zahl, die übertragenen Bytes, und zeigt die zweite daneben.

Bytes werden schnell zu Wartezeit. Mit dem langsamen 4G-Profil, das Lighthouse für seine Tests verwendet, 1,6 Megabit pro Sekunde, braucht eine 2-MB-Seite etwa zehn Sekunden zum Herunterladen, und das, bevor überhaupt ein Skript gelaufen ist.

Was heruntergeladen wird

Sobald das HTML da ist, fordert das Tool an, was ein Browser beim ersten Laden anfordern würde:

  • Stylesheets und Dateien, die mit rel="preload" oder modulepreload angekündigt sind;
  • Skripte mit einem src, außer nomodule-Fallbacks und Skripttypen, die ein Browser nicht ausführt;
  • Bilder: Bei srcset und <picture> nimmt es den größten Kandidaten, den ein Desktop-Browser wählen würde, und es liest data-src bei Bildern mit Lazy Loading;
  • Video-Vorschaubilder, das Favicon und Bilder in Inline-style-Attributen;
  • Schriften aus @font-face-Regeln (die WOFF2-Datei, wenn es eine gibt, höchstens zwölf Schriften) und Stylesheets, die mit @import eingebunden werden.

Einige Grenzen halten die Prüfung kurz: 80 Dateien, 6 MB pro Datei, 15 MB insgesamt. Hat eine Seite mehr als 80 Dateien, wird die Zahl der Anfragen mit „≥“ angezeigt.

Die Notenskala

NoteÜbertragene Größe
Abis 0,5 MB
Bbis 1 MB
Cbis 2 MB
Dbis 3,5 MB
Ebis 5 MB
Fmehr als 5 MB

Zur Einordnung: Die mittlere mobile Seite, die das HTTP Archive misst, wiegt etwa 2,3 MB, was hier ein D ergibt. Eine Seite kann also für das Web völlig durchschnittlich und trotzdem auf einem Handy langsam sein.

Was Sie mit den Befunden tun

Bilder über 200 KB
Fast immer ein Bild, das größer ausgeliefert als angezeigt wird. Exportieren Sie es in der angezeigten Breite, oder doppelt so breit für Bildschirme mit hoher Pixeldichte, und lassen Sie srcset Handys kleinere Versionen anbieten.
JPEG- oder PNG-Bilder
Wenn der Server es erlaubt, kodiert das Tool die acht schwersten Bilder neu als WebP (Qualität 80) und AVIF (Qualität 55) und zeigt die Größe jedes Ergebnisses. So wird die Ersparnis an Ihren eigenen Bildern gemessen. Liefern Sie das neue Format mit einem Fallback aus:
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="630" alt="…">
</picture>
Bilder ohne width und height
Hier geht es nicht ums Gewicht. Das ist der Grund, warum Text beim Laden der Seite herumspringt. Fügen Sie beide Attribute hinzu.
Unkomprimiert gesendete Textdateien
HTML, CSS, JavaScript oder SVG über 1,5 KB, die ohne gzip oder Brotli ankamen. Das Audit für Komprimierung und Cache enthält die Servereinstellungen.
Mehr als 1 MB JavaScript oder 300 KB Schriften
Entfernen Sie Bibliotheken und Plugins, die niemand nutzt, laden Sie den Rest nur auf den Seiten, die ihn brauchen, und behalten Sie zwei oder drei Schriftschnitte in WOFF2.

Die CO2-Zahl und was nicht mitgezählt wird

Die Schätzung folgt Version 4 des Sustainable-Web-Design-Modells. Sie rechnet 0,300 kWh pro übertragenem Gigabyte, was Rechenzentren, Netze und Endgeräte der Besucher samt deren Herstellung abdeckt, und multipliziert das mit einem Weltdurchschnitt von 494 g CO₂e pro kWh. Das ergibt etwa 0,15 g pro Megabyte. Der Vergleich mit einem Benzinauto verwendet 170 g pro Kilometer. Verstehen Sie das als Größenordnung, gut geeignet, um zwei Versionen einer Seite zu vergleichen.

Es wird kein JavaScript ausgeführt. Alles, was Skripte später laden, etwa Tag-Manager, Werbung, Chat-Widgets und beim Scrollen nachgeladene Bilder, fehlt in der Summe. Ebenso Hintergrundbilder, die in Stylesheets angegeben sind, und der Inhalt eingebetteter Videos. Das tatsächliche Gewicht liegt oft über der angezeigten Zahl.

Häufige Fragen

Was ist eine gute Seitengröße für eine Website?

Unter 1 MB übertragen ist ein komfortables Ziel für eine Inhaltsseite, unter 0,5 MB ist ausgezeichnet. Ab 2 MB warten Besucher in Mobilfunknetzen allein für den Download mehrere Sekunden.

Wie verkleinere ich eine Webseite?

Beginnen Sie mit den Bildern, denn sie machen meist den größten Anteil aus: Bringen Sie die Abmessungen in Ordnung und wechseln Sie dann zu WebP oder AVIF. Danach schalten Sie die Komprimierung für Textdateien ein, entfernen ungenutzte Skripte und reduzieren die Schriftdateien. Der Block „Was weg kann“ im Ergebnis listet das für Ihre Seite nach Wirkung geordnet auf.

Warum weicht die Größe vom Netzwerk-Tab in den Chrome DevTools ab?

Die DevTools zählen alles, was ein echter Browser lädt, auch von Skripten angeforderte Dateien, in der Größe Ihres eigenen Fensters und oft mit gefülltem Cache. Dieses Tool führt keine Skripte aus und misst einen ersten Besuch. Deaktivieren Sie den Cache in den DevTools, wenn Sie fair vergleichen möchten.

Beeinflusst die Seitengröße die SEO?

Nicht als Zahl für sich. Aber schwere Seiten haben oft einen langsamen Largest Contentful Paint, und der gehört zu den Core Web Vitals, die Google misst. Ihre Werte prüfen Sie mit dem Core-Web-Vitals-Bericht.

Ist AVIF besser als WebP?

AVIF-Dateien sind bei gleicher sichtbarer Qualität meist kleiner, besonders bei Fotos, und brauchen länger zum Kodieren. Aktuelle Versionen von Chrome, Firefox und Safari lesen beide. Der Umwandlungstest zeigt, welches Format bei jedem Ihrer Bilder gewinnt.

Wie genau ist die CO2-Schätzung?

Es ist ein Modell auf Basis der übertragenen Bytes und globaler Durchschnittswerte. Niemand hat Ihren Server oder Ihre Besucher gemessen. Für den Vergleich von Seiten untereinander reicht es, für eine CO2-Bilanz ist es viel zu grob.

Verwandte Checks