Ladezeit der Webseite verbessern: zuerst die Bilder

Du hast 40 Urlaubsfotos in eine neue Kategorie geladen, schickst den Link an die Familie, und eine Stunde später kommt aus dem Zug die Rückmeldung: „Da sind nur leere Kästen, die sich ganz langsam füllen.“ Am eigenen Rechner mit schnellem Anschluss war alles sofort da. Genau an dieser Lücke zwischen deinem Schreibtisch und dem Handy deiner Besucher setzt du an, wenn du die Ladezeit der Webseite verbessern willst. Es zählt nicht, wie schnell die Galerie bei dir erscheint, sondern wie lange jemand mit mittelmäßigem Netz wartet, bis die ersten Fotos stehen. In einer Bildergalerie entscheiden darüber fast nur die Bilddateien.

Ladezeit der Webseite verbessern: Eine komprimierte Bilddatei fliegt zu einem schnell ladenden Browserfenster mit Tacho und Stoppuhr

Wohin die Wartezeit in einer Galerie fließt

Zerleg einen Seitenaufruf in seine Teile. Das HTML einer Kategorieseite ist eine Textdatei von wenigen Kilobyte, das Stylesheet bewegt sich in derselben Größenordnung. Den Rest machen die Bilder aus, und in einer Fotogalerie sind das schnell mehr als neun Zehntel der übertragenen Daten. Wer die Ladezeit der Webseite verbessern will und dafür an Schriften, Skripten oder dem Quelltext feilt, während in der Übersicht Fotos in voller Kameraauflösung stecken, poliert die falsche Stelle.

Für eine Überschlagsrechnung brauchst du nur eine Umrechnung. Internetanschlüsse werden in Megabit pro Sekunde angegeben, Dateien in Megabyte, und ein Byte hat acht Bit. Ein Handy mit 10 Mbit/s, ein realistischer Wert für Mobilfunk in der Bahn oder in einem Altbau mit dicken Wänden, schafft also 1,25 MB pro Sekunde. Ein Handyfoto mit 4 MB ist damit erst nach gut drei Sekunden vollständig angekommen, 20 solcher Fotos auf einer Seite brauchen über eine Minute. Dasselbe Foto, auf 1024 Pixel Breite verkleinert und als JPEG gespeichert, kommt meist mit 150 bis 300 KB aus und ist in einem Bruchteil einer Sekunde übertragen.

Auch Google misst diese Wartezeit. Der Wert „Largest Contentful Paint“ gibt an, wann das größte sichtbare Element einer Seite fertig ist, und gilt bis 2,5 Sekunden als gut. In einer Galerie ist dieses Element fast immer ein Bild. Die oft empfohlene Komprimierung per gzip oder Brotli beim Webhoster verkleinert dagegen nur HTML und Stylesheets. JPEG-Fotos sind schon komprimiert und werden dadurch nicht kleiner.

Erst die Ursache finden, dann ändern

Bevor du an Einstellungen drehst, schau genau hin, auf welche Weise die Seite langsam ist. Jedes Erscheinungsbild weist auf eine andere Ursache hin. Wer die falsche behandelt, verliert einen Abend und misst danach dieselben Sekunden.

Was du beobachtest	Wahrscheinliche Ursache	Was hilft
Die Seite bleibt einige Sekunden weiß, dann erscheint alles auf einmal	Der Server antwortet träge, etwa wegen eines überlasteten Tarifs oder einer langsamen Datenbank	beim Webhoster nachfragen, den Zwischenspeicher für Datenbankabfragen eingeschaltet lassen
Text und Rahmen stehen sofort, die Bilder füllen sich Zeile für Zeile	Die Bilder der Übersicht sind zu schwer	Maße der Vorschaubilder prüfen, Fotos nicht als PNG speichern
Die Übersicht ist flott, jedes Foto in der großen Ansicht braucht Sekunden	Die große Ansicht liefert die unveränderten Originale aus	eine Höchstgröße für die große Ansicht festlegen
Beim zweiten Besuch ist alles genauso langsam wie beim ersten	Der Server erlaubt dem Browser nicht, Dateien aufzubewahren	Ablaufzeiten für Bilder beim Hoster oder per .htaccess setzen
Nur der erste Aufruf einer Kategorie ist zäh, kurz nachdem du die Maße der Vorschaubilder geändert hast	Die Galerie rechnet die Vorschaubilder auf die neuen Maße um	nichts, beim nächsten Aufruf liegen die Kopien bereit

Bei Fotogalerien sind die zweite und die dritte Zeile mit Abstand die häufigsten Fälle. In beiden Fällen kannst du die Ladezeit der Webseite verbessern, ohne eine Zeile Code anzufassen, denn es geht nur darum, welche Datei der Browser bekommt. Die erste Zeile liegt dagegen meist außerhalb deiner Galerie: Braucht der Server selbst für eine kleine Textseite zwei Sekunden, hilft kein Verkleinern von Bildern.

Wie viele Pixel ein Foto wirklich braucht

Pixelmaße und Dateigröße werden gern verwechselt. Die Maße sagen, aus wie vielen Bildpunkten ein Foto besteht, die Dateigröße, wie viele Daten übertragen werden. Beide hängen zusammen, aber nicht starr: Zwei Fotos mit je 1024 × 768 Pixeln können sich um das Doppelte unterscheiden, weil sich ein Himmel mit sanftem Farbverlauf als JPEG viel kleiner packen lässt als eine Kiesfläche oder ein Laubwald. Als Faustregel gilt trotzdem: Halbierst du Breite und Höhe, bleibt ein Viertel der Pixel übrig, und die Datei schrumpft ungefähr im selben Verhältnis.

Am stärksten lässt sich die Ladezeit der Webseite verbessern, wenn die Pixelzahl zum Bildschirm passt. Der Bedarf ist dabei kleiner, als die Kamera vermuten lässt. Ein Handy stellt die Seite rund 390 Punkte breit dar und rechnet dafür mit zwei- bis dreimal so vielen echten Bildpunkten. Ein Laptop bietet einem Foto in der großen Ansicht selten mehr als 1200 bis 1600 Pixel Platz. Ein 6000 Pixel breites Kamerafoto ist damit rund viermal so breit wie nötig und enthält etwa sechzehnmal so viele Pixel, die der Besucher mitlädt, ohne sie je zu sehen.

Ladezeit der Webseite verbessern: die Einstellungen im Bildergalerie-Script

Im Bildergalerie-Script musst du deine Fotos nicht von Hand verkleinern. Gleich beim Hochladen legt die Galerie im Ordner bilder/tn/ ein Vorschaubild mit dem Namen tn<Kategorie-ID>_<Dateiname> an. Ist das Foto größer als die eingestellte große Ansicht, wie jedes Handyfoto mit 4000 Pixeln, entsteht dazu eine verkleinerte Kopie für die Lightbox mit dem Namen ob_<Kategorie-ID>_<Dateiname>. Dein Original bleibt unverändert im Ordner der Kategorie liegen. Wie groß beide Kopien werden, stellst du in der Verwaltung unter „Einstellungen“ ein.

Einstellung	Abschnitt	Standard	Wirkung auf die Ladezeit
Breite und Höhe der Vorschaubilder	„Vorschaubilder“	je 200 Pixel (erlaubt 20 bis 1000)	bestimmt, wie schwer die Übersicht einer Kategorie wird
Maximale Breite und Höhe der großen Ansicht	„Große Ansicht (Lightbox)“	je 1024 Pixel (0 oder 100 bis 10000)	größere Fotos zeigt die Lightbox als verkleinerte Kopie, bei 0 immer das Original
Vorschaubilder neu erstellen nach	„Vorschaubilder“	0, also aus (erlaubt bis 3650 Tage)	bei 0 erneuert die Galerie Vorschaubilder nur, wenn sich Original oder Maße ändern, und spart dem Server Arbeit
Zwischenspeicher für Datenbankabfragen	„Leistung“	350 Sekunden (0 oder 1 bis 86400)	entlastet die Datenbank bei vielen Besuchern

Was diese Einstellungen bewirken, zeigt ein Rechenbeispiel. Eine Kategorie enthält 40 Handyfotos mit je 4000 × 3000 Pixeln und rund 4 MB. Würde die Seite die Originale laden, kämen 160 MB zusammen, bei 10 Mbit/s also gut zwei Minuten Wartezeit. Mit dem Standard passt die Galerie jedes Foto in einen Rahmen von 200 × 200 Pixeln ein, ein Querformat wird also 200 × 150 Pixel groß. Aus einem JPEG entstehen dabei JPEG-Kopien mit der Qualität 85. Solche Vorschaubilder wiegen meist 10 bis 20 KB, bei 15 KB je Bild sind es für die ganze Übersicht rund 600 KB und etwa eine halbe Sekunde. Klickt ein Besucher ein Foto an, lädt die Lightbox die Kopie mit 1024 × 768 Pixeln und rund 200 KB statt der 4 MB des Originals.

Welche Datei bei welchem Klick über die Leitung geht, zeigt das Diagramm am Beispiel der Kategorie mit der Nummer 5 und dem Foto strand.jpg. Das Original selbst lädt die Lightbox nur in zwei Fällen: wenn die große Ansicht auf 0 steht oder wenn ein Foto ohnehin nicht größer als 1024 × 1024 Pixel ist. Im zweiten Fall ist es aber schon so leicht, dass eine Kopie nichts sparen würde.

Übersicht und Klick holen nur die Kopien aus bilder/tn/. Das 4 MB schwere Original von strand.jpg geht erst über die Leitung, wenn die große Ansicht auf 0 steht.

Die Kopien behalten das Format ihres Originals, deshalb lohnt ein Blick auf die Dateiendungen. PNG speichert verlustfrei und ist für Logos, Screenshots und Grafiken mit klaren Flächen gedacht. Ein Foto als PNG wird oft ein Mehrfaches so groß wie dasselbe Bild als JPEG, und daraus entstehen ebenso schwere PNG-Vorschaubilder. Das passiert schneller, als man denkt: Manche Bildbearbeitungen exportieren von sich aus als PNG, und viele Handys speichern Bildschirmfotos in diesem Format. Hängt deine Übersicht nur bei einzelnen Bildern, prüfe als Erstes deren Endung. Andere Formate lässt das Script gar nicht erst herein, es nimmt nur JPEG, PNG und GIF an. Bei einer WebP-Datei meldet der Upload, sie „ist ein WebP-Bild und wurde nicht hochgeladen“. Ein iPhone-Foto im Format HEIC weist er ebenfalls ab und bittet darum, es vorher als JPEG zu speichern.

Zwei Grenzen solltest du kennen. Eine Kategorie zeigt alle Bilder auf einer Seite, eine Aufteilung auf mehrere Seiten oder ein Nachladen beim Scrollen gibt es nicht. Der Browser holt also alle Vorschaubilder einer Kategorie auf einmal, und mehrere hundert Bilder verteilst du besser auf mehrere Kategorien. Ändere außerdem die Maße der Vorschaubilder nicht kurz vor einem Ansturm: Die Galerie rechnet danach jedes Vorschaubild beim nächsten Aufruf neu, und dieser erste Aufruf dauert bei einer großen Kategorie spürbar länger.

Bleibt die Frage, ob du den Standard von 1024 Pixeln für die große Ansicht anhebst. Mit 1600 Pixeln wirken Fotos auf großen Bildschirmen schärfer, die Kopie hat aber etwa zweieinhalbmal so viele Pixel und wird entsprechend schwerer. Für eine Galerie, die vor allem auf dem Handy angesehen wird, bleibt 1024 die bessere Wahl. Beide Werte auf 0 zu setzen lohnt sich nur, wenn du die Fotos schon vor dem Hochladen klein gerechnet hast. Am sichersten entscheidest du an einer Testkategorie mit deinen eigenen Fotos: Das Bildergalerie-Script kannst du kostenlos herunterladen und auf deinem Webspace ausprobieren.

Wiederkehrende Besucher: der Browser-Cache

Über den Zwischenspeicher des Browsers kannst du die Ladezeit der Webseite verbessern, allerdings nur für Besucher, die wiederkommen. Wer deine Galerie öfter besucht, muss Logo, Stylesheet und die Vorschaubilder einer schon gesehenen Kategorie nicht jedes Mal neu laden. Der Browser legt sie in seinem Zwischenspeicher ab, sofern der Server ihm mitteilt, wie lange er das darf. Diese Angabe stellt nicht die Galerie ein, sondern dein Webspace. Viele Hoster setzen von sich aus vernünftige Werte. Auf einem Apache-Server lassen sich die Ablaufzeiten zusätzlich über eine .htaccess im Hauptverzeichnis festlegen, typisch sind ein Jahr für Bilder und ein Monat für Stylesheets.

Die Sorge, Besucher könnten dann veraltete Bilder sehen, ist beim Bildergalerie-Script unbegründet. Vorschaubilder und Kopien tragen einen Zeitstempel in der Adresse, etwa ?v=1728720000. Erzeugt die Galerie eine Datei neu, ändert sich die Adresse, und der Browser lädt sie sofort. Ob das Aufbewahren überhaupt greift, siehst du in den Entwicklerwerkzeugen des Browsers: Steht beim zweiten Aufruf in der Spalte für die Größe ein Hinweis auf den Cache statt einer Zahl in KB, kam die Datei vom Gerät und nicht aus dem Netz.

Den Effekt messen, ohne sich zu täuschen

Bevor du die Ladezeit der Webseite verbessern kannst, brauchst du einen Ausgangswert, und nach jeder Änderung einen zweiten, gemessen unter denselben Bedingungen. Sonst vergleichst du Zufall:

Die Kategorie im Browser öffnen und mit F12 die Entwicklerwerkzeuge aufrufen.
Zum Reiter „Netzwerk“ wechseln und den Haken bei „Cache deaktivieren“ setzen. Ohne ihn misst du einen Stammbesucher, und die Seite wirkt schneller als bei jedem Erstbesucher.
Die Seite neu laden und unten in der Leiste die übertragene Datenmenge notieren. Sie hängt nicht davon ab, wie gut dein Netz gerade ist, und eignet sich deshalb besser für den Vergleich als eine gestoppte Zeit.
Genau eine Sache ändern, etwa die Maße der Vorschaubilder, und erneut laden.

Fällt die Zahl von mehreren Megabyte auf einige hundert Kilobyte, hast du die Ladezeit deutlich gesenkt, auch wenn dein eigener Anschluss das kaum zeigt. Was deine Besucher unterwegs erleben, stellst du im selben Reiter über die Drosselung nach, die ein langsames Mobilnetz simuliert.

Häufige Fragen

Beim Verkleinern und Testen tauchen meist dieselben drei Fragen auf.

Welche Bildgröße ist für eine schnelle Galerie richtig?

Für die große Ansicht genügen 1024 Pixel an der langen Kante, das ist auch der Standard im Bildergalerie-Script. Wer viele Besucher mit großen Monitoren hat, geht bis 1600 Pixel. Als JPEG sind das in beiden Fällen einige hundert Kilobyte. Ein Vorschaubild mit den Standardmaßen von 200 Pixeln wiegt meist 10 bis 20 KB, eine Kategorie mit 40 Bildern kommt damit auf rund 600 KB. Stellst du größere Vorschaubilder bis 300 Pixel ein, sollte jedes trotzdem deutlich unter 50 KB bleiben.

Welches Messwerkzeug eignet sich für Anfänger?

Für einen schnellen Überblick ist Google PageSpeed Insights gut: Adresse eingeben, kurz warten, dann bekommst du eine Bewertung samt „Largest Contentful Paint“ und eine Liste der größten Bremsen. Genauer misst der Reiter „Netzwerk“ in den Entwicklerwerkzeugen deines Browsers, weil er jede einzelne Datei mit ihrer Größe auflistet. Dort erkennst du sofort, ob ein bestimmtes Foto aus der Reihe tanzt.

Muss ich meine Fotos vor dem Hochladen ins Bildergalerie-Script verkleinern?

Für die Besucher ist das nicht nötig, denn sie sehen nur die verkleinerten Kopien aus bilder/tn/, solange die große Ansicht auf Werte wie 1024 Pixel eingestellt ist. Es lohnt sich trotzdem: Der Upload geht schneller, du bleibst unter der Grenze deines Webhosters, die die Upload-Seite anzeigt (etwa „höchstens 20 MB je Bild“), und die Originale belegen weniger Speicherplatz.