WP Rocket und Elementor

Warum die Geschwindigkeit deiner Website wichtig ist

Laut Analysen von Google hat die durchschnittliche mobile Website eine Ladezeit von 15,3 Sekunden. Das ist wahnsinnig lange und viel zu viel – denn die meisten Benutzer werden nach drei Sekunden ungeduldig und verlassen die Website wieder.

Bei Online-Shops ist es noch dramatischer, da Ladezeiten über 5 Sekunden auch den Umsatz negativ beeinflussen.

Damit sollte klar sein, dass du dich um die Performance deiner Website kümmern solltest, oder?

Lädt deine Website schneller, dann beeinflusst das auch die sogenannten “Web Core Vitals”, welche ein Rankingfaktor und damit wichtig für SEO sind.

Die spannende Frage ist jetzt, wie du deine WordPress-Website mit Elementor einfach schneller machen kannst. Ohne dir die Hände schmutzig zu machen und ohne super technisch zu werden.

Drei Punkte legen die Basis für eine schnelle WordPress-Website mit Elementor (oder auch ohne Elementor):

1. Schnelles Hosting. Wenn du einen Billighoster verwendest, dann wird deine Website nie schnell sein. Verwende also einen guten Hoster, z.B. RAIDBOXES* oder All-Inkl.com*.
   Hier geht’s zum Vergleich von RAIDBOXES und All-Inkl.com.
2. Lösche langsame Plugins. Die Anzahl und Qualität der WordPress-Plugins beeinfluss direkt die Performance deiner Website.
   Hier findest du den ultimativen Guide für WordPress-Plugins.
3. Caching und Optimierung der Website. Genau um diesen Teil geht es in diesem Artikel.

Warum Caching für die Performance deiner Website wichtig ist

Ein Caching-Plugin stellt sicher, das deine Website nicht bei jedem Aufruf die Inhalte aus der (relativ) langsamen Datenbank laden muss. Idealerweise werden der gesamte HTML-Code, Bilder, CSS und JavaScript aus einem viel schnelleren Cache geladen.

Die Besucher deiner Website sehen also einen Snapshot, ein Abbild, deiner Website. Die Seite kann daher blitzschnell vom Webserver an den Browser gesendet werden.

Beim ersten Besuch deiner Website wird diese daher etwas langsamer sein, da dieser Snapshot erst erstellt werden muss. Aber alle weiteren Besucher? Da rockt deine Website.

Du willst genauer wissen, was Caching ist und wie es funktioniert? Dann lies hier weiter: Caching einfach erklärt.

Wie du deine Elementor-Website mit WP Rocket schneller machst

WP Rocket ist ein Premium Caching Plugin für WordPress*.

Das Ziel ist es deine Website auf einfache Weise schneller zu machen. Ohne dich mit zu vielen Optionen zu überfordern. Nachdem ich einige Caching-Plugins im Einsatz hatte und habe (z.B. W3 Total Cache und Borlabs Cache) muss ich sagen, dass WP Rocket am einfachsten funktioniert und großartige Ergebnisse liefert.

WP Rocket* ist in drei Plänen verfügbar:

• Single – ideal, wenn du eine einzelne Website betreibst.
• Plus – für bis zu drei Websites.
• Infinite – für beliebig viele Websites.

Wenn du dich für einen Plan* entschieden hast, dann hast du Zugriff auf deine Account-Seite und kannst das Plugin von dort herunterladen und in WordPress installieren.

Das schöne daran? Du musst dich nicht um Lizenzen oder ähnliches kümmern – das erledigt WP Rocket automatisch für dich.

WP Rocket rockt automatisch :-)

Das selbe gilt für die Einstellungen – WP Rocket funktioniert out of the box mit gar keinen weiteren Einstellungen und macht deine Website sofort spür- und messbar schneller.

Sobald du WP Rocket aktiviert hast, profitierst du von

• Page Caching – die HTML Seiten werden im Cache gehalten und schnell ausgeliefert
• Browser Caching – Bilder und weitere Assets werden im Browser gehalten und nicht nochmals vom Webserver geladen
• GZIP Komprimierung – es werden dadurch weniger Daten zwischen Webserver und Browser gesendet
• Cross-Origin-Support für Web-Fonts
• Check und Support von diversen anderen Plugins, Themes und Hostern
• Zusammenfassung von Inline- und externen Scripten
• WooCommerce Caching
• Optimierung von Google Font Dateien, so du welche eingebunden hast
• Deaktivierung der (sinnlosen) WordPress-Emojis

Kurz gesagt – sobald du WP Rocket aktivierst wird deine Website schneller werden und dein PageSpeed Insight Wert steigen.

Alle weiteren Einstellungen sind optional.

Kennst du schon das Business-Membership für alle WordPress-Professionals?

Workshops, Live-Q&A’s, Austausch mit anderen Webdesigner:innen, Co-Working und natürlich professioneller Support für dich. Das sind die Website Heroes.

Mehr erfahren

Die idealen Einstellungen für WP Rocket und Elementor

Wichtig: Jede Website ist unterschiedlich und hat unterschiedliche Anforderungen, Plugins und Themes. Daher gibt es nicht EIN Set von Einstellungen, das für alle Websites gilt.

Wenn deine Website Elementor einsetzt, so gibt es doch weitere Faktoren, die einen Einfluss auf die Performance und auch Einstellungen in WP Rocket haben.

Hinweis: Bei jeder Änderung an den Einstellungen in WP Rocket lade ich die Website in einem anonymen Browser-Fenster neu um zu prüfen, ob es zu Problemen kommt. Insbesondere die Einstellungen rund um JavaScript können oft zu Problemen führen. Popups öffnen sich dann nicht oder Slider funktionieren nicht wie gewünscht.

Hier findest du meine Einstellungen für WP Rocket, die sich für Elementor-Websites bewährt haben:

Cache

Caching für mobile Geräte aktivieren: Immer aktivieren.

Separater Cache für mobile Geräte: Meistens deaktiviert. Nur sinnvoll beim Einsatz von schlecht programmierten Plugins, wie z.B. JetMenu von Crocoblock.

Caching für angemeldete WordPress-Benutzer/-innen aktivieren: Aktivieren, wenn du einen Mitgliederbereich hast und diese Option keine Probleme verursacht.

Cache-Dauer: Entweder 0 oder 10. Teste zuerst mit 0 (unbegrenzt) und wenn es zu keinen Problemen mit Formularen o.ä. kommt, dann passt diese Einstellung. Wenn es häufiger zu Problemen kommt (Stichwort “AJAX-Nonce”), insbesondere bei eCommerce-Shops, dann verwende “10”.

WP Rocket: Datei-Optimierung

CSS minifizieren: Immer aktivieren. Die Funktion macht nur sehr selten Probleme.

CSS zusammenfassen: Immer deaktivieren, da mit HTTP/2 nicht notwendig. Kann deine Website sogar langsamer machen.

CSS-Ausnahmen: Leer lassen.

CSS-Darstellung optimieren: Probier es aus. Verwende aber auf jeden Fall die Option “CSS-Dateien asynchron laden”, da sie stabiler ist als “Unbenutztes CSS entfernen”. Letzteres solltest du nur auf einem Staging-System ausprobieren.

“CSS Darstellung aktivieren” kann zu Problemen mit dem Wert “CLS” (culmulative layout shift, ein Core Web Vital-Wert) führen. Wenn du weißt, wie du das “Alternatives Kritisches CSS” befüllen musst, dann mach das. Ansonsten deaktiviere diese Einstellung einfach wieder.

JavaScript minifizieren: Immer aktivieren. Die Funktion macht nur sehr selten Probleme.

JavaScript zusammenfassen: Immer deaktivieren, da mit HTTP/2 nicht notwendig. Kann deine Website sogar langsamer machen.

JavaScript-Ausnahmen: Falls eine JavaScript-Datei Probleme verursacht, kannst du diese hier eintragen. Damit musst du die Minifizierung nicht für alle Dateien abschalten.

JavaScript verzögert laden: Aktivieren. Die Funktion ist standardmäßig mit Elementor und Elementor Pro kompatibel. Je nach Plugins und Addons kann es aber zu Problemen kommen – in diesem Fall empfehle ich dir die folgenden Einstellungen in den JavaScript-Ausnahmen:

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/elementor/
/elementor-pro/
/wp-includes/js/imagesloaded.min.js
ElementorProFrontendConfig
elementorFrontendConfig
acf.*\.js

Auch hier musst du selbst probieren und testen, welche Einstellungen für dich und dein Setup passend sind.

JavaScript-Ausführung verzögern: Aktivieren. Das ist eine der wichtigsten Einstellungen für eine schnelle Website und kompatibel mit Elementor und Elementor Pro. Sollte es zu Problemen kommen kannst du auch wieder JavaScript-Ausnahmen definieren.

Das Ziel dieser Funktionen ist es möglichst wenige Ausnahmen zu definieren. Im speziellen sollte jQuery nicht ausgenommen werden, da es eine sehr große und langsame Bibliothek ist.

Leider hat diese Funktion einen Einfluss auf alles, was mit JavaScript zu tun hat. Sliders, Gallerien und Popups werden eventuell nicht mehr korrekt funktionieren. In diesem Fall ist es hilfreich die von WP Rocket empfohlenen Ausnahmen auszuprobieren. Die Seite wird dann nicht mehr ganz so schnell laden, aber immer noch viel schneller als ohne den Einsatz von WP Rocket.

Verwendest du Slider, Gallerien oder Popups nur auf manchen Seiten dann macht es mehr Sinn, die Einstellungen nur auf diesen Seiten anzupassen.

WP Rocket: Medien

LazyLoad: Alles aktivieren. Für Bilder aktivieren: check. Für iframes und Video aktivieren: check. YouTube iframe durch Vorschaubild ersetzen: check.

Bilder- oder iframes-Ausnahmen: Eine wichtige Einstellung, die niemals leer sein sollte, da sie negative Auswirkungen auf LCP (Largest Contentful Paint, ein anderer Core-Web-Vital-Wert) hat. Trage hier alle Bilder ein, die sich “above the fold” befinden, im speziellen die URL zu deinem Logo.

Idealerweise würdest du hier alle Above-the-fold-Bilder der gesamten Website eintragen. Was leider nicht automatisch geht – denn mit Elementor kannst du keine CSS-Klasse direkt beim -Element hinzufügen. Die Klassen landen immer am Parent Container. Daher: leider händisch einzutragen.

Noch ein Hinweis: Hintergrundbilder sind hier nicht einzutragen – diese werden nie via lazyload geladen.

Fehlende Bildabmessungen hinzufügen: Wenn du Warnungen in Bezug auf den Wert CLS bekommst, dann kannst du diese Einstellung aktivieren. Wenn der CLS-Wert 0 ist, dann ist diese Einstellung nicht notwendig.

WP Rocket: Cache füllen

Vorladen aktivieren: Immer aktivieren.

Sitemap-basiertes Füllen des Caches aktivieren: Aktivieren.

Wenn du RankMath oder ein anderes SEO-Plugin verwendest, dann wirst du direkt die Einstellung Rank Math XML Sitemap oder ähnlich aktivieren können. Ansonsten trage die URL zu deiner XML-Sitemap im Feld Sitemaps für das Cache-Füllen ein.

Vorladen von Links aktivieren: Immer aktivieren.

Vorzeitig aufzulösende URLs: Trage hier deine externen Domains ein (z.B. Google Fonts oder Youtube). Hier findest du Details zu dieser Einstellung – oder du ignorierst die Einstellung, weil sie eh nicht wahnsinnig viel hilft.

Vorzuladende Fonts: Trage hier alle Schriften, die du “above the fold” verwendest ein. Um die URLs zu finden öffne deine Website in einem anonymen Browser-Fenster in Chrome, öffne die Entwicklungs-Tools (F12 bzw. command+option+i), wähle das Netzwerk-Tab und lade die Seite neu. Filtere dann nach Schriften und kopiere mit Rechtsklick > Copy > Copy link address die URL.

Wenn die URL in etwa so aussieht: https://fonts.gstatic.com/s/­librebaskerville/v13/kmKhZrc3Hgbbcjq75U4uslyuy4kn0qNcWxEQDO-Wyrs.woff2 und extern ist (also nicht von deinem eigenen Server geladen wird), dann kannst du den Teil //fonts.gstatic.com/ unter Vorzeitig aufzulösende URLs eintragen.

Wenn die URL lokal von deinem Server geladen wird (z.B. https://yourwebsite.com/wp-content/themes/your-theme/assets/fonts/font-file.woff2) dann trage nur diesen Teil ein: /wp-content/themes/your-theme/assets/fonts/font-file.woff2.

Hinweis: Google Fonts werden von WP Rocket automatisch optimiert und müssen hier nicht eingetragen werden. Details dazu gibt’s hier.

Vorsicht – diese Einstellung kann auch negative Auswirkungen auf die Performance haben. Lade daher nicht jede Schrift, sondern nur die, die “above the fold” genutzt werden. Und idealerweise nur die WOFF2-Version davon.

WP Rocket: Erweiterte Regeln

Diese Einstellungen hängen sehr von deiner Website und dem Setup ab, daher gebe ich hier keine allgemeinen Hinweise. Für die meisten Websites muss hier aber gar nichts eingetragen oder ausgefüllt werden.

Wasserdichte Angebote schreiben in nur 10 Minuten?

Hol dir die ultimative Angebotsvorlage für Webdesigner, Web-Programmierer und Online-Marketer.

Mehr erfahren

WP Rocket: Datenbank

Ein (leider sehr simples) Datenbank-Reinigungs-Tool.

Du kannst diese Einstellungen nach Bedarf nutzen – mach nur vorher ein Backup deiner Website.

Warum “leider sehr simpel”? Weil es meiner Meinung nach nicht sinnvoll ist alle Revisionen zu löschen. Schlauer ist es die letzten 5-10 in der Datenbank zu lassen – also mir haben Revisionen schon ein paar mal sehr weiter geholfen und ich war froh, diese nicht automatisch gelöscht zu haben.

WP Rocket: CDN

Wenn du viele internationale Besucher hast, dann macht ein CDN auf jeden Fall Sinn. Wenn deine Besucher eher lokal (z.B. deutschsprachiger Raum) sind und der Server ebenso in dieser Region steht, dann wird dir ein Content Delivery Network vermutlich nicht viel bringen.

RocketCDN ist eine großartige, wenn auch relativ teure Option. Der Vorteil: perfekte Integration mit WP Rocket. BunnyCDN ist eine weit günstigere, gleichwertige Alternative.

Verwendest du Cloudfare, dann aktiviere das entsprechend Plugin unter “Add-Ons”.

WP Rocket: Heartbeat

Wenn dein Webserver schwach ist und unter der Last von WordPress kämpft, dann solltest du zu einem Premiumhoster wechseln. Oder diese Option aktivieren. Die weiteren Einstellungen können so belassen werden, wie sie sind.

WP Rocket: Add-Ons

Aktiviere die Erweiterungen, wenn du eines der Tools verwendest.

WP Rocket: Bildoptimierung

Im Endeffekt nur eine geschickt platzierte Werbung für das Imagify-Plugin vom selben Team wie WP Rocket. Ich verwende gerne TinyPNG oder Imsanity.

Wichtig wäre nur, dass du eines der Bildoptimierungs-Plugins verwendest. Welches ist meiner Erfahrung nach relativ egal.

WP Rocket: Werkzeuge

Hier kannst du die vorgenommenen Einstellungen exportieren und auch wieder importieren. Das macht Sinn, wenn du die Einstellungen vorab auf einer Staging-Umgebung testen willst oder großartige Websites für Kunden erstellst.

Wie du prüfst, ob WP Rocket deine Elementor-Website wirklich schneller macht

Wie Web Core Vitals kannst du ganz einfach hier prüfen: web.dev/measure/

Teste deine Website vor- und nach der Installation von WP Rocket. Oder auch mit verschiedenen Einstellungen. Du wirst schnell ein Gefühl dafür bekommen, welche Einstellung wirklich weiter hilft.

Möchtest du deine Website testen ohne WP Rocket zu deaktivieren, dann kannst du den Query String ?nowprocket an deine URL anhängen. Also zum Beispiel: https://mbaierl.com/?nowprocket. Dann wird die Website ohne Caching von WP Rocket laden.

Zusammenfassung

Die Geschwindigkeit deiner WordPress-Website mit WP Rocket* zu erhöhen ist gar nicht schwierig. Das Premium-Caching-Plugin optimiert deine Website ohne weitere Einstellungen und lässt sich sehr einfach weiter konfigurieren.

Es spricht also nichts dagegen, die Geschwindigkeit deiner Elementor-Website zu erhöhen. Wichtig ist es nur, die Einstellungen zu testen – da es leider immer wieder zu Problemen mit Caching-Plugins kommen kann.

Welche Erfahrungen hast du mit der Geschwindigkeit von Elementor und WordPress schon gemacht? Ich freue mich auf deinen Kommentar.

Michael

Fragen zu WP Rocket und Elementor