6 Gründe, warum Ihre Bilder Ihre Website verlangsamen (und wie Sie das beheben können)

Fragen Sie sich, warum Bilder auf Ihrer Website langsam geladen werden oder ewig zum Laden brauchen? Sie lesen den richtigen Artikel. Beginnen wir mit zwei wichtigen Dingen, die Sie wissen sollten: Bilder machen einen großen Prozentsatz des Website-Traffics aus, sodass die Optimierung Ihrer Bilder dazu beitragen kann, die Ladezeit zu verkürzen. Gleichzeitig sind Bilder oft der Schuldige für Leistungsprobleme: Sie nehmen die Laderessourcen in Anspruch und verlangsamen deshalb Ihre WordPress-Site.

Die Sache ist, dass es schwer ist, sich eine Website ohne Bilder oder Bilder vorzustellen. Die Verwendung von SEO-optimierten Bildern kann sogar mehr Besucher auf Ihre Website lenken. Ohne sie können wir keine Geschäfte machen!

In diesem Blogbeitrag haben wir sechs Gründe aufgeführt, warum Bilder Ihre Website verlangsamen. Außerdem erfahren Sie, wie Sie dafür sorgen können, dass Fotos auf Ihrer Website (auch auf Mobilgeräten) schneller geladen werden.

Warum Ihre Bilder auf WordPress langsam geladen werden (oder ewig zum Laden brauchen)

1. Bilder sind zu groß (und Sie verwenden möglicherweise zu viele)

Wenn es um die Geschwindigkeit von Webseiten geht, sollten Sie als Erstes Ihre umfangreichen Bilder optimieren. Größere hohe Auflösungen können viel Bandbreite beanspruchen und die Ladezeiten für Besucher Ihrer Website verlangsamen – warum laden Sie sie also nicht in einer kleineren Größe hoch? Aber lassen Sie auch nicht die Qualität Ihrer Bilder leiden! Verwenden Sie zuverlässige und effektive Anwendungen zur Bildkomprimierung. Dadurch wird sichergestellt, dass sie, während Sie ihre Größe reduzieren, weiterhin mit geringem Qualitätsverlust visuell originalgetreu bleiben.

2. Bilder haben unbestimmte Abmessungen

Die richtige Skalierung von Bildern ist wichtig, um zu vermeiden, dass das Laden von Website-Bildern zu lange dauert. Lassen Sie nicht zu, dass der Browser Bilder anstelle von Ihnen skaliert – das würde ihm mehr Daten zum Laden geben. Mit anderen Worten, der Browser lädt immer noch das gesamte Bild. Wenn Sie ein Bild mit 2000 x 2000 Pixeln haben, es aber auf 200 x 200 Pixel verkleinert haben, muss Ihr Browser zehnmal mehr laden als nötig.

3. Bilder sind nicht für das Gerät optimiert

Um zu verhindern, dass Bilder langsam geladen werden, sollte Ihre Seite niemals Bilder rendern, die größer sind als die Version, die auf dem Bildschirm des Benutzers angezeigt wird. Mit einfachen Worten, alles, was größer als das Gerät ist, führt zu verschwendeten Bytes und verlangsamt Ihre Seite.

4. Der Browser beginnt alle Bilder auf einmal zu laden

Standardmäßig versucht Ihr Browser, alles gleichzeitig zu laden. Wenn Sie die Bilder, die zuerst geladen werden müssen, nicht priorisieren, ist der Browser damit beschäftigt, sie alle auf einmal zu rendern. Konzentrieren Sie sich stattdessen auf die wichtigsten Bilder, die in den Viewport des Besuchers geladen werden müssen.

5. Sie verwenden schwere Formate

Die Größe Ihrer Bilder ist nur ein Teil des Problems. Die von Ihnen verwendeten Dateitypen können ebenfalls wertvollen Speicherplatz beanspruchen. Verwenden Sie ein Format wie .TIFF oder BMP? Denken Sie in diesem Fall daran, dass TIFF ein unkomprimiertes Format ist, das ein detaillierteres Bild rendert und mehr Daten enthält ... Dadurch werden größere Dateien erstellt und viel Speicherplatz benötigt. Wenn Sie nicht .TIFF, sondern stattdessen JPEG und PNG verwenden, sollten Sie wissen, dass Sie noch leichtere Formate verwenden können, wie Sie im nächsten Abschnitt herausfinden werden. Eine einfache Konvertierung kann Ihrem Image einen kleinen Schub geben!

6. Ihr Cache speichert keine Bilder

Der Hauptvorteil des Zwischenspeicherns eines Bildes besteht darin, die Leistung Ihrer WordPress-Site zu verbessern. Der Benutzer sollte die Bilder oder Javascript- und CSS-Dateien direkt von seinem System anzeigen, anstatt darauf zu warten, dass sie über eine Netzwerkverbindung heruntergeladen werden. Mit anderen Worten, Ihre Bilder sollten in einem temporären lokalen Ordner zwischengespeichert werden, um unnötige Pings an die Datenbank zu vermeiden.

So beheben Sie das langsame Laden von Bildern auf Ihrer Website

Bilder sind für die Inhaltsstrategie von entscheidender Bedeutung, aber wir möchten nicht, dass das Laden zu lange dauert. Der Schlüssel ist, sie richtig zu verwenden, um eine Verlangsamung Ihrer WordPress-Site zu vermeiden. Sehen wir uns die sechs Techniken an, mit denen Sie das Laden von Bildern auf Ihrer WordPress-Site verbessern können.

1. Ändern Sie die Größe und komprimieren Sie Bilder

Wenn Sie Ihre Bilder beschleunigen möchten, sollten Sie Ihre Fotos immer optimieren, indem Sie sie verkleinern und komprimieren. Verlustbehaftete und verlustfreie Komprimierung sind zwei Methoden, die häufig verwendet werden, um Ihre Website für schnellere Ladezeiten zu optimieren und letztendlich das Laden der Seite zu beschleunigen. Diese beiden allgemeinen Taktiken werden in unserem Leitfaden zum Reduzieren der Bildgröße ohne Qualitätsverlust ausführlich erläutert.

• Verlustbehaftet = ein Filter, der einige der Daten eliminiert. Die Bildqualität wird beeinträchtigt.
• Verlustfrei = ein Filter, der die Daten komprimiert, ohne die Bildqualität zu beeinträchtigen.

Mit den richtigen Plugins können Sie WordPress einige Ihrer Bildformatierungen automatisch für Sie vornehmen lassen.

Das Problem: Bilder sind zu groß (und zu viele).

Die Lösung: Bildoptimierungs-Plugins, mit denen Sie das Laden Ihrer Bilder beschleunigen können:

• Stellen Sie sich vor

• Ewww Bildoptimierer
• Optimole (Bildoptimierung & Lazy Load von Optimole)
• ShortPixel-Bildoptimierung
• reSmush.it
• Komprimieren Sie JPEG- und PNG-Bilder

2. Legen Sie die Bildabmessungen fest

Um ein langsames Laden von Bildern auf Ihrer Website zu beheben, denken Sie daran, die richtigen Bildabmessungen festzulegen. Legen Sie die Breite und Höhe für alle Bilder fest, um Daten zu sparen und die Ladezeit der Seite zu verbessern. Wie funktioniert das? Durch das Hinzufügen von Breiten- und Höhenattributen zu Ihrem <img>-Markup wird Ihr Browser angewiesen, Platz für das Bild zu sparen. Wenn Sie dies nicht tun, führt dies zu einer Inhaltsverschiebung, und Ihre kumulative Layoutverschiebungspunktzahl wird beeinflusst. Infolgedessen wird Lighthouse Ihrem Core Web Vital eine ziemlich schlechte Punktzahl geben, was Ihrer SEO und Leistung schadet.

Sehen wir uns unten ein Beispiel an, um die Auswirkungen der Bildverschiebung auf die Benutzererfahrung besser zu verstehen.

1. Text verschiebt sich, wenn dem Browser keine Bildabmessungen bereitgestellt werden.

2. Text verschiebt sich nicht (CLS ist nicht betroffen) , wenn Bildabmessungen angegeben werden, damit angemessener Platz zugewiesen werden kann.

Das Problem: Bilder haben nicht spezifizierte Abmessungen.

Die Lösung: Fügen Sie fehlende Bilddimensionen und -attribute mit WP Rocket hinzu. Dies ist ein leistungsstarkes Plugin, das auch Caching, Code-Optimierung, verzögertes Laden und vieles mehr durchführt, um die Geschwindigkeit Ihrer WordPress-Site zu erhöhen.

3. Stellen Sie Bilder bereit, die für jedes Gerät optimiert sind

„Responsive Bilder“ ist die Strategie, die zum Bereitstellen von Bildern in angemessener Größe je nach Gerät (Tablet, Handy und Desktop) verwendet wird. Mit anderen Worten, Sie erstellen mehrere Versionen jedes Bildes und definieren mithilfe von Medienabfragen, Darstellungsbereichsabmessungen usw., welche in Ihrem Code verwendet werden soll.

Web.dev sagt sogar, dass „das Bereitstellen von Bildern in Desktop-Größe auf mobilen Geräten 2–4x mehr Daten als nötig verbrauchen kann“.

Das Problem: Bilder sind nicht gerätespezifisch optimiert.

Die Lösung:

• Verwenden Sie einen WordPress-Seitenersteller, um Ihnen zu helfen.

• Verwenden Sie ein Bild-CDN, um Bilder je nach Gerät in der richtigen Größe bereitzustellen.
• Machen Sie es manuell mit CSS und verwenden Sie Lighthouse, um Bilder mit falscher Größe zu identifizieren. Führen Sie die Leistungsprüfung durch, indem Sie zu Lighthouse > Options > Performance gehen.

4. Lazy laden Sie Ihre Bilder

Werden Ihre WordPress-Bilder langsam geladen? Es ist an der Zeit, Bilder nur dann anzuzeigen, wenn die Besucher sie sehen. Diese Technik, um Bandbreite zu sparen und den zu rendernden Inhalt zu priorisieren, wird „Lazy Loading“ genannt. Sie sollten Lazy Loading für Ihre Bilder unterhalb der Falte implementieren – diejenigen, die von Ihrem Besucher noch nicht angesehen werden.

Das Problem: Der Browser beginnt alle Bilder auf einmal zu laden.

Die Lösung: Implementieren von Lazy Loading mit einem WordPress-Plugin.

• Lazy Loading von WP Rocket ist ein kostenloses Plugin, das das Lazy-Load-Skript auf den Bildern implementiert.
• Sehen Sie sich diesen interessanten Leitfaden an, wenn Sie die besten auf dem Markt erhältlichen Lazy-Load-Plugins vergleichen möchten.
• Manuelles Implementieren von Lazy Loading: Befolgen Sie diese Anleitung von CodeInWP, in der die beiden Möglichkeiten zum manuellen Implementieren von Lazy Loading erläutert werden (für Anfänger jedoch nicht so einfach zu befolgen).

5. Konvertieren Sie Ihre Bilder in WebP

WebP bietet verlustfreie und verlustbehaftete Komprimierung für Bilder im Web, wodurch sie schneller geladen werden können. Laut Google sind verlustfreie WebP-Bilder im Vergleich zu PNGs um 26 % kleiner. Und verlustbehaftete WebP-Bilder sind 25–34 % kleiner als JPEG-Bilder bei gleicher Qualität.

Das Problem: Sie verwenden schwere Formate.

Die Lösung: Konvertieren Sie Ihre Bilder mit einem WordPress-Plugin in JPG, PNG oder WebP.

• Imagify – konvertiert Ihre Bilder automatisch in das WebP-Format in Ihrem WordPress-Dashboard.

• WebP-Konverter für Medien – konvertiert Ihre Bilder in WebP.

6. Verwenden Sie ein Caching-Plugin

Die Caching-Plugins weisen den Server an, Ihre Dateien auf der Festplatte oder im RAM zu speichern. Dadurch werden Ihre Webseiten (und Bilder) schneller geladen, da sie direkt aus dem Cache „gespeichert“ werden. Dazu gehört das Seiten- und Browser-Caching, bei dem die häufig aufgerufenen Bilder im lokalen Speicher des Navigationsgeräts abgelegt werden sollen.

Das Problem: Ihr Cache speichert keine Bilder.
Die Lösung: Verwenden Sie ein WordPress-Plugin, um Ihre Bilder zwischenzuspeichern.

• WP Rocket wendet automatisch 80 % der Best Practices für die Webleistung an, einschließlich Caching und Lazy Loading Ihrer Bilder, Säuberung Ihres Codes, der die Gzip-Komprimierung ermöglicht, und vieles mehr.

Nachdem wir nun die Techniken gesehen haben, die Sie anwenden können, um bessere Bilder bereitzustellen, wollen wir sehen, wie ein Plugin wie Imagify helfen kann.

So laden Sie Ihre Bilder mit Imagify schneller

Meiner Meinung nach sollte ein gutes Bildoptimierungs-Plugin die Größe des Bildes reduzieren und gleichzeitig die visuelle Qualität beibehalten. Es muss einfach sein, die Bilder auf meiner Website und den zukünftigen (on the fly) zu verwenden und zu komprimieren. Imagify stimmt mit meiner Beschreibung überein und ich werde Ihnen zeigen, wie Imagify mir geholfen hat, meine Website zu beschleunigen.

Bereit?

Es ist an der Zeit, sich von Website-Bildern zu verabschieden, die zu lange zum Laden brauchen.

Für diese Fallstudie verwenden wir GTmetrix und messen die folgenden KPIs:

• Gesamtleistungsnote
• Cumulative Layout Shift (plötzliche Verschiebung des Inhalts)
• Voll geladene Zeit
• Seitengröße und % der von Bildern belegten Größe
• Anzahl der HTTP-Anfragen und % der von Bildern belegten Größe
• Bilddateigröße vor und nach der Optimierung mit Imagify

Beginnen wir das Audit mit einer Testseite, die mit Divi erstellt wurde und 10 Bilder enthält.

Szenario 1: Meine mit Divi erstellte Website – kein Imagify

Wir geben einfach die URL unserer Seite in GTmetrix ein und schauen uns die verschiedenen Bereiche an. Die Ergebnisse sind nicht allzu schlecht, aber einer meiner Core Web Vitals ist orange und ich habe eine B-Bewertung erhalten.

Kennzahlen	Ergebnisse (kein Imagify)
Gesamtleistungsnote	B – 87 %
CLS	0,17 s (in Orange)
Voll geladene Zeit	2,6 Sek
Seitengröße – % der von Bildern belegten Größe	Gesamt: 2,44 MB – Bilder: 1,31 MB (54 %)
Anzahl der HTTP-Anfragen – % der von Bildern belegten Größe	Gesamt: 75 – Bilder: 41 (55%)
	JPG-Größe: 160 KB 117 KB 27 KB 103 KB 91 KB 195 KB 74 KB 75 KB 164 KB 13 KB

Darüber hinaus nehmen Bilder 1,31 MB auf 2,44 MB meiner gesamten Seitengröße ein, 54 % der gesamten Seitengröße. Von 75 Anfragen werden 41 von den Bildern gestellt, was 55 % der Anfragen ausmacht.

Jetzt ist es an der Zeit zu sehen, wie meine Bilder dank Imagify geladen werden.

Szenario 2: Prüfung derselben Website und derselben Bilder – mit Imagify

Lassen Sie uns meine Bilder mit Imagify optimieren. Aktivieren Sie dazu einfach das Plugin und starten Sie die „Massenoptimierung“ über Einstellungen → Imagify .

Dort können Sie entscheiden, Ihre Bilder auf drei Ebenen zu optimieren, nämlich Normal, Aggressiv und Ultra. Ich habe den Ultra-Modus ausgewählt, um Ihnen die beste Optimierungsstufe zu zeigen.

Interessanter Hinweis : Wenn Sie nicht alle Ihre Bilder auf einmal optimieren möchten, können Sie sie aus der Bibliothek auswählen, genau wie ich es für meinen Blumenladen getan habe:

Im Durchschnitt sparte Imagify 50 % meiner Dateigröße und konvertierte sie alle in das WebP-Format:

Schließlich ist es an der Zeit, die Leistung meiner KPIs vor und nach der Aktivierung von Imagify zu vergleichen . Die Ergebnisse sind sehr ermutigend!

Kennzahlen	Ergebnisse (kein Imagify)	Ergebnisse (mit Imagify)
Gesamtleistungsnote	B – 87 %	A – 91 %
CLS	0,17 s (in Orange)	0,1s (jetzt im grünen Bereich)
Voll geladene Zeit	2,6 Sek	2,6 Sek
Seitengröße – % der von Bildern belegten Größe	Gesamt: 2,44 MB – Bilder: 1,31 MB (54 %)	Gesamt: 1,78 MB -Bilder: 658 KB (36%)
Anzahl der HTTP-Anfragen – % der von Bildern belegten Größe	Gesamt: 75 – Bilder: 41 (55%)	Gesamt: 72 – Bilder: 38 (52%)
	JPG-Größe: 160 KB 117 KB 27 KB 103 KB 91 KB 195 KB 74 KB 75 KB 164 KB 13 KB	JPG-Größe (-50 % Ersparnis): 82 KB 60 KB 13 KB 56 KB 42 KB 98 KB 37 KB 41 KB 90 KB 6 KB

Wir können sehen, dass Imagify meine Seite heller gemacht hat, indem es die Bilder komprimiert, in der Größe angepasst und in das WebP-Format konvertiert hat . Wir haben sogar eine Eins für GTmetrix bekommen!

Außerdem haben wir festgestellt, dass der von Bildern eingenommene Platz bei der Verwendung von Imagify geringer war. Und zu guter Letzt sieht meine Website immer noch super aus und ich habe keine unscharfen Bilder.

Einpacken

Es ist nicht immer einfach zu erkennen, was die langsame Seitenladegeschwindigkeit einer Website verursacht. Es gibt viele verantwortliche Faktoren wie zum Beispiel nicht optimierte Bilder, eine hohe Anzahl von HTTP-Anfragen, sperrige Codes und JavaScript-Probleme. Es kann sich lohnen, herauszufinden, was los ist, denn wenn Sie dieses Problem nicht früh genug beheben, kann dies zu Umsatzeinbußen führen.

In unserem Audit haben wir mit Imagify mit einem einzigen Klick bis zu 50 % Dateigröße eingespart:

Das Optimieren von Bildern sollte ganz oben auf Ihrer Liste stehen, und sehen Sie, wie sehr Imagify es für Sie bequem macht! Versuchen Sie, Bilder auf Ihrer WordPress-Seite mit der kostenlosen Testversion von Imagify zu optimieren, und teilen Sie uns mit, wie viele Daten Sie eingespart haben.