Google teilt sechs Möglichkeiten, wie Sie Bilder schneller und effizienter auf Ihrer Website laden können.
In einem neuen Video von Google gibt Developer Advocate Alan Kent sechs Tipps zur Optimierung von Bildern für E-Commerce-Websites.
Das Video richtet sich zwar speziell an E-Commerce-Websites, der Rat gilt jedoch für jede Website, die eine große Anzahl von Bildern bereitstellt.
Dies sind die Tipps von Google zum schnelleren und effizienteren Laden von Bildern.
Eliminieren Sie die kumulative Layoutverschiebung des Bildes (CLS)
CLS bezieht sich auf Fälle, in denen sich Inhalte auf der Seite beim Laden visuell von einem Ort zum anderen bewegen oder verschieben.
Obwohl dieses Problem nicht ausschließlich durch Bilder verursacht wird, können sie bei falscher Verwendung zum Problem beitragen.
In den meisten Fällen ist CLS leicht zu erkennen, indem man während des Ladens nach Bewegungen auf einer Seite sucht, aber es gibt mehrere Tools, um es zu messen.
Richtige Größe Ihrer Bilder
Wählen Sie die richtige Breite und Höhe für Ihre Bilder, da das Herunterladen größerer Dateien länger dauert.
Die richtige Größenanpassung von Bildern kann aufgrund der unterschiedlichen Bildschirmgrößen und Auflösungen, die Ihre Website besuchen, kompliziert sein.
Wenn der Browser das Bild selbst zuschneidet, wird die Downloadgröße länger als nötig, was die Dinge nur nach unten zieht.
Eine einfache Möglichkeit, Bilder mit falscher Größe zu erkennen, ist die Verwendung des Abschnitts „Bilder mit der richtigen Größe “ unter „Werbechancen“ im PageSpeed Insights-Bericht .
Sobald Sie Bilder identifiziert haben, die größer als nötig sind, können Sie das Problem mit Lösungen wie responsiven Bildern beheben.
Verwenden Sie das beste Bilddateiformat
Denken Sie über das Dateiformat Ihrer Bilder nach, z. B. ob Sie PNG-, JPEG- oder webP-Dateien verwenden möchten.
Das Dateiformat wirkt sich auf die Dateigröße aus, daher muss die Wahl des richtigen Formats sorgfältig abgewogen werden.
Für jedes Format sind Vor- und Nachteile abzuwägen. Zum Beispiel haben JPEG und webP tendenziell geringere Dateigrößen, obwohl die kleinere Größe auf Kosten der Bildqualität erreicht wird.
Eine Verschlechterung der Bildqualität ist jedoch für Käufer möglicherweise nicht wahrnehmbar, und der Geschwindigkeitsvorteil könnte erheblich sein.
Um festzustellen, ob Ihre Website von der Verwendung eines anderen Bildformats profitieren kann, sehen Sie sich den Abschnitt „ Bilder in Next-Gen-Formaten bereitstellen“ des PageSpeed Insights-Berichts an. Dieser Bericht listet Bilder auf, die in ein effizienteres Dateiformat konvertiert werden können.
Bilder entsprechend komprimieren
Verwenden Sie den richtigen Qualitätsfaktor für Ihre Bilder, um sie effizient zu codieren und dabei die gewünschte Bildqualität beizubehalten.
Der Abschnitt „ Bilder effizient codieren“ des PageSpeed Insights-Berichts kann verwendet werden, um Bilder zu identifizieren, die gute Kandidaten für eine Komprimierungsoptimierung sind. Der Bericht zeigt auch potenzielle Einsparungen bei der Dateigröße.
Um einen Qualitätsfaktor zu finden, mit dem Sie zufrieden sind, verwenden Sie das Bildkonvertierungstool Ihrer Wahl für mehrere Bilder mit unterschiedlichen Qualitätswerten und vergleichen Sie Vorher und Nachher.
Google empfiehlt die Seite Squoosh.app als einfache Möglichkeit, Bilder mit und ohne Komprimierung zu vergleichen.
Bilder im Browser zwischenspeichern
Teilen Sie dem Browser mit, wie lange er Bilder sicher zwischenspeichern kann.
Wenn Sie ein Bild zurückgeben, können Sie einen HTTP-Antwortheader mit Caching-Anleitung zurückgeben, z. B. wie lange es für einen Browser empfohlen wird, ein Bild zwischenzuspeichern.
Auch hier können Sie den PageSpeed Insights-Bericht verwenden, um festzustellen, ob die HTTP-Antwort-Cache-Header auf Ihrer Website ordnungsgemäß festgelegt wurden.
Der Abschnitt “Statische Assets mit einer effizienten Cache-Richtlinie bereitstellen” identifiziert Bilder, die von Caching-Verbesserungen profitieren könnten.
Um Probleme auf Ihrer Website zu beheben, sehen Sie nach, ob Sie Plattform- oder Webservereinstellungen haben, die Sie ändern können, um die Cache-Lebensdauer für Bilder auf Ihrer Website anzupassen.
Wenn Sie Bilder nicht häufig ändern, können Sie eine lange Cache-Lebensdauer festlegen.
Ordnen Sie Ihre Bilddownloads der richtigen Reihenfolge zu
Als Tipp für Fortgeschrittene empfiehlt Google, die Ressourcen der Bestellwebseite in der richtigen Reihenfolge herunterzuladen.
Folgende Download-Reihenfolge wird empfohlen:
- Herobilder oben auf der Seite
- Andere Bilder “above the fold” (sichtbarer Bereich, ohne scrollen zu müssen)
- Bilder direkt “below the fold” (Bereiche werden erst durch Scrollen sichtbar)
Der Rest der Bilder auf einer Webseite kann träge geladen werden.
Um festzustellen, ob Ihre Website Bilder effizient lädt, können Sie sich auf den PageSpeed Insights-Bericht beziehen. Im Abschnitt Offscreen-Bilder zurückstellen des Berichts sehen Sie eine Liste von Bildern, die nach anderen Bildern geladen werden könnten.
Weitere Einzelheiten zu den oben genannten Tipps finden Sie im vollständigen Video von Google unten:
Quelle: SearchEngine® Journal