Wie lässt sich die Ladezeit des großen Startseitenbildes durch eine Geschwindigkeitsoptimierung des eigenen Webshops verbessern?

Wie lässt sich eine langsame Ladezeit des großen Startseitenbildes bei der Optimierung der Website-Geschwindigkeit beheben?

Sie suchen nach „Website-Geschwindigkeit optimieren für einen eigenständigen Webshop“, stellen aber fest, dass das große Startseitenbild selbst nach der Komprimierung noch langsam lädt? Das Problem liegt möglicherweise nicht an der Bildgröße, sondern daran, dass die Anfrage zu spät gestartet wird, mobile Geräte das Originalbild für Desktopgeräte herunterladen oder das Bild nach dem Eintreffen nicht rechtzeitig angezeigt wird. Um das Problem zu beheben, sollten Bildverarbeitung, Seitenladeverhalten und die Zugriffskette aus dem Ausland gemeinsam untersucht werden.

Zuerst feststellen: An welcher Stelle ist das große Bild langsam?

Öffnen Sie im Browser die Netzwerkansicht der Entwicklertools, deaktivieren Sie den Cache, simulieren Sie ein mobiles Netzwerk und laden Sie die Startseite neu. Suchen Sie die Anfrage für das Hauptbild im sichtbaren Bereich. Prüfen Sie insbesondere drei Zeitpunkte: Wann beginnt die Anfrage, wie lange dauert das Warten auf eine Antwort und wie lange dauert der Download? Beurteilen Sie die Ladezeit nicht allein danach, dass das Bild „ein paar hundert KB“ groß ist.

Beginnt die Anfrage erst spät, liegt das häufig daran, dass das Hauptbild in einem Skript-Slider oder einem externen Stylesheet verborgen ist. Dauert das Warten auf die Antwort lange, sollten Sie den Ursprungsserver, den Cache und die grenzüberschreitende Verbindung prüfen. Dauert der Download lange, sollten Sie die Dateigröße reduzieren. Ist der Download bereits abgeschlossen, während das Bild auf der Seite weiterhin nicht angezeigt wird, prüfen Sie außerdem die Skriptausführung, die Styles und die Initialisierung des Sliders.

Prüfen Sie zugleich den Largest Contentful Paint (LCP), um festzustellen, ob das große Bild im sichtbaren Bereich tatsächlich das entsprechende Element ist. Google betrachtet einen LCP-Wert von höchstens 2,5 Sekunden als gut. Für die tatsächliche Bewertung sollten jedoch auch Daten zum 75. Perzentil realer Besuche herangezogen werden. Ein einzelner lokaler Test kann der Diagnose dienen, repräsentiert aber nicht alle Nutzer im Ausland.

Vor der Komprimierung: Nicht benötigte Pixel gar nicht erst übertragen

Ein bequemes Hochladen im Backend bedeutet nicht, dass das Bild direkt für den Livebetrieb geeignet ist. Selbst wenn ein überbreites, aus einem Design exportiertes Bild optisch verkleinert wird, lädt der Browser möglicherweise weiterhin die vollständige Datei herunter. Erstellen Sie Bildvarianten entsprechend der tatsächlich angezeigten Breite und der Pixeldichte des Geräts. Mithilfe responsiver Bildattribute können Mobilgeräte und Desktopgeräte jeweils die passende Variante laden, statt dass die gesamte Website dasselbe Originalbild verwendet.

Prüfen Sie außerdem den Bildausschnitt auf Mobilgeräten separat. Eine Panoramaaufnahme von Maschinen eines Fertigungsunternehmens kann auf einem breiten Bildschirm scharf wirken, auf dem Smartphone jedoch so klein sein, dass weder das Hauptmotiv noch die Verkaufsargumente erkennbar sind. Statt das gesamte Querformatbild zu übertragen und die Seiten auszublenden, sollten Sie eine mobile Bildkomposition vorbereiten, die das Hauptmotiv hervorhebt. Überschriften, Verkaufsargumente und Anfrage-Schaltflächen sollten möglichst als Seitentext umgesetzt werden, statt vollständig in das Bild eingebettet zu sein. Das erleichtert die Pflege mehrsprachiger Inhalte.

Bei Hauptbildern mit Fotos können Sie Dateigröße und Bildqualität von WebP, AVIF und JPEG vergleichen; für transparente Inhalte wählen Sie das Format nach Bedarf. Verwenden Sie nicht pauschal denselben Komprimierungswert: Metalloberflächen, Typenschilder und feine Texturen sollten vergrößert überprüft werden. Ziel ist eine ausreichende Schärfe auf dem jeweiligen Bildschirm, nicht die kleinstmögliche Datei. Bei neuen Formaten sollten Sie zudem eine kompatible Ausweichlösung berücksichtigen.

Bilder im sichtbaren Bereich zuerst laden, Bilder außerhalb verzögert

Ein leicht zu übersehender Fehler besteht darin, für alle Bilder der Website einheitlich Lazy Loading zu aktivieren. Wenn das Hauptbild im sichtbaren Bereich zum LCP beiträgt, sollte seine Anfrage nicht erst nach dem Scrollen oder einer Skriptprüfung starten. Der Browser sollte das Bild möglichst früh in der Seitenstruktur erkennen können. Bei Bedarf lässt sich die Priorität mit fetchpriority erhöhen; Produkt- und Referenzbilder außerhalb des sichtbaren Bereichs eignen sich dagegen für verzögertes Laden.

Muss das Hauptbild als Hintergrundbild eingebunden oder dynamisch durch ein Skript eingefügt werden, können Sie ein Preloading in Betracht ziehen. Das vorab geladene Bild muss jedoch dem später tatsächlich verwendeten Bild entsprechen, da sonst unnötige doppelte Downloads entstehen können. Setzen Sie nicht alle Slider-Bilder auf eine hohe Priorität: Sie konkurrieren um Bandbreite und beanspruchen Ressourcen, die für das erste Bild benötigt werden.

Mehr Slider-Bilder sind nicht automatisch besser. Sorgen Sie dafür, dass das erste Bild zuverlässig angezeigt wird, und laden Sie die folgenden Bilder erst bei Bedarf. Reservieren Sie außerdem ein Seitenverhältnis für die Bilder, damit Text und Schaltflächen nach dem Laden nicht verschoben werden. Verzögert das Slider-Skript die Darstellung des sichtbaren Bereichs deutlich, können Sie ein statisches Hero-Bild erwägen. Die Entscheidung sollte sich jedoch am Inhalt orientieren und nicht allein der Messung zuliebe erfolgen.

Bei langsamen Zugriffen aus dem Ausland auch Auslieferung und Cache prüfen

Dass eine Website im Büro in China schnell lädt, bedeutet nicht, dass Besucher in Nordamerika, Europa oder dem Nahen Osten dieselbe Erfahrung machen. Testen Sie aus den wichtigsten Regionen für die Kundengewinnung und prüfen Sie, ob Bilder über ein CDN ausgeliefert werden, ob der Cache greift, ob unnötige Weiterleitungen bestehen und ob der Verbindungsaufbau zur Bilddomain Zeit kostet. Ein CDN kann die Auslieferung verbessern, ersetzt aber weder die Komprimierung noch behebt es blockierende Skripte.

Der Cache spielt auch im Tagesgeschäft eine Rolle. Langfristiges Caching sollte mit versionierten Dateinamen kombiniert werden. Andernfalls sehen Nutzer nach dem Austausch eines Aktionsbildes auf der Startseite möglicherweise weiterhin den alten Inhalt. Wenn das Website-Backend automatisch Bildvarianten in verschiedenen Größen und Formaten erstellt, sollten Sie auch prüfen, wie der Cache beim Ersetzen eines Bildes aktualisiert wird. So müssen Sie nach der Veröffentlichung nicht wiederholt manuell den Cache leeren.

Bei der Abnahme nicht nur auf den Punktwert achten, sondern auch verhindern, dass der nächste Upload die Website verlangsamt

Vergleichen Sie vor und nach der Optimierung bei gleichen Regionen, Geräten und Netzwerkbedingungen mehrfach die Anfragezeit des Hauptbildes, das übertragene Datenvolumen und den LCP. Prüfen Sie außerdem die Bildschärfe, den Bildausschnitt auf Mobilgeräten, die Funktionsfähigkeit der Schaltflächen und das Anfrageformular. Werden Landingpages für Werbung oder Social-Media-Kampagnen mit derselben Vorlage erstellt, sollten Sie auch dort Stichproben durchführen, damit nicht nur die Startseite optimiert wird.

Yiyingbao Information Technology (Beijing) Co., Ltd. wurde 2013 gegründet und bietet integrierte Dienstleistungen rund um KI-gestützte Website-Erstellung, mehrsprachige Websites, SEO und Werbung im Ausland. Bei Projekten, in denen Website-Erstellung und Marketing zusammenspielen, sollte die Geschwindigkeitsoptimierung in die Prozesse für Vorlagen und die Veröffentlichung von Medieninhalten eingebunden werden: Das Designteam verantwortet die Bildkomposition, das Marketingteam lädt Bilder in den passenden Größen hoch, die Technik kümmert sich um Ladeverhalten und Cache, und das Marketingteam prüft die Nutzererfahrung auf Landingpages, statt Probleme erst nach der Veröffentlichung kurzfristig zu beheben.

Für die praktische Umsetzung können Sie zunächst ein Messergebnis speichern und anschließend Größe, Format und Anforderungszeitpunkt des Hauptbildes im sichtbaren Bereich überprüfen. Bei der Übergabe sollten neben den Vergleichsergebnissen auch Upload-Richtlinien, das Verfahren zur Cache-Aktualisierung und die Bedingungen für erneute Tests dokumentiert werden. So können Mitarbeiter im operativen Bereich beim nächsten Bildwechsel oder beim Hinzufügen einer Sprachversion fundierte Entscheidungen treffen, ohne erst tätig zu werden, wenn die Startseite erneut langsamer geworden ist.