TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie stelle ich WebP-Bilder in SiteGround bereit?

4

SiteGround ist eines der empfohlenen Hosting-Unternehmen von offiziellem WordPress.org. In den letzten Jahren hat sich das SiteGround- Hosting auf eine andere Ebene entwickelt. Sie haben das traditionelle cPanel-Setup ersetzt und alle vorhandenen Konten in ihr benutzerdefiniertes Site-Tools-Setup migriert. Damit können Sie WebP-Bilder anstelle von PNG oder JPEG bereitstellen, um die Ladegeschwindigkeit Ihrer Website zu erhöhen. In diesem Artikel erklären wir, wie Sie WebP-Bilder in SiteGround bereitstellen und im Browser überprüfen.

Verwandte: Wie verwende ich WebP in WordPress, um den Fehler bei der Bereitstellung von Bildern in Formaten der nächsten Generation im Google PageSpeed ​​Insights-Tool zu beheben?



Warum WebP-Bilder?

Immer wenn Sie den Seitengeschwindigkeits-Score im Google PageSpeed ​​Insights- Tool überprüfen, werden Ihnen viele Möglichkeiten angezeigt, die die Website-Geschwindigkeit verbessern können. Einer der wichtigsten Vorschläge, die Sie nicht ohne weiteres lösen können, ist „Bilder in Formaten der nächsten Generation bereitstellen”. Die Formate der nächsten Generation umfassen WebP, JPEG 2000 oder JPEG XR, um die traditionellen Bildformate PNG und JPEG zu ersetzen.

Wie stelle ich WebP-Bilder in SiteGround bereit?

Bereitstellen von Bildern in Formaten der nächsten Generation

Daher hilft Ihnen das Bereitstellen von WebP-Bildern, das Problem mit Google PageSpeed ​​Insights zu lösen. Darüber hinaus reduziert es die Bildgröße bei gleicher Qualität auf mehr als 75 % und verbessert so die Seitenladegeschwindigkeit.

Wie funktioniert es mit SiteGround?

SiteGround bietet das SG Optimizer-Plugin, mit dem Sie die Konvertierung aller Ihrer Bilder in das WebP-Format aktivieren können. Das Gute daran ist, dass Sie kein weiteres Setup benötigen.

  • Alle WebP-Bilder werden serverseitig gespeichert und können nicht in Ihrer Medienbibliothek oder über FTP angezeigt werden.
  • Sie können überprüfen, ob WebP-Bilder geladen werden, wenn Sie die Site im Browser anzeigen.
  • Sie müssen WebP für einzelne Sites auf Ihrem Hosting-Account aktivieren.

Wie stelle ich WebP-Bilder in SiteGround bereit?

Wenn Sie SG Optimizer nicht verwenden, müssen Sie zuerst das Plugin installieren.

  • Melden Sie sich bei Ihrer WordPress-Site an und gehen Sie zum Abschnitt „Plugins > Neu hinzufügen”.
  • Suchen Sie nach „SG Optimizer”, um das Plugin zu finden.
  • Installieren und aktivieren Sie das Plugin auf Ihrer Site.

Wie stelle ich WebP-Bilder in SiteGround bereit?

SG Optimizer-Plugin installieren

Gehen Sie nach der Installation von SG Optimizer zum Menü „SG Optimizer” und dann zum Abschnitt „Media Optimization”. Hier haben Sie die Möglichkeit, WebP-Bilder auf Ihrer Site zu aktivieren.

Denken Sie daran, wenn Sie bereits Caching-Plugins verwenden, sollten Sie keine anderen Optionen im SG Optimizer-Plugin aktivieren. Stellen Sie sicher, dass Sie nicht die gleichen Optionen in zwei Plugins aktivieren und die Site beschädigen.

WebP für neue Bilder aktivieren

Aktivieren Sie zuerst die Option "WebP-Kopien neuer Bilder generieren". Wählen Sie den Optimierungstyp, um die Qualität Ihrer WebP-Bilder auszuwählen. Die verlustfreie Option hilft Ihnen, die Qualität beizubehalten, und die verlustbehaftete Option reduziert die Größe auf viel weniger, indem Sie die Bildqualität reduzieren.

Wie stelle ich WebP-Bilder in SiteGround bereit?

Generieren Sie WebP-Bilder in SiteGround

Wir empfehlen Ihnen, verlustfrei zu wählen, um die Qualität mit nominaler Verkleinerung zu erhalten. Wenn Sie jedoch größere Bilder auf Ihrer Website haben und eine Qualitätsminderung für Sie akzeptabel ist, wählen Sie die verlustbehaftete Option. Für die verlustbehaftete Option können Sie den Prozentsatz der Qualität auswählen, indem Sie den Schieberegler ziehen.

Wie stelle ich WebP-Bilder in SiteGround bereit?

Generieren Sie verlustbehaftetes WebP in SiteGround

Laden Sie ein neues Bild hoch und überprüfen Sie die Qualität einiger Bilder im Browser (siehe dazu den folgenden Abschnitt), bevor Sie alle vorhandenen Bilder massenverarbeiten.

Massengenerierung von WebP-Dateien

Sobald Sie sich für die Qualität entschieden und eingerichtet haben, klicken Sie auf die Schaltfläche „Bulk Generate WebP Files”. Dadurch wird die WebP-Version für alle Ihre vorhandenen Bilder neu generiert. Im Gegensatz zur normalen Bildoptimierungsoption dauert das Erstellen von WebP-Bildern je nach Anzahl der Bilder auf Ihrer Website nur weniger Zeit. In unserem Fall haben wir 14K-Bilder, die kaum weniger als eine Minute gedauert haben.

Ändern der Qualität

Sie können jederzeit entscheiden, ob Sie die Qualität von verlustfrei auf verlustreich oder umgekehrt ändern möchten. Sie können die Qualität der verlustbehafteten WebP-Bilder auch später jederzeit ändern. Wenn Sie die Qualität ändern, klicken Sie auf den Link „Neu generieren”, um Bilder mit neuer Qualität neu zu generieren. Alternativ klicken Sie auf die Schaltfläche „Alle WebP-Dateien löschen” und dann auf „WebP-Dateien im Bulk generieren”, um Bilder mit neuer Qualität neu zu generieren.

Testen von WebP-Bildern im Browser

Öffnen Sie Ihre Website in Google Chrome und überprüfen Sie den Quellcode aus der Developer Console. Sie werden weiterhin sehen, dass PNG- oder JPEG-Bilder anstelle von WebP-Bildern geladen werden. Dies ist jedoch nicht der richtige Weg, um zu überprüfen.

Wie stelle ich WebP-Bilder in SiteGround bereit?

Quelle mit PNG-Bild

Da Sie keine WebP-Bilder auf dem Hosting-Server oder in der Medienbibliothek sehen können, sind Sie möglicherweise verwirrt, ob es auf Ihrer Site funktioniert oder nicht. Befolgen Sie die nachstehenden Anweisungen, um zu bestätigen, dass Ihre Site mit WebP-Bildern funktioniert.

  • Öffnen Sie Google Chrome und öffnen Sie den Abschnitt Chrome-Entwicklertools. Sie können auf Entwicklertools zugreifen, indem Sie in Windows F12 drücken und auf dem Mac zu "Option + Command + I" gehen.
  • Klicken Sie auf die Registerkarte "Netzwerk" und öffnen Sie die Webseite in der Adressleiste. Wenn Sie die Seite bereits geöffnet haben, klicken Sie auf die Schaltfläche Aktualisieren, um die Seite neu zu laden.
  • Jetzt können Sie sehen, dass die Netzwerkaktivitäten aufgezeichnet werden, und klicken Sie auf die Registerkarte "Img".
  • Hier können Sie den Typ der von Ihrer Site geladenen Ressource sehen.
  • Sie können die Spalte „Name” oder „Typ” sortieren, um den Bildtyp zu überprüfen. Es sollte als „WebP” angezeigt werden.
  • Auf diese Weise können Sie bestätigen, dass WebP-Bilder von Ihrer Website bereitgestellt werden.

Wie stelle ich WebP-Bilder in SiteGround bereit?

SiteGround WebP im Browser überprüfen

Alternative Testmethode

Die andere Testmethode ist einfach.

  • Öffnen Sie Ihre Webseite in Chrome und klicken Sie mit der rechten Maustaste auf eines der Bilder.
  • Wählen Sie die Option „Bild speichern unter…”.

Wie stelle ich WebP-Bilder in SiteGround bereit?

Bild speichern als

  • Sie sollten das Bildformat als "Google WebP" sehen.

Wie stelle ich WebP-Bilder in SiteGround bereit?

WebP-Bild speichern

Obwohl das Originalbild PNG (oder JPEG) ist, sollten Sie das Format als "Google WebP" sehen, da dies das auf Ihrer Website verfügbare Bildformat ist.

Zwischengespeicherte WebP-Bilder

Mit einigen Caching-Plugins wie WP Rocket können Sie WebP-Bilder zwischenspeichern. Wenn Sie WebP-Bilder zwischenspeichern, finden Sie die .png.webp- oder .jpg.webp-Versionen auf Ihrem Hosting-Server im Upload-Verzeichnis. Dies ist nicht das Standardverhalten des SiteGround WebP-Dienstes. Wenn Sie das Caching-Plugin deaktivieren, wird die Cache-Generierung gestoppt und Sie sollten eine der oben genannten Methoden zur Überprüfung verwenden.

Wie stelle ich WebP-Bilder in SiteGround bereit?

WebP-Caching in WP Rocket

Wie viel Größe kann ich sparen?

Dies hängt wirklich von der Qualität ab, die Sie für Ihre WebP-Bilder wählen. In unserem Fall wählen wir die verlustfreie Option und sparen mehr als 77% für ein einzelnes Bild.

  • Original-PNG-Bildgröße – 139 KB
  • WebP-Bildgröße – 31 KB

Zurück mit Google PageSpeed ​​Insights testen

Kehren Sie nun zum Google PageSpeed ​​Insights-Tool zurück und testen Sie eine Ihrer Webseiten. Der Vorschlag, Bilder im Format der nächsten Generation bereitzustellen, sollte jetzt verschwinden.

Zu beachtende Punkte

Beachten Sie die folgenden Punkte, wenn Sie WebP auf Ihrer Site verwenden:

  • Nicht alle Browser unterstützen WebP. Überprüfen Sie Ihre Website in Google Chrome oder einem unterstützten Browser.
  • Caching-Plugins wie WP Rocket bieten das Zwischenspeichern von WebP-Bildern an, um die Ladegeschwindigkeit der Seite zu erhöhen. Diese Caching-Plugins erkennen jedoch keine WebP-Bilder auf dem SiteGround-Server. Sie können dies mit dem Plugin-Entwickler bestätigen, bevor Sie das Caching von WebP-Bildern aktivieren.
  • CDN-Dienste wie Cloudflare funktionieren nahtlos mit SiteGround. Wenn Sie jedoch ein separates CNAME-Setup zum Bereitstellen von Mediendateien über CDN haben, erkundigen Sie sich bei Ihrem CDN-Anbieter, ob er WebP-Bilder bereitstellen kann.
  • Die WebP-Option ist für Websites, die noch das cPanel-Setup verwenden, nicht verfügbar. Sie müssen warten, bis SiteGround Ihr Konto zu Site Tools migriert hat.
  • Sie müssen das SG Optimizer-Plugin verwenden, um WebP zu aktivieren. Ohne das Plugin können Sie es nicht von Ihrem Hosting-Konto aus aktivieren.
  • Stellen Sie sicher, dass Sie die Bilder jedes Mal neu generieren, wenn Sie die Qualität der WebP-Bilder ändern.

Letzte Worte

Die Geschwindigkeit der Website wird mit den von Google angekündigten Core Web Vitals zu einem wichtigen Faktor, der das Ranking in Zukunft beeinflussen wird. SiteGround-Websites befinden sich bereits auf der Google Cloud-Plattform und mit WebP sind Sie Ihrer Konkurrenz, die bei anderen Unternehmen gehostet wird, weit voraus.

Aufnahmequelle: webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen