Die meisten von uns wissen mittlerweile, dass die Bildoptimierung sehr wichtig ist, da sie einen großen Anteil an den Gesamtladezeiten Ihrer WordPress-Website hat. Heute möchten wir Ihnen eine einfache Alternative zur Integration der WebP-Dateien von Google in Ihre WordPress-Site vorstellen. Einige Benutzer haben eine Reduzierung der Bilddateigröße von über 70% festgestellt!
Was ist WebP?
Wenn Sie nicht vertraut sind mit WebP, ist es ein Bilddateiformat, das vom Webleistungsteam von Google mit der Absicht erstellt wurde, kleinere und schnellere Bilder zu erstellen. Es wurde erstmals 2010 angekündigt und bietet sowohl verlustbehaftete als auch verlustfreie Komprimierungsmethoden. Die Bilder werden von einem Webserver basierend auf dem verwendeten MIME-Typ an den Webbrowser geliefert image/webp
.
Verlustfreie WebP-Bilder sind 26% kleiner in der Größe im Vergleich zu PNGs und WebP verlustbehafteten Bildern sind 25-34% kleiner als JPEGs.
Unternehmen wie YouTube und eBay verwenden WebP bereits, um viele ihrer Websites im Hintergrund zu betreiben. Unten ist ein Beispiel von eBay, wo auf ihrer Homepage durchschnittlich etwa 30 WebP-Dateien vorhanden sind.
Warum ist WebP so wichtig? Gemäß httparchiv, Stand August 2016, Bilder machen über 64 % des Gewichts einer durchschnittlichen Webseite aus. Normalerweise ist es mehr als Ihr CSS, JS und HTML zusammen. Daher ist die Wahl einer robusten Bildoptimierungsmethode und eines Bildformats wie WebP entscheidend, damit Sie Ihr Seitengewicht so weit wie möglich reduzieren können. Generell gilt: Je kleiner Ihre Seite ist, desto schneller wird sie geladen. Und das wird nicht nur Ihren Besuchern gefallen, sondern auch Google, da Seitengeschwindigkeit ist ein Rankingfaktor.
WebP-Unterstützung
Obwohl WebP sehr aufregend ist, ist es auch wichtig, die Browserunterstützung zu erwähnen. Derzeit unterstützen nicht alle modernen Browser WebP. Gemäß kann ich benutzen, WebP wird derzeit in Chrome 23+, Opera 39+, allen Versionen von Opera mini, Android-Browser 4.3+ und Chrome für Android unterstützt.
Aber warte! Seien Sie nicht zu enttäuscht, denn im Tutorial, das wir Ihnen unten zeigen, gibt es eine Methode, um Bereitstellung von WebP-Dateien an unterstützte Browser und JPG/PNGs als Fallback. Dies bedeutet, dass nicht unterstützte Browser kein defektes Bild sehen, sondern nur das sehen, was sie zuvor gesehen haben. Stellen Sie sich WebP als Ergänzung zu Ihrer WordPress-Site und nicht als Migration vor.
Gemäß W3Schulen, Chrome hat mit etwas mehr als 70 % das Monopol auf den Browser-Marktanteil. Aber nehmen Sie den Marktanteil nicht nur als soliden Beweis, sondern sehen Sie sich die Daten Ihrer eigenen Besucher an und sehen Sie, welche Browser sie verwenden, da sie je nach Nische unterschiedlich sein können. Sie werden jedoch überrascht sein, wie verzerrt die Statistiken sind. In Google Analytics können Sie unter „Zielgruppe“ auf „Browser & Betriebssystem“ klicken und sehen, welche Browser die Leute verwenden, wenn sie auf Ihre Seite gelangen. Wir haben eine zufällige Website erstellt und wie Sie unten sehen können, stammen 67 % der Besucher von Chrome und weitere 1 % von Opera. So 68 % dieser Personen können das WebP anzeigen und davon profitieren Bilddateiformat!
So verwenden Sie WebP-Dateien in WordPress
Im heutigen Beispiel verwenden wir eine Kombination aus zwei verschiedenen WordPress-Plugins, um WebP in WordPress zum Laufen zu bringen. Diese werden vom Team von KeyCDN, einem globalen Content Delivery Network (CDN), erstellt und entwickelt.
- [premium] Optimus Bildoptimierer: Plugin zur verlustfreien Bildkomprimierung für WordPress, konvertiert Bilder in WebP
- [free] WordPress Cache Enabler: Caching-Plugin, das ermöglicht Ihnen die Bereitstellung von WebP zu unterstützten Browsern
Optimus Bildoptimierer
Sie können Optimus Image Optimizer von der WordPress-Repository, von optimus.io, oder von Ihrem Plugin-Dashboard aus. Hinweis: Es ist eine Premium-Lizenz erforderlich, wenn Sie Ihre Bilder in WebP konvertieren möchten. Nach der Installation können Sie in den Plugin-Einstellungen die „Erstellung von WebP-Dateien“ aktivieren.
Nachdem WebP aktiviert ist, erstellt dies im Wesentlichen ein zusätzliches Bild für alles, was konvertiert wird. Wenn Sie also eine PNG-Datei oder JPG hochladen, gibt es jetzt auch eine .webp-Version Ihres Bildes. Denken Sie daran, dass PNG/JPG weiterhin benötigt wird, da diese immer noch für nicht unterstützte Browser verwendet werden. Optimus führt eine verlustfreie Komprimierung durch, sodass Ihre PNG- und JPG-Dateien ebenfalls komprimiert werden.
Es gibt auch eine Bulk-Optimierer-Option für den Fall, dass Sie Ihre Bilder bereits zuvor komprimiert haben und sie noch in WebP konvertieren müssen.
WordPress Cache Enabler
Da Sie nun über WebP-Bilder verfügen, müssen Sie WordPress anweisen, WebP-Bilder für unterstützte Browser und PNG/JPG für die anderen Browser bereitzustellen. Dies kann mit dem kostenlosen WordPress Cache Enabler-Plugin erreicht werden. Sie können das Plugin von der herunterladen WordPress-Repository oder installieren Sie es von Ihrem Plugin-Dashboard aus. Nach der Installation können Sie in den Plugin-Einstellungen die Option „Zusätzliche WebP-Cache-Version erstellen“ aktivieren.
Sobald Sie diese Option aktivieren, wird eine zusätzliche zwischengespeicherte WebP-Version Ihrer Seite erstellt.
Und das ist alles! Jetzt sollten WebP-Dateien auf Ihrer WordPress-Website ausgeführt werden.
Vergleich von JPG zu WebP
Wir haben einen Vergleich durchgeführt von JPG zu WebP um die Unterschiede aufzuzeigen, die Sie erreichen können.
DATEINAMEN | ORIGINAL-JPG | KOMPRIMIERTES JPG | WEBP-FORMAT | GRÖßENUNTERSCHIED % |
---|---|---|---|---|
jpg-to-webp-1.jpg | 758 KB | 685 KB | 109 KB | 86% |
jpg-to-webp-2.jpg | 599 KB | 529 KB | 58,8 KB | 90% |
jpg-to-webp-3.jpg | 960 KB | 881 KB | 200 KB | 79% |
jpg-to-webp-4.jpg | 862 KB | 791 KB | 146 KB | 83% |
jpg-to-webp-5.jpg | 960 KB | 877 KB | 71,7 KB | 93% |
WebP führte zu a 85,87% Verringerung der durchschnittlichen Bildgröße.
PNG-zu-WebP-Vergleich
Auch hier haben wir einen Vergleich von PNG zu WebP um die Unterschiede aufzuzeigen, die Sie erreichen können.
Dateinamen | Original-PNG | Komprimiertes PNG | WebP-Format | Größenunterschied % |
---|---|---|---|---|
png-to-webp-1.png | 44 KB | 34 KB | 30 KB | 32% |
png-to-webp-2.png | 46 KB | 35 KB | 33 KB | 28% |
png-to-webp-3.png | 43 KB | 31 KB | 25 KB | 42% |
png-to-webp-4.png | 30 KB | 24 KB | 18 KB | 40% |
png-to-webp-5.png | 15 KB | 11 KB | 8 KB | 47% |
png-to-webp-6.png | 34 KB | 24 KB | 18 KB | 47% |
png-to-webp-7.png | 15 KB | 13 KB | 8 KB | 47% |
png-to-webp-8.png | 63 KB | 47 KB | 44 KB | 30% |
png-to-webp-9.png | 48 KB | 36 KB | 33 KB | 31% |
png-to-webp-10.png | 17 KB | 14 KB | 11 KB | 35% |
png-to-webp-11.png | 18 KB | 13 KB | 9 KB | 50% |
png-to-webp-12.png | 61 KB | 45 KB | 39 KB | 36% |
png-to-webp-13.png | 32 KB | 25 KB | 21 KB | 35% |
png-to-webp-14.png | 26 KB | 21 KB | 17 KB | 35% |
png-to-webp-15.png | 14 KB | 12 KB | 9 KB | 36% |
png-to-webp-16.png | 36 KB | 27 KB | 24 KB | 33% |
png-to-webp-17.png | 14 KB | 12 KB | 8 KB | 43% |
png-to-webp-18.png | 21 KB | 18 KB | 13 KB | 38% |
png-to-webp-19.png | 42 KB | 30 KB | 27 KB | 36% |
png-to-webp-20.png | 23 KB | 20 KB | 18 KB | 22% |
WebP führte zu a 42,8% Verringerung der durchschnittlichen Bildgröße.
Zusammenfassung
Wie Sie sehen, ist WebP sehr einfach auf Ihrer WordPress-Site zu implementieren und Sie können drastisch kleinere Bilddateigrößen erzielen! Es gibt keine Bildkomprimierung, die mit den Einsparungen von WebP vergleichbar ist. Oh, und haben wir schon erwähnt, dass WebP verlustfreie Komprimierung verwenden kann? Das bedeutet, dass Sie keinen merklichen Qualitätsverlust feststellen werden. Wenn Sie nach einer besseren Möglichkeit suchen, WordPress zu beschleunigen, kann WebP eine großartige Lösung sein.