WP Rocket – Anleitung zum Beschleunigen einer Website

Anleitungen und Tipps zur Einrichtung des Plugins WP Rocket , das deine WordPress-Seite sichtbar beschleunigen kann.

Was ist ein Cache?

Cache ist ein Wort, das in letzter Zeit so oft herumgeworfen wird, dass sogar meine Großmutter langsam darüber spricht. Cache ist der Name für temporäres oder sowohl Computer- als auch Server-Cache.

Anstatt dass die gesamte Webseite neu geladen werden muss (also effektiv vom Server heruntergeladen wird), werden bestimmte Teile, die sich nicht ändern, aus diesem Speicher geladen.

Dadurch verringert sich der Datenfluss zwischen Client und Server, was mit einer geringeren übertragenen Datenmenge und insbesondere einer schnelleren Seitenladegeschwindigkeit einhergeht.

Serverseitiger Cache

Jeder durchschnittliche Server hat sein eigenes Cache-System. Der Server merkt sich normalerweise gespeicherte Bilder, CSS- und JS-Dateien, die der gesamten Seite gemeinsam sind.

Anstatt immer das gespeicherte Logo an den Kunden zu senden, sendet es nur die Information, dass der Kunde das Logo bereits gespeichert hat und es somit verwenden kann.

Dies gilt für die meisten Bilder auf der Seite. Vielleicht sind Sie schon einmal mit dem Problem konfrontiert gewesen, dass Sie immer noch das alte Bild sehen, nachdem Sie es durch ein neues ersetzt haben. Also ist der Cache schuld.

Während der Entwicklung der Website müssen wir natürlich den Cache deaktivieren, da wir die vorgenommenen Änderungen sofort sehen müssen. Dies kann serverseitig im Control Panel Ihres Hostings erfolgen.

Seitenseitiger Cache

Wir können den Cache auch auf der WordPress-Seite setzen. Obwohl es als Cache bezeichnet wird, ist es in Wirklichkeit nur eine Optimierung der verwendeten Codes und anderer Dateien.

Zu diesem Zweck können wir mehrere Plugins verwenden. Einige von ihnen sind kostenlos und decken meist nur grundlegende Funktionen ab. Viele haben kostenpflichtige Versionen oder werden von Grund auf bezahlt.

In diesem Artikel konzentrieren wir uns auf das kostenpflichtige Plugin WP Rocket, aber ich kann es definitiv guten Gewissens zu den besten Geschwindigkeitsoptimierungs-Plugins zählen.

Wie bekomme ich WP Rocket? Was ist sein Preis?

Wir beziehen WP Rocket ausschließlich von ihrer offiziellen Website . In Bezug auf den Preis haben wir drei Pläne zur Auswahl – SINGLE für 49 $ pro Jahr, wir werden es für eine Website verwenden. Wir verwenden den 99-Dollar-PLUS-Plan für drei Websites und den 249-Dollar-/Jahr-INFINITE-Plan für eine unendliche Anzahl von Websites (ideal für Entwickler, die viele Websites erstellen).

Nach dem Ausfüllen der Rechnungsinformationen und der Zahlung erhalten wir eine .zip-Datei zum Download, die unser Plugin und unsere Lizenz enthält. Wir laden das Plugin über wp-admin auf unsere Seite hoch (Plugins-> Neu hinzufügen-> Plugin hochladen). Vergessen Sie nach erfolgreicher Installation nicht, das Plugin zu aktivieren.

Anleitung zum Einrichten des WP Rocket-Plugins

In der Praxis ist mir schon mehrfach begegnet, dass jemand ein Cache-Plugin installiert hat und keine Änderung bemerkt hat. Na sicher. Ein Cache-Plugin zu HABEN ist nett, aber es ist wie einen Führerschein zu haben (aber kein Autofahren). Um die Leistung zu verbessern und die Geschwindigkeit zu optimieren, müssen wir WP Rocket konfigurieren.

Auf die WP Rocket-Einstellungen kann in wp-admin über die linke Hauptspalte im Abschnitt Einstellungen zugegriffen werden –> WP-Rakete . Wir klicken. Uns werden ein schwarzes Brett und viele verschiedene, auf den ersten Blick beängstigende Optionen gezeigt. Gehen wir sie jetzt einzeln durch.

Armaturenbrett

Schwarzes Brett. Hier werden grundlegende Informationen zu Ihrem Konto, Lizenzen usw. angezeigt. Wir haben hier die Möglichkeit, „Rocket Analytics“ zu aktivieren, was bedeutet, dass einige Daten an WP Rocket HQ gesendet werden. Dies kann Plugin-Entwicklern helfen.

Zwischenspeicher

Grundeinstellungen für den Cache.

Wir können das mobile Caching ein- und ausschalten , ich empfehle es eingeschaltet zu lassen. Wir können Cache-Dateien auch separat für große PCs und separat für Mobiltelefone trennen. Ich persönlich mache das nie, da ich keinen Grund dazu sehe.

Caching für eingeloggte WordPress-Benutzer aktivieren schaltet den Cache für eingeloggte Benutzer ein. Unnötig für einfachere und Präsentationsseiten, aber wenn Sie eine Seite haben, auf der sich Benutzer anmelden (z. B. E-Shop), kann diese Funktion nützlich sein. Grundsätzlich nutzt der angemeldete Benutzer den Cache nicht (es wird davon ausgegangen, dass der angemeldete Benutzer ein Website-Administrator ist, der die Seite ohne Cache sehen sollte, um Änderungen sofort überprüfen zu können). Wenn Sie dieses Kontrollkästchen aktivieren, wird der Cache auch von angemeldeten Benutzern verwendet.

Cache-Lebensdauer – hier stellen wir den Zeitraum ein, nach dem der Cache automatisch geleert werden soll. Nachdem Sie auf „Minuten“ geklickt haben, genügt es, die Stunde und den Tag auszuwählen. Ich lasse immer den Standardwert eingestellt, aber natürlich ist es Ihnen überlassen. Wenn Sie also jemals eine Änderung vornehmen, die nicht sofort angezeigt wird, müssen Sie den Cache manuell „leeren“, dh zurücksetzen. Wenn Sie es vergessen, wird es nach der hier angegebenen Zeit automatisch zurückgesetzt.

Der Cache kann manuell über das Admin-Panel (der schwarze Streifen oben) geleert werden, suchen Sie das WP Rocket-Element darin und klicken Sie auf Cache löschen, um den gesamten Cache zu leeren. Dadurch werden die Änderungen überall angezeigt, auch für nicht angemeldete Benutzer.

Dateioptimierung

Wahrscheinlich der interessanteste Teil. Hier legen wir fest, wie WP Rocket die Dateien verarbeiten soll, aus denen die Website besteht.

Grundeinstellungen

HTML minimieren – minimiert den HTML-Quellcode der Seite, indem Zeilenumbrüche oder unnötige Leerzeichen entfernt werden. Wenig effektiv, aber hier kann man praktisch nichts falsch machen. Ich schalte es immer ein.

Optimieren Sie Google Fonts – lassen Sie dies auf jeden Fall eingeschaltet, es wird das Laden von Google Fonts verbessern, die Sie mit ziemlicher Sicherheit verwenden.

Hinweis: In neueren Versionen von WP Rocket sind Grundeinstellungen nicht mehr verfügbar (nicht mehr relevant).

CSS-Dateien

CSS ist die Sprache, mit der vereinfacht gesagt das Erscheinungsbild der Seite festgelegt wird. In einem idealen Universum enthält jede Seite eine einzelne .css-Datei, in der alle visuellen Dinge eingerichtet sind. Aber das ist sicherlich nicht wahr in WordPress. Da WordPress eine komplexe Plattform ist und aus Themes und Plugins besteht, hat fast jedes Plugin seine eigenen CSS-Dateien (und selten nur eine). Infolgedessen laden Sie jedes Mal, wenn die Seite geladen wird, mehrere Dutzend CSS-Dateien.

CSS-Dateien minimieren – minimiert .css-Dateien durch Entfernen von Einzügen und Leerzeichen. Ähnlich wie bei der HTML-Minifizierung. Da es mehr CSS-Dateien gibt, ist diese Einstellung fast ein Muss.

Kombinieren Sie CSS-Dateien – Diese Einstellung durchläuft alle .css-Dateien, die die Seite verwendet, und erstellt eine große Datei (nur eine). Kommen wir also dem Zustand des idealen Universums näher – Sie laden nur eine .css-Datei, wenn auch eine größere. Diese Option muss unbedingt aktiviert werden.

CSS-Bereitstellung optimieren – Ich schalte diese Einstellung ebenfalls ein. Dadurch wird das CSS „asynchron“ geladen, d. h. unabhängig vom restlichen Inhalt der Webseite.

Um es nicht so einfach zu machen, kann das Setzen der Kombination von CSS-Dateien natürlich zu visuellen Fehlern auf der Seite führen (sogenannte Bugs). In diesem Fall ist es notwendig, herauszufinden, was das jeweilige Problem verursacht, und die spezifische .css-Datei in „Ausgeschlossene CSS-Dateien“ aufzunehmen.

Javascript-Dateien

Wie bei CSS können wir auch Javascript-Dateien optimieren.

Minify und Combine verhalten sich genauso wie CSS

jQuery Migrate entfernen – jQuery Migrate ist eine jQuery-Hilfsfunktion, die Sie auf Inkompatibilitäten zwischen jQuery-Versionen und Plugins oder Themes von Drittanbietern hinweist. Seit WordPress 5.5 wird es nicht mehr verwendet, sodass Sie es deaktivieren können.

JavaScript verzögert laden – macht im Grunde dasselbe wie „CSS-Bereitstellung optimieren“ – das Javascript wird unabhängig von den restlichen Dateien auf der Seite geladen.

Hinweis: Wenn Sie das http2-Protokoll verwenden, müssen Sie keine CSS- oder JS-Dateien kombinieren.

Die Medien

In diesem Abschnitt richten wir Bilder, Videos und andere Multimedia-Inhalte ein.

Lazy-Load

Lazy Load ist eine Funktion, die das unnötige Laden von Bildern verlangsamt, die nicht sofort auf der Seite sichtbar sind. Dies führt zu einer erheblichen Geschwindigkeitssteigerung, da die Bilder erst geladen werden, wenn Sie sich ihrem Standort nähern. Ich gebe www.wp.sk ein und ganz unten in der Fußzeile ist das wp.sk-Logo, das eigentlich ein Bild ist.

Lazy Load führt dazu, dass die Seite ohne dieses Bild geladen wird. Erst wenn wir mit dem Mausrad in die Nähe der Fußzeile kommen, wird das Bild im Hintergrund geladen und angezeigt. Bis dahin wird es nicht benötigt. Ohne Lazy Load wird gleich zu Beginn die gesamte Seite geladen.

Für Bilder aktivieren – Aktiviert Lazy Load für Bilder.

Für Iframes / Videos aktivieren – Aktiviert Lazy Load für Videos und Iframes. Iframe wird oft verwendet, z. B. bei einem Facebook-Feed oder beim Einfügen eines YouTube-Videos oder von Inhalten von einer anderen Seite.

YouTube-Iframe durch Vorschaubild ersetzen – ersetzt ein nicht geladenes Video durch ein Vorschaubild (z. B. wenn wir schnell an die Stelle scrollen, an der das Video sein sollte, und es keine Zeit hatte, im Hintergrund zu laden).

Emoticons

Emojis sind ein eher nutzloser Teil von WordPress, aber auf manchen Blogs finden sie ihre Anwendung. Eigentlich sind es Smileys (Emoticons), die WordPress automatisch in eine grafische Form umwandelt. Wenn Sie es nicht benötigen, können Sie es einfach ausschalten.

Einbettungen

WordPress-Einbettungen deaktivieren – verhindert, dass andere einen Teil Ihrer Website auf externe Websites ziehen. Ich empfehle, es anzulassen.

WebP-Kompatibilität

Legt das Caching für WebP-Bilder fest. WebP ist ein relativ neues Bildformat, das hauptsächlich für die Anzeige im Internet entwickelt wurde. Das Bild ist kleiner, aber in der Qualität mit jpg vergleichbar. Jedes JPG und PNG kann über einen Konverter in WebP konvertiert und auf die Seite hochgeladen werden. Wenn Sie WebP jedoch nicht verwenden, ist es nicht erforderlich, diese Einstellung zu aktivieren.

Vorladen

Wie ich oben erwähnt habe, arbeitet WP Rocket im Stil der Erstellung von benutzerdefinierten Dateien (hauptsächlich .css und .js), die dann im Live-Betrieb der Website verwendet werden, anstelle der ursprünglichen. Preload ist die Funktion, die diese Dateigenerierung auslöst. Gleiches gilt für das erneute Generieren bereits erstellter Dateien bei einer Änderung auf der Seite (z. B. Hinzufügen eines neuen Artikels usw.).

Hier empfehle ich, „Preloading aktivieren“ eingeschaltet zu lassen, sowie „Sitemap-basiertes Cache-Preloading aktivieren“, „Yoast SEO XML-Sitemap“ (wenn Sie das Yoast SEO-Plugin verwenden) und auch „Link-Preloading aktivieren“. Das reicht für 99 % der Websites.

Erweiterte Regeln

Hier werden wir erweiterte Regeln für WP Rocket festlegen. Hier können wir beispielsweise Unterseiten, Dateien etc. angeben. die niemals zwischengespeichert werden sollten. Wir können eine Ausnahme beim Zwischenspeichern von Cookies oder basierend auf dem verwendeten Browser festlegen.

Innerhalb von WP Rocket ist es möglich, die sog Wildcards, d. h. der Stern-Wildcard *. Wenn wir z.B. Um das gesamte Plugin aus dem Caching zu entfernen, sagen wir Kontaktformular 7, ist es unsinnig, 10 .css-Dateien untereinander aufzulisten, die sich im Ordner contact-form-7 befinden. Wir verwenden stattdessen einen Platzhalter, etwa so:

Wp-content/plugins/contact-form-7/* was dafür sorgt, dass der gesamte Ordner (und damit das gesamte Plugin) ungecacht bleibt.

Datenbank

In diesem Abschnitt können wir die Website in einigen Fällen gut beschleunigen, aber das fordert seinen Tribut. Hier können wir die sog. durchführen Bereinigung der Datenbank von scheinbar unnötigen Daten. WP Rocket empfiehlt, vor der Durchführung solcher Datenbankoperationen ein Datenbank-Backup zu erstellen.

Hier können wir Revisionen, automatische Entwürfe, Beiträge aus dem Papierkorb, nicht genehmigte Kommentare, Transienten löschen, Tabellen optimieren und die automatische Bereinigung einstellen.

Beim Erstellen jeder Unterseite oder jedes Artikels in WordPress werden so viele Überarbeitungen gespeichert, wie oft wir auf die Schaltfläche UPDATE klicken. Bei großen Websites, die hauptsächlich Artikel enthalten, kann dies ein ziemliches Problem sein, wenn man bedenkt, dass es mehrere Millionen Revisionen geben kann. Durch das Löschen dieser Revisionen erleichtern wir die Lebensdauer der Datenbank erheblich, verlieren jedoch die Möglichkeit, zu früheren Versionen des Artikels oder der Unterseite zurückzukehren.

CDN

CDN steht für Content Delivery Network. Sie verwenden es und wissen es vielleicht nicht einmal. Auf der Codeebene einer Webseite gibt es verschiedene Bibliotheken, die im Allgemeinen beim Erstellen einer Webseite verwendet werden.

Ein typisches Beispiel können jQuery oder Google Fonts sein. Der Vorteil ist, dass der Besucher Ihrer Website wahrscheinlich bereits jQuery von einer anderen Seite auf seinen PC heruntergeladen hat, sodass sein Browser beim Rendern der Seite die jQuery-Datei nicht erneut vom Server, sondern aus dessen Cache ziehen muss.

Dies wirkt sich auf die Geschwindigkeit der Website aus. In Wirklichkeit handelt es sich jedoch nur um wenige Kilobyte große Dateien, was sich bei einer klassischen Website nicht extrem auf die Geschwindigkeit auswirken wird.

Herzschlag

Heartbeat ist eine integrierte WordPress-Funktionalität. Dies ist eine Art regelmäßiger „Impuls“, auf dessen Grundlage in regelmäßigen Abständen (einmal pro Minute) Ajax-Anfragen an den Server gesendet werden.

Es wird für Benachrichtigungen verwendet, die in der Administratorumgebung angezeigt werden, zum automatischen Speichern von Artikeln und Unterseiten, zum Sperren von Inhalten, wenn sie von einem anderen Benutzer bearbeitet werden (es erscheint die sprichwörtliche Tabelle „Benutzer #name bearbeitet diesen Artikel“).

Ich persönlich hatte noch nie ein Problem damit, noch habe ich mich damit beschäftigt. Hier kann man theoretisch Heartbeat ausschalten, aber ich empfehle es auf keinen Fall, da es die eingebaute Funktionalität von WordPress stört, ganz zu schweigen von den verwendeten Plugins, die eventuell unbrauchbar werden. Das Einschränken dieser Einstellung ist also nur für einige schwache Plugins relevant.

Add-Ons

Option zur Installation anderer Plugins, die mit WP Rocket funktionieren und für noch bessere Geschwindigkeit sorgen.

Bildoptimierung

Über die Bildoptimierung sollten Sie bereits bei der Erstellung einer Website nachdenken, bzw beim Hochladen von Inhalten. Der Anstand gebietet, kein Bild größer als 300 KB auf die Seite zu stellen. Die FullHD-Größe (also 1920×1080) ist für die meisten Webseiten völlig ausreichend. Ich empfehle definitiv nicht, riesige SLR-Bilder (z. B. 6000×4000) ins Internet hochzuladen.

Obwohl WordPress sie immer noch auf 4K-Größe zuschneidet, ist die Datengröße des Bildes wichtiger als die Abmessungen. Es gibt wirklich nur wenige Ausnahmen, wenn es notwendig ist, ein großes Datenabbild zu verwenden.

Bei solchen Bildern verwenden wir jedoch immer nur das Miniaturbild und das vollständige Bild, wenn Sie darauf klicken (z. B. indem Sie es in Lightbox öffnen). In jedem Fall enthält WP Rocket keine Option zum Optimieren von Bildern, aber es funktioniert sehr gut mit dem Imagify-Plugin .

Ein weiteres bekanntes Plugin zum Optimieren von Bildern ist EWWWW Image optimizer (ich empfehle, es nach Gebrauch zu deinstallieren).

Werkzeug

Plugin-Tools. Importieren, exportieren, auf eine ältere Version zurücksetzen. Dinge, die wir wissen.

Tutorials

Und schließlich finden Sie im Bereich Tutorials des WP Rocket-Plugins Video-Tutorials zur Verwendung in englischer Sprache.

Letzter Tipp: Sehen Sie sich dieses Tutorial an, um zu erfahren, wie Sie Ihre WordPress-Site beschleunigen können .

War dieser Artikel hilfreich für Sie? Unterstützen Sie mich bitte durch Teilen. 👍