Kategorien

PageSpeed-Optimierung: Schneller ladende Bilder Teil 1 - WebP

Die Seitengeschwindigkeit ist eine entscheidende Komponente für eine Website. Sie können die Geschwindigkeit Ihrer Website erhöhen, indem Sie eine Reihe von Änderungen zur Optimierung der Seitengeschwindigkeit vornehmen. Eine davon ist die Bildoptimierung.

Google hat bestätigt, dass die Seitengeschwindigkeit ein Rankingfaktor ist und die Geschwindigkeit einer Website das Ranking beeinflussen kann. Die SIA hat diese Aussage getestet, um zu prüfen und zu bestätigen, was genau Google berücksichtigt, wenn es um die Seitengeschwindigkeit geht - ist es die Ladezeit, die Zeit bis zum ersten Byte oder die erste inhaltsreiche Farbe? Wir fanden heraus, dass die Seitenladezeit oder die Zeit, die eine Seite zum vollständigen Laden benötigt, kein Ranking-Faktor ist, die Zeit bis zum ersten Byte jedoch schon. Daraus folgt, dass es am besten ist, Ihre TTFB klein.

Abgesehen von der Aussage von Google, dass sie ein Rankingfaktor ist, ist die Seitengeschwindigkeit auch ein Faktor für die Nutzererfahrung. Nutzer, die eine Website besuchen, die langsam lädt, verlassen die Seite in den meisten Fällen. Dies kann zu einem Anstieg der Absprungrate führen und die Konversionsraten beeinträchtigen.

zufriedene Website-Besucher

Wie Sie sehen, ist die Seitengeschwindigkeit ein wichtiger Faktor einer Website, und die Optimierung der Seitengeschwindigkeit Ihrer Website, damit sie schnell lädt, stellt nicht nur Google zufrieden, sondern auch die Besucher Ihrer Seite. Es gibt eine Reihe von Maßnahmen zur Optimierung der Seitengeschwindigkeit, die Sie ergreifen können, um die Geschwindigkeit Ihrer Website zu verbessern. Eine davon ist die Optimierung Ihrer Bilder.

Bilder sind oft die größte Datei auf einer Webseite und einer der Hauptfaktoren, die die Geschwindigkeit einer Website verlangsamen. Es ist wichtig, die Bilder so zu optimieren, dass die Dateigrößen nicht sehr groß sind, aber dennoch qualitativ hochwertige Bilder geliefert werden.

In einem unserer Tests in der SIA haben wir getestet, ob Google JPG- oder PNG-Bilder bevorzugt, und festgestellt, dass es zwar keine besondere Präferenz zwischen den beiden gibt, es aber auf die Seitengeschwindigkeit ankommt. In den Tests diskutierte Clint seine Erkenntnisse über Bildformate und Seitengeschwindigkeit und stellte zwei Bilddateitypen der nächsten Generation vor, die im Vergleich zu JPG und PNG schneller geladen werden. Es handelt sich um WebP und AVIF.

Obwohl diese beiden Formate nicht gerade neu sind, sind sie nicht so beliebt wie JPG und PNG und werden oft übersehen. Das brachte mich auf die Idee, über diese beiden Bildtypen zu schreiben, um beide Formate näher zu erörtern - was diese Bilddateitypen sind, ihre Vor- und Nachteile und wie Sie sie auf Ihren Seiten einsetzen können.

In Teil 1 dieses Artikels werden wir uns mit WebP befassen. Was ist WebP? Sollten Sie Ihre Bilder auf WebP umstellen? Wenn ja, wie können Sie es auf Ihrer Website anwenden?

Was ist WebP?

was ist webp

WebP ist eigentlich kein neues Bildformat. Es wurde 2010 von Google entwickelt und verwendet im Vergleich zu anderen gängigen Bildformaten einen optimierten Komprimierungsalgorithmus.

WebP ist ein Bildformat, das eine hervorragende verlustfreie und verlustbehaftete Komprimierung von Bildern ermöglicht. Im Vergleich zu JPG, GIF und PNG reduziert WebP die Dateigröße erheblich, während die Qualität des Bildes erhalten bleibt.

Früher war es eine Entscheidung zwischen Dateigröße und Bildqualität. Mit der Einführung von WebP wurde diese Frage dank der geringeren Dateigröße und der hohen Bildqualität gelöst.

Sie können fast alle Bildformate in WebP konvertieren und erhalten fast die gleiche Bildqualität wie das ursprüngliche JPG-, PNG- oder andere Format. Allerdings ist die Dateigröße deutlich geringer - zwischen 20 und 40 Prozent.

WebP wurde früher nicht von Internet Explorer und Safari unterstützt, aber zum Zeitpunkt der Erstellung dieses Artikels (September 2021) unterstützen über 94% der Webbrowser WebP. Viele Websites verwenden heutzutage WebP für ihre Bilder, weil es schneller lädt. Sie werden keine Unterschiede im Dateityp erkennen können.

Youtube-Thumbnails, die in Chrome angezeigt werden, sind im WebP-Format, und auch Facebook verwendet dieses Format auf Android-Geräten.

Webbrowser moomba

Ein weiterer Vorteil von WebP ist neben der besseren Komprimierung die Unterstützung transparenter Hintergründe, ähnlich wie bei PNG. Es unterstützt auch Übergänge und Animationen, ähnlich wie bei GIF, ist aber kleiner und von ähnlicher Qualität.

Wie Sie WebP auf Ihre Website anwenden

Website-Änderungen vornehmen moomba

Sind Sie von den Vorteilen von WebP überzeugt und möchten Sie Ihre Bilder auf dieses Format aktualisieren? Sie fragen sich, wie Sie es auf Ihrer Website einsetzen können?

Es gibt Tools und Plugins, mit denen Sie Ihre JPG-, PNG- oder anderen Bilder in WebP umwandeln können.

Für Online-Tools können Sie Squoosh und Online-convert.com verwenden. Alles, was Sie tun müssen, ist, Ihre JPG- oder PNG-Bilder hochzuladen und sie dann in WebP umzuwandeln.

Zuvor unterstützte Photoshop WebP nicht. Es wurde jedoch ein WebP-Photoshop-Plugin zur Verfügung gestellt, das Sie installieren können und das es Ihnen ermöglicht, Ihre Bilder in diesem Format zu speichern.

Wenn Sie mit WordPress arbeiten, wird WebP ab WordPress 5.8 unterstützt und Sie können Ihre Bilder direkt in Ihre Mediathek hochladen, genauso wie Sie es mit JPG-, PNG- und GIF-Bildern tun würden. Sie müssen keine Plugins von Drittanbietern installieren, damit das Bildformat funktioniert.

Wenn Sie nicht mit WordPress 5.8+ arbeiten oder wenn Sie sich Sorgen machen, dass WebP-Bilder für Besucher, die nicht unterstützte Browser verwenden, nicht angezeigt werden, dann ist es am besten, ein Plugin zu verwenden.

Mit einem Plugin werden Ihre JPG- oder PNG-Bilder in WebP umgewandelt, wenn der Besucher einen unterstützten Browser verwendet. Wenn der Browser des Besuchers WebP nicht unterstützt, wird das JPG- oder PNG-Bild angezeigt. Auf diese Weise haben Sie die Gewissheit, dass jeder Ihre Bilder sehen kann und dass diejenigen, die einen unterstützten Browser verwenden, Ihre Seiten schnell betrachten können!

Plugins, die Sie zu diesem Zweck verwenden können, sind unter anderem ShortPixel, Imagify und Optimole.

Wenn Sie die Geschwindigkeit Ihrer Website erhöhen möchten, ist WebP definitiv eine gute Option für Sie. Ihre Besucher erhalten das gleiche Erlebnis wie bei der Verwendung eines JPG- oder PNG-Bildes, während alles schneller geladen wird. PageSpeed Insights empfiehlt sogar, Ihre Bilder im WebP-Format bereitzustellen, um die Geschwindigkeit Ihrer Website zu erhöhen.

Ist das ein Ranking-Faktor, fragen Sie? Das ist etwas, das wir in der SIA nicht getestet haben, aber zu unserer Liste der zu testenden Dinge hinzufügen werden.

Dennoch, Rankingfaktor hin oder her, Sie haben den Vorteil, dass Ihre Seiten schneller geladen werden, was sowohl Google als auch Ihre Besucher glücklich macht. Eine Win-Win-Situation!

Im zweiten Teil dieses Artikels werden wir über das Bildformat AVIF sprechen, das schneller ist als WebP. Sollten Sie sich für AVIF entscheiden oder ist WebP ausreichend? Wir besprechen dies alles in Teil 2 des Artikels.

Marie Aquino

SIA STAFF SEO WRITER

Marie's vollständige Biographie hier.