Wir sind immer auf der Suche nach neuen und innovativen Wegen, um deine WordPress-Seiten weiter zu beschleunigen und zu optimieren. In den letzten Monaten hat unser Team hinter den Kulissen mit den Entwicklern von WP Rocket zusammengearbeitet, um einige Änderungen an ihrem brandneuen Version 3.0 Plugin (veröffentlicht am 3. April 2018) abzustimmen. Wir freuen uns, dir mitteilen zu können, dass WP Rocket 3.0 und Kinsta nun voll kompatibel sind und von nun an verfügbar sein werden.

Informiere dich unten über alles, was du wissen musst, um WP Rocket bei Kinsta zu benutzen und wie es für dich und deine Kunden eine gute Wahl sein kann.

WP-Rocket bei Kinsta einsetzen

Für diejenigen unter euch, die nicht mit WP Rocket vertraut sind: es ist ein beliebtes All-in-One Premium Caching und Optimierungs-Plugin für WordPress. Normalerweise erlauben wir keine Caching-Plugins in unserer Systemumgebung, da sie im Konflikt mit unserer integrierten Caching-Lösung stehen. Ab WP Rocket 3.0 wird die Page-Caching-Funktionalität jedoch automatisch deaktiviert, wenn sie auf Kinsta-Servern ausgeführt wird. Bisher musste dies manuell mit dem Page-Caching-Modul erfolgen. Wir haben auch das Plugin aus unserer Sperrliste entfernt.

Dies ermöglicht es dir, jetzt die Caching-Lösung von Kinsta zu nutzen, aber trotzdem die erstaunlichen Optimierungsfunktionen zu nutzen, die WP Rocket zu bieten hat (wir werden auf diese unten eingehen).

Warum ist Caching wichtig? Caching ist der Prozess des Speicherns von Ressourcen aus einer Anfrage und der Wiederverwendung dieser Ressourcen für nachfolgende Anfragen. Grundsätzlich reduziert es den Arbeitsaufwand für die Generierung eines Pageviews und entlastet den Webserver. Es ist der beste Weg, die Verzögerung durch die Abhängigkeit, die WordPress von PHP und einer Datenbank hat, zu kompensieren (finde hier mehr über WordPress vs statisches HTML heraus).

WP Rocket 3.0 Funktionen

Wenn du die neue Version 3.0 von WP Rocket noch nicht gesehen hast, ist die Benutzeroberfläche wunderschön, während sie dennoch einfach zu bedienen und zu navigieren ist! Im Folgenden werden wir auf einige der empfohlenen Funktionen eingehen, die du von WP Rocket ausnutzen kannst, um deine WordPress-Seite zu beschleunigen, sowie darauf, wie sie mit der Kinsta-Umgebung synchronisiert wurde.

Wir werden auch einige Geschwindigkeitstests durchführen, um zu sehen, welche Optionen die größten Auswirkungen auf eine Live-Site haben. Denk jedoch daran, dass die Ergebnisse von Seite zu Seite variieren können, also stelle sicher, dass du auf deiner eigenen Seite oder auf deiner eigenen Staging-Seite testest. Wenn du eine Staging-Site bei Kinsta benutzt, hat WP Rocket unsere URL-Struktur (Staging-Sitename.kinsta.com) auf die weiße Liste gesetzt, was bedeutet, dass sie nicht als Site gegen deine gesamte Lizenzanzahl gezählt wird. Das Gleiche gilt für die Ausführung auf localhost.

WP Rocket UI

WP Rocket UI

Cache löschen

Obwohl das Caching in WP Rocket automatisch deaktiviert wird, wenn es auf Kinsta läuft, wird die Option „Cache löschen“ im Menü von WP Rocket mit der Kinsta-Umgebung synchronisiert. Wenn du deinen WP Rocket-Cache leerst, wird stattdessen der Kinsta-Cache deiner gesamten Website geleert.  Wie cool ist das denn? Und wie immer kannst du deinen Kinsta-Cache oben rechts in der Admin-Leiste leeren.

Cache bereinigen (2 Methoden)

Cache bereinigen (2 Methoden)

Die „Purge this URL“ funktioniert ebenfalls auf die gleiche Weise, aber anstatt den gesamten Cache deiner Website zu bereinigen, löscht sie den Cache der URL, auf der du dich gerade befindest. Dies ist großartig, wenn du vielleicht ein manuelles Update auf eine Seite oder einen Beitrag gemacht hast. Aus Performance-Gründen empfehlen wir nicht, den gesamten Cache deiner Website ständig zu leeren, da er dann neu aufgebaut werden muss. Das Bereinigen einzelner URLs ist ein viel besserer Weg.

WP Rocket Purge Cache für einzelne URLs

WP Rocket Purge Cache für einzelne URLs

Wenn man etwas auf seiner WordPress-Seite ändert, z.B. ein Plugin oder ein Thema, wird möglicherweise eine Warnung von WP Rocket angezeigt. Der Button Clear cache hier löscht auch den Kinsta-Cache.

WP Rocket ändert den Clear Cache

WP Rocket ändert den Clear Cache

Wenn du schließlich im WP Rocket Dashboard auf die Schaltfläche „Cache löschen“ klickst, wird auch der Kinsta-Cache gelöscht.

WP Rocket entfernt alle gecachten Dateien

WP Rocket entfernt alle gecachten Dateien

Datei-Optimierung

Unter dem Menü „Dateioptimierung“ bieten sie dir die Möglichkeit, deine CSS- und JavaScript-Dateien zu optimieren. Lasst uns ein wenig in jedes dieser Themen eintauchen.

WP Rocket Dateioptimierung

WP Rocket Dateioptimierung

Grundeinstellungen

  • HTML verkleinern: Die Bearbeitung von HTML entfernt Leerzeichen und Kommentare, um die Größe zu reduzieren. Wir haben Geschwindigkeitstests durchgeführt und eine Verkürzung der Ladezeit um 0,84% festgestellt, wenn diese Option aktiviert ist. ⏱ Du siehst vielleicht keine irrsinnigen Verbesserungen mit dieser Funktion, aber im Allgemeinen ist weniger Whitespace und Code eine gute Sache.
  • Kombiniere Google Fonts-Dateien: Die Kombination von Google-Schriften reduziert die Anzahl der HTTP-Anfragen. Wenn man einen Host mit aktiviertem HTTP/2 verwendet, ist es aufgrund von Verbesserungen bei der Parallelisierung nicht mehr empfehlenswert, Dateien zu kombinieren. Kinsta unterstützt HTTP/2 vollständig. Das Laden der Schriften aus dem eigenen CDN kann auch die Performance verbessern. In unserem Leitfaden erfährst du, wie du lokale Schriften hosten kannst.
  • Entfernen von Abfragezeichenketten aus statischen Ressourcen: Deine CSS- und JavaScript-Dateien haben in der Regel die Dateiversion am Ende ihrer URLs, z.B. domain.com/style.css?ver=4.6. Einige Server und Proxy-Server können Abfragezeichenketten nicht zwischenspeichern, auch wenn ein Cache-control:public-Header vorhanden ist. Wenn du sie also entfernst, kannst du manchmal dein Caching verbessern. Wir haben Geschwindigkeitstests durchgeführt und eine Verkürzung der Ladezeit um 1,86% festgestellt, wenn diese Option aktiviert ist. ⏱ Lies hier mehr darüber, wie Abfragezeichenketten funktionieren. Hinweis: Man kann dies nicht zusammen mit den Minify CSS- oder JavaScript-Optionen verwenden.

CSS-Dateien

  • Verkleinere CSS-Dateien: Minify CSS entfernt Leerzeichen und Kommentare, um die Dateigröße zu reduzieren. Wir haben Geschwindigkeitstests durchgeführt und eine Verkürzung der Ladezeit um 1,69% festgestellt, wenn diese Option aktiviert ist. ⏱  Aufgrund der Funktionsweise von CSS kann dies deine Website beeinträchtigen, also stelle sicher, dass du sie testest. Auch hier ist im Allgemeinen weniger Whitespace und Code eine gute Sache.
  • Fasse CSS-Dateien zusammen: Combine CSS files fasst alle deine Dateien zu einer einzigen zusammen und reduziert so HTTP-Anfragen. Wenn du einen Host mit aktiviertem HTTP/2 verwendest, ist es nicht mehr empfehlenswert, Dateien zu kombinieren, da sie nun parallel über eine einzige Verbindung geladen werden können. Kinsta unterstützt HTTP/2 vollständig. Lies hier mehr über die Kombination von externem CSS.
  • Optimiere die CSS-Bereitstellung: Optimiere die CSS-Bereitstellung und vermeide Renderblocking-CSS auf deiner Website für eine schneller wahrgenommene Ladezeit. Lies mehr darüber in unseren ausführlichen Artikeln über Renderblocking CSS und die Optimierung des kritischen Renderingpfades. Wir haben Geschwindigkeitstests durchgeführt und eine Verkürzung der Ladezeit um 0,17% festgestellt, wenn diese Option aktiviert ist. ⏱ Denk jedoch daran, dass es hier mehr um die wahrgenommene Ladezeit als um die tatsächliche Ladezeit geht.

JavaScript-Dateien

  • Verkleinere JavaScript-Dateien: Minify JavaScript entfernt Leerzeichen und Kommentare, um die Dateigröße zu reduzieren. Wir haben Geschwindigkeitstests durchgeführt und eine Verkürzung der Ladezeit um 0,84% festgestellt, wenn diese Option aktiviert ist. ⏱ Aufgrund der Funktionsweise von JavaScript kann dies zu Funktionsausfällen mit den Plugins oder dem Design führen, also vergewissere dich mit einem Testdurchlauf, das alles klappt. Auch hier ist im Allgemeinen weniger Whitespace und Code eine gute Sache.
  • Kombiniere JavaScript-Dateien: Combine Javascript files kombiniert die JS Dateien deiner Website auf eine geringere Anzahl von Dateien, wodurch HTTP-Anfragen reduziert werden. Wenn man einen Host mit aktiviertem HTTP/2 verwendet, ist es nicht mehr empfehlenswert, Dateien zu kombinieren, da sie nun parallel über eine einzige Verbindung geladen werden können. Kinsta unterstützt HTTP/2 vollständig.
  • Lade JavaScript verzögert: Load JavaScript deferred eliminiert Rendering-Blocking JS auf deiner Website und kann die Ladezeit verbessern. Lies mehr dazu in unseren ausführlichen Artikeln über Render-Blocking JavaScript. Dies kann auch deine Seite beschädigen, wenn du nicht vorsichtig bist, also stelle sicher, dass du Änderungen testest. Wir haben Geschwindigkeitstests durchgeführt und eine Verkürzung der Ladezeit um 1,35% festgestellt, wenn diese Option aktiviert ist. ⏱ (Deaktiviert, Aktiviert)

Medien

Unter dem Menü „Media“ bieten sie dir die Möglichkeit, deine Bilder und Videos bequem zu laden und zusätzliche Skripte wie Emojis und Embeds zu deaktivieren. Lasst uns ein wenig in jedes dieser Themen eintauchen.

WP Rocket Media Optimierung

WP Rocket Media Optimierung

LazyLoad

Lazy Loading ist eine Optimierungstechnik, die sichtbare Inhalte lädt, aber das Herunterladen und Rendern von Inhalten, die unterhalb des Fold erscheinen, verzögert. Durch Aktivieren der Option Lazy Load kann die tatsächliche und wahrgenommene Ladezeit verbessert werden, da Bilder, iframes und Videos nur dann geladen werden, wenn das Darstellungsfeld erreicht wird (oder man kurz davorsteht) und die Anzahl der HTTP-Anfragen reduziert wird.

  • Für das Aktivieren von Bildern: Wir haben Geschwindigkeitstests durchgeführt und eine Verkürzung der Ladezeit um 3,89% festgestellt, wenn diese Option aktiviert ist. ⏱ (Deaktiviert, Aktiviert)
  • Aktivieren von iframes und Videos: Wir haben acht YouTube-Videos auf eine Seite gelegt und die Ladezeit mit dieser Option um 74,43% reduziert. ⏱ WP Rocket hat die Möglichkeit, ein YouTube-Video automatisch durch sein Vorschaubild zu ersetzen. Dies ist eine unglaublich leistungsstarke Möglichkeit, Videos auf deiner WordPress-Seite zu beschleunigen.

Schau dir unser ausführliches Tutorial zum Thema Lazy Loading in WordPress an.

Emoji

Mit der Veröffentlichung von WordPress 4.2 kam die Integration von Emojis in den Kern für ältere Browser. Das große Problem dabei ist, dass es eine zusätzliche HTTP-Anfrage auf der WordPress-Seite erzeugt, um die Datei wp-emoji-release.min.js zu laden. Und das wird auf jeder einzelnen Seite geladen.

Deaktiviere Emoji: Die Option emoji deaktivieren reduziert die Anzahl der HTTP-Anfragen. Es wird sie nicht auflösen, es wird einfach auf die Browser-Emoji-Version des Benutzers zurückgesetzt. Wir haben Geschwindigkeitstests durchgeführt und eine Verkürzung der Ladezeit um 2,2% festgestellt, wenn diese Option aktiviert ist. ⏱ Lies dir unseren ausführlichen Artikel über das Deaktivieren von Emojis durch.

Einbettung

Mit der Veröffentlichung von WordPress 4.4 kam die oEmbed-Funktion in den Kern. Du hast das wahrscheinlich schon einmal gesehen oder benutzt. Dies ermöglicht es Benutzern, YouTube-Videos, Tweets und viele andere Ressourcen auf ihren Websites einzubetten, indem sie einfach eine URL einfügen, die WordPress automatisch in eine Einbettung umwandelt und eine Live-Vorschau im visuellen Editor bietet.

Das bedeutet aber auch, dass es jetzt einen zusätzlichen HTTP-Request auf der WordPress-Seite erzeugt, um die Datei wp-embed.min.js zu laden. Und das wird auf jeder einzelnen Seite geladen.

Deaktiviere WordPress-Einbettungen: Die Option Einbettungen deaktivieren reduziert die Anzahl der HTTP-Anfragen. Wir haben Geschwindigkeitstests durchgeführt und eine Verkürzung der Ladezeit um 4,9% festgestellt, wenn diese Option aktiviert ist. ⏱ Lies dir unseren ausführlichen Artikel über das Deaktivieren von Embeds durch.

Preload

Unter dem Menü „Preload“ bieten sie dir die Möglichkeit, die Sitemap-Vorausladung zu aktivieren, Bots vorzuladen und DNS-Anfragen vorab abzurufen. Nicht alle davon werden bei Kinsta funktionieren. Aber lass uns ein wenig in jedes einzelne davon eintauchen.

WP Rocket Preload

WP Rocket Preload

Sitemap Preloading und Preload Bot

Wir empfehlen nicht, eine dieser beiden Optionen zu verwenden, und in der Tat werden sie höchstwahrscheinlich bei Kinsta nicht funktionieren.

Vorabruf von DNS-Anfragen

Mit dem DNS-Prefetching kannst du Domainnamen auflösen (DNS-Lookup im Hintergrund durchführen), bevor ein Benutzer auf einen Link klickt, was wiederum zur Leistungssteigerung beitragen kann. Dies geschieht durch Hinzufügen eines rel="dns-prefetch"-Tags im Header deiner WordPress-Seite. Wir empfehlen, externe Anfragen von Ihrem CDN, Google Fonts und Google Analytics mit Prefetch zu versehen. Hier ist ein Beispiel unten:

<link rel="dns-prefetch" href="//cdn.domain.com/">
<link rel="dns-prefetch" href="//fonts.googleapis.com/">
<link rel="dns-prefetch" href="//www.google-analytics.com"

Dies ist schwieriger zu testen, aber man kann sicher sein, dass es hilft, seine Website zu beschleunigen.

Erweiterte Regeln

Da WP Rocket mit dem Kinsta-Umgebungscache synchronisiert wird, kann man die erweiterten Regeln nicht verwenden. Wenn du eine URL oder ein Verzeichnis vom Caching ausschließen möchtest, kannst du dich jederzeit an das Kinsta-Supportteam wenden.

Datenbank

Unter dem Menü „Datenbank“ bietet man dir die Möglichkeit, Bereinigungen von Beiträgen, Kommentaren, Transienten und Tabellen durchzuführen.

WP Rocket Datenbank

WP Rocket Datenbank

Post Cleanup

Es ist nicht ungewöhnlich, dass ältere Websites mehr als 100 Revisionen auf ihren Hauptseiten haben. Dies ist einfach auf die jahrelange Bearbeitung und Aktualisierung von Inhalten zurückzuführen. Nehmen wir zum Beispiel an, eine Website hat 700 Seiten oder Beiträge mit jeweils 150 Revisionen, das wären über 100.000 Einträge in der Datenbank. Dies beansprucht Speicherplatz, und selbst bei Datenbankindizes kann dies manchmal die Performance beeinträchtigen. WP Rocket gibt dir die Möglichkeit, Folgendes zu löschen:

  • Überarbeitungen
  • Auto-Entwürfe
  • Trashed Posts

In unserem ausführlichen Beitrag erfährst du, wie du Revisionen für eine schnellere Leistung optimieren kannst.

Bereinigung von Kommentaren

Ähnlich wie bei Revisionen können Spam und verwüstete Kommentare im Laufe der Zeit einfach zu verschwendetem Speicherplatz addieren. WP Rocket gibt dir die Möglichkeit, Folgendes zu löschen:

  • Spam-Kommentare
  • vernichtete Kommentare

Wenn du keine Kommentare auf deiner WordPress-Seite verwendest, empfehlen wir dir, die Kommentare einfach zu deaktivieren, um zu verhindern, dass Spam überhaupt durchkommt. Du musst dir dann auch keine Sorgen um die Installation von Spam-Plugins machen.

Transienten Cleanup

Transienten in WordPress werden manchmal übersehen, aber sie sind sehr wichtig! Tatsächlich haben wir gesehen, wie ein beschädigter transienter Cache eine WordPress-Site komplett lahmgelegt hat. Diese haben nur einen temporären Charakter, so dass es sicher ist, sie zu entfernen, und wir empfehlen das auch wirklich. Wenn sie von einem Plugin benötigt werden, werden sie automatisch neu generiert. WP Rocket gibt dir die Möglichkeit, Folgendes zu löschen:

  • abgelaufene Transienten
  • alle Transienten

Datenbankbereinigung

Die Option Datenbankbereinigung reduziert den Aufwand für Datenbanktabellen. Bei Kinsta verwenden wir jedoch InnoDB anstelle von MyISAM, weshalb dies in der Regel nicht erforderlich ist. InnoDB hat sich als leistungsfähiger und zuverlässiger erwiesen. Ein wichtiger Grund, InnoDB über MyISAM zu nutzen, ist die Nutzung der Vorteile der Sperre auf Zeilenebene. Dies ermöglicht eine schnellere Bearbeitung deiner Anfragen. Wenn man seine WordPress-Site nach Kinsta migriert, ist dies eine der Optimierungen, die unsere Ingenieure auf deiner Website vornehmen.

Automatische Bereinigung

WP Rocket bietet dir auch die Möglichkeit, die automatische Bereinigung deiner Datenbank auf täglicher, wöchentlicher oder monatlicher Basis zu planen. Dies wird mit einem CRON-Job hinter den Kulissen festgelegt.

CDN

Unter dem Menü „CDN“ kannst du ein Content-Delivery-Netzwerk von Drittanbietern aktivieren. Dies ist wirklich ein Kinderspiel, wenn es um die Leistung geht. Diese entlasten deinen Webserver und beschleunigen gleichzeitig die Bereitstellung von Inhalten für deine Besucher, was deren Erlebnis verbessert. Schau dir an, warum wir denken, dass jede Website ein CDN verwenden sollte.

Wenn du ein Kinsta-Kunde bist, wird dieses Menü nicht benötigt, da das Kinsta-CDN automatisch hinter den Kulissen auf deiner Website bereitgestellt wird. Wir haben jedoch auf einigen wenigen Seiten festgestellt, dass du möglicherweise in deine Kinsta-CDN-URL eingeben musst, wenn WP Rocket aktiviert ist. Wir empfehlen, deine WordPress-Site zuerst durch ein Website-Geschwindigkeitstesttool laufen zu lassen, um zu bestätigen, dass alle deine Assets (JS, CSS und Bilder) vom Kinsta-CDN geladen werden. Wenn dies nicht der Fall ist, versuche, deine Kinsta-CDN-URL manuell einzugeben (Beispiel: mk0dgs321g.kinstacdn.com).

WP Rocket CDN

WP Rocket CDN

Add-Ons

Unter dem Menü „Add-Ons“ bieten sie dir die Möglichkeit, Cloudflare zu aktivieren. Wenn du das WP Rocket Cloudflare Add-on verwendest, brauchst du das offizielle Cloudflare Plugin nicht mehr. WP Rocket bietet die gleiche Funktionalität wie die Bereitstellung von Ursprungs-IP-Adressen.

WP Rocket Add-ons

WP Rocket Add-ons

Wenn du WP Rocket bei einem anderen Hosting-Provider verwendest, hast du auch die Möglichkeit, Varnish zu aktivieren. Da dies jedoch mit unserer Cache-Lösung hier bei Kinsta kollidieren würde, wird diese automatisch ausgeblendet.

Endgültige Geschwindigkeitstests ⏱

Wir führten dann einige abschließende Geschwindigkeitstests durch, bei denen alles aktiviert war, so dass man ein Vorher und Nachher deutlich erkennen konnte. Hinweis: Diese WordPress-Seite wird bei Kinsta gehostet.

Vor WP Rocket

Wir haben 5 Tests in Pingdom ohne WP Rocket durchgeführt und den Durchschnitt genommen.

Vor WP Rocket

Vor WP Rocket

Wir haben dann einen Test in Google PageSpeed Insights ohne WP Rocket durchgeführt.

PageSpeed Insights vor WP Rocket

Google PageSpeed Insights vor WP Rocket

Nach WP Rocket

Wir führten dann 5 Tests in Pingdom mit WP Rocket und aktivierten Optionen durch und nahmen den Durchschnitt.

Mit WP Rocket

Mit WP Rocket

Wir haben dann einen Test in Google PageSpeed Insights mit WP Rocket durchgeführt.

PageSpeed Insights nach WP Rocket

Google PageSpeed Insights nach WP Rocket

Hier ist der Auszug aus den obigen Ergebnissen:

  • In unseren Pingdom-Tests haben wir eine Verringerung der Gesamtladezeit um 9,12% beim Betrieb von WP Rocket festgestellt. Während dies vielleicht nicht absurd hoch erscheinen mag, dauerte es nur ein paar Minuten und weniger als 10 Klicks, um das zu erledigen.
  • Denk daran, dass WP Rocket’s Basisgeschäft in ihrer Caching-Lösung liegt. Aber hier bei Kinsta verwenden wir bereits unseren eingebauten Cache, so dass wir nur die Ergebnisse ihrer anderen Optimierungsfunktionen teilen. Es ist also wirklich eine 9%ige Verbesserung gegenüber dem blitzschnellen Cache von Kinsta. ⚡
  • Die Seite, die wir für den Test genutzt haben, ist bereits weitgehend optimiert. Größere und weniger optimierte Websites werden leicht noch bessere Ergebnisse erzielen.
  • Neugierig, warum es in der endgültigen Version zusätzliche Anfragen gibt? Dies ist in der Regel auf das verzögerte Laden von Bildern zurückzuführen, da es leere data:image/gif;base64-Anfragen erzeugt. Aber keine Sorge, es wird trotzdem schneller sein.
  • Wenn du Videos hosten möchtest, kannst du möglicherweise eine Verkürzung der Ladezeit um bis zu 50% oder mehr sehen. Dies wird durch die Verwendung der WP Rockets-Funktion erreicht, die YouTube-Videos durch anklickbare Vorschaubilder ersetzt. Das ist wirklich praktisch!
  • In unseren Google PageSpeed Insights Tests haben wir eine Steigerung unserer Punktzahl von 88/100 auf 98/100 festgestellt. Die Werte sind jedoch nicht so wichtig wie die Gesamtladezeiten, also widme ihnen nicht zu viel Bedeutung. Wir diskutieren dies in unserem Artikel über Google PageSpeed Insights.

Wie du oben sehen kannst, macht es WP Rocket unglaublich einfach, deine Website mit nur ein paar einfachen Klicks zu beschleunigen!

Zusammenfassung

Das Team von WP Rocket setzt sich konsequent für neue Funktionen ein, die sich direkt an den Empfehlungen zur Web-Performance orientieren, die wir bei Kinsta teilen. Du kannst erwarten, dass die Integration mit dem Plugin in den nächsten Monaten noch enger wird! Wir freuen uns, dass Kunden dieses Plugin nun ohne zusätzliche Anpassungen nutzen können.

Wir würden uns freuen zu hören, was du denkst? Benutzt du WP Rocket? Lass es uns unten in den Kommentaren wissen.

8
Mal geteilt