Ladezeit verbessern:
warum es fast immer die Bilder sind

Warum lädt deine Seite langsam?

Weil Bilder geladen werden, die viel größer sind als die Fläche, auf der sie erscheinen. Eine Aufnahme aus einer heutigen Kamera oder einem Telefon ist mehrere Tausend Pixel breit und einige Megabyte groß. Angezeigt wird sie oft in einer Spalte von 600 Pixeln.

Der entscheidende Punkt: Der Browser verkleinert erst, nachdem er die Datei vollständig geladen hat. Die Verkleinerung im Layout spart also keinen einzigen Kilobyte. Wer zehn solche Bilder auf einer Seite hat, überträgt zweistellige Megabyte, damit am Ende ein paar Hundert Kilobyte sichtbar sind.

Das gilt unabhängig von der Plattform. Ein Baukasten nimmt dir einen Teil davon ab, indem er selbst Größen erzeugt - verlässlich ist das nicht, und beschnitten wird dabei oft anders als gewollt. Warum das beim Umzug zum Thema wird, steht in Squarespace verlassen.

Wie groß darf ein Bild sein?

Ungefähr so groß, wie es angezeigt wird - bei hochauflösenden Bildschirmen in doppelter Kantenlänge. Für die Praxis heißt das: die Anzeigebreite messen, verdoppeln, und das Bild in dieser Breite ablegen.

Was das ausmacht, lässt sich an dieser Website selbst zeigen. Vor der Aufbereitung wog sie 18,9 Megabyte, weil alle Bilder in Originalgröße eingebunden waren. Nach der Umstellung auf Anzeigegrößen und ein modernes Format sieht die Bilanz so aus:

Beide Werte sind kalt gemessen, also ohne Zwischenspeicher im Browser. Am Layout hat sich dabei nichts geändert und an der Bildqualität auf dem Bildschirm nichts Sichtbares - es wurden nur keine Daten mehr übertragen, die niemand sieht.

Was bringt ein modernes Bildformat?

Ein Bild in AVIF oder WebP braucht für dieselbe Ansicht deutlich weniger Daten als dasselbe Bild als JPEG oder PNG. Der Gewinn liegt je nach Motiv im Bereich von der Hälfte bis zu einem Vielfachen.

Fotos gehören dabei nicht in PNG. PNG ist für Flächen und Grafiken mit klaren Kanten gedacht - ein Foto darin abzulegen erzeugt eine sehr große Datei ohne sichtbaren Gewinn. Das ist der einzelne Fehler, der auf gewachsenen Seiten am häufigsten steckt.

Auf dieser Seite liegen alle Bilder als AVIF in Anzeigegröße, erzeugt aus den unveränderten Originalen. Die Originale bleiben liegen; die Ableitungen entstehen aus einem Skript und sind jederzeit neu baubar. Damit ist die Aufbereitung nicht Handarbeit, die beim nächsten Bild wieder anfällt.

Was kostet Ladezeit außer Bildern noch?

Schriften und eingebettete Fremdinhalte, in dieser Reihenfolge. Beide sind kleiner als das Bildproblem und beide leicht zu übersehen.

• Schriften: Eine vollständige Schriftdatei enthält Zeichen für Sprachen, die deine Seite nie zeigt. Auf das Nötige beschnitten und als WOFF2 abgelegt, bleibt ein Bruchteil übrig.
• Eingebettete Inhalte: Ein Kartenausschnitt, ein Videofenster oder ein Terminkalender von einem fremden Anbieter lädt dessen ganze Umgebung mit. Erst laden, wenn jemand darauf klickt, löst das.
• Zählwerkzeuge und Einwilligungsbanner: Häufig mehrere Dateien für eine Aufgabe, die eine erledigen würde.

Was hier nicht steht, ist der Server. Bei einer statisch gebauten Seite liefert er fertige Dateien aus und ist praktisch nie die Ursache - warum das so ist, steht in warum ich keinen Baukasten nutze.

Wie prüfe ich das selbst?

Mit dem Netzwerkbereich in den Entwicklerwerkzeugen deines Browsers, ohne Zusatzsoftware. Öffne deine Seite, öffne die Entwicklerwerkzeuge, wechsle auf „Netzwerk" und lade neu. Unten steht, wie viele Daten übertragen wurden.

Die zweite Zahl, auf die es ankommt, steht in derselben Liste: sortiere nach Größe. Steht dort ein Bild mit mehreren Megabyte, hast du die Ursache gefunden, und zwar ohne Messwerkzeug und ohne Deutung.

Öffentliche Prüfdienste geben zusätzlich eine Bewertung aus. Die ist als Hinweis brauchbar und als Ziel ungeeignet - eine Seite, die auf eine Punktzahl hin gebaut wird, ist nicht dieselbe wie eine Seite, die schnell lädt. Was in einem Website-Projekt dazugehört, ist die Aufbereitung, nicht die Punktzahl.

Häufige Fragen

Verliere ich beim Verkleinern Bildqualität?

Auf dem Bildschirm normalerweise nicht. Entscheidend ist, dass das Bild mindestens so viele Pixel hat, wie die Anzeigefläche auf einem hochauflösenden Bildschirm braucht - darüber hinaus siehst du keinen Unterschied. Wichtig ist der zweite Teil: die Originale bleiben unangetastet liegen, aufbereitet werden nur Kopien.

Muss ich meine Bilder selbst verkleinern?

Nein, das ist Teil des Projekts. Du lieferst die Originale, ich erzeuge daraus die Anzeigegrößen. Für spätere Bilder in der Betreuung gilt dasselbe: du schickst das Original, die Aufbereitung passiert hier. Selbst verkleinern führt fast immer dazu, dass ein Bild zu klein wird und nicht mehr scharf ist.

Zählt Ladezeit für Google?

Google nennt Ladezeit als einen Faktor unter vielen und stellt eigene Messwerte dafür bereit. Wie stark sie wiegt, verrät Google nicht, und niemand kann dir daraus eine Position versprechen. Der handfestere Grund ist ein anderer: Wer auf dem Telefon drei Sekunden auf ein Bild wartet, ist vorher weg.

Was ist mit Videos?

Videos gehören nicht direkt auf die Seite gelegt, sondern zu einem Anbieter, der sie ausliefert und dabei nachlädt. Ein Video als Datei auf der eigenen Seite überträgt bei jedem Aufruf die vollständige Größe. Wenn ein Video Teil der Gestaltung ist, wird es kurz, tonlos und stark verkleinert eingesetzt.

Was du als Nächstes tun kannst

Öffne deine Seite, sortiere im Netzwerkbereich des Browsers nach Größe und schau dir die drei obersten Einträge an. Wenn dort Bilder mit mehreren Megabyte stehen, kennst du deine Ursache - und wir können im Erstgespräch direkt darüber reden, statt zu vermuten.

---

Erstgespräch buchen