Vom einfachen Caching-Plugin zum ausgefuchsten Performance-Tool: LiteSpeed Cache für WordPress

Dank dem WordPress-Plugin LiteSpeed Cache sind Websites von cyon-Kunden bis zu 3x schneller als ohne Caching-Plugin. ​​Doch das Plugin kann mittlerweile einiges mehr als «nur» Seiten zu cachen. In den letzten Monaten hat es sich zu einem regelrechten Performance-Tool entwickelt und bietet sogar Optimierungsfunktionen, für die kein LiteSpeed-Webserver nötig ist. Wir zeigen, welche hilfreichen Features LiteSpeed Cache für WordPress mittlerweile bietet.

Performance Tool für alle WordPress-Websites

Nutzen Sie verschiedene Plugins, um Ihre WordPress-Website auf Speed zu optimieren? Das LiteSpeed Cache-Plugin hält einige Funktionen bereit, mit denen sich einzelne Performance-Plugins ersetzen lassen. Die hier vorgestellten Funktionen finden Sie (wenn nicht anders erwähnt) in der WordPress-Administrationsoberfläche im Menü «LiteSpeed Cache» > «Settings».

Kostenloser Bildoptimierungs-Service

LiteSpeed Cache für WordPress kann neu nicht nur cachen, sondern auch Bilder optimieren. Die Kollegen von LiteSpeed haben dazu eine Serverfarm aufgebaut, auf der Ihre Bilder im JPG- und PNG-Format optimiert und auf Wunsch auch in das moderne Format WebP konvertiert werden. Damit kann LiteSpeed Cache für WordPress beliebte Plugins wie Smush, EWWW Image Optimizer oder Optimus ersetzen.
Die Bildoptimierungsfunktion finden Sie unter dem Menüpunkt «LiteSpeed Cache» > «Image Optimization», wo Sie Schritt für Schritt durch die Einrichtung der Funktion geführt werden und Optimierungen rückgängig, wiederholen oder Daten löschen können.

Einstellungsmöglichkeiten für den Bildoptimierungs-Service.

Optimize: Kleine Tweaks für mehr Speed

Im Tab «Optimize» sind jede Menge kleine Optimierungen untergebracht, die sich bequem einzeln über Buttons aktivieren lassen.

• CSS-, JS- und HTML-Minify: Mit der Minify-Funktion für CSS, JavaScript und HTML werden entsprechende Dateien von Leerzeichen, Einrückungen und gesäubert. Das spart Daten ein, die nicht zum Besucher übertragen werden müssen.
• Inline-Minify: Mit dieser Funktion werden Minify-Funktion auch auf CSS- oder JavaScript-Code angewandt, der im HTML der aufgerufenen Seite eingebettet ist.
• Combine: Vereint die verschiedenen CSS- und JavaScript-Dateien was HTTP-Requests einspart. Ist HTTP/2 verfügbar, ist die Funktion überflüssig.
• HTTP/2 Push: Aktiviert für CSS- und JavaScript-Dateien HTTP/2 Server Push. Damit werden die Dateien bereits an den Browser geliefert, bevor dieser sie anfordert.
• Load CSS Asynchronously: Das Laden einer Seite ist normalerweise erst abgeschlossen, wenn die CSS-Definitionen ebenfalls komplett geladen sind. Diese Option lässt CSS asynchron nachladen, womit der Aufbau der aufgerufenen Seite nicht behindert wird. Sie nützt auch beim Einsatz von Google Fonts und wirkt sich positiv auf das Resultat bei Speed-Test-Tools wie Pingdom Website Speed Test, GTmetrix oder Google PageSpeed Insights aus.
• Load JS Deferred: Lässt sämtliche JavaScript-Dateien erst laden, nachdem das komplette HTML geladen ist und wirkt sich positiv auf das Resultat bei Speed-Test-Tools aus.
• DNS Prefetch: Mit sogenanntem DNS-Prefetching startet der Browser DNS-Abfragen für die angegebenen Domains bereits, bevor die Domain aufgerufen wird. Das bringt vor allem für Website-Besucher Geschwindigkeit, die über Mobilfunk verbunden sind. Die gewünschten Domains werden pro Zeile in der Form //www.oliverorange.ch hinterlegt.

Mit Funktionen wie HTML-Minifying werden WordPress-Websites noch schneller.

Tuning: Feinjustierungen für Optimierungen

Unter dem Tab «Tuning» lassen sich die unter «Optimize» gemachten Einstellungen feinjustieren.

• Combined CSS & JS Priority: Normalerweise werden externe CSS- und JavaScript-Dateien vor den kombinierten Dateien geladen. Mit dieser Funktion lässt sich die Reihenfolge umkehren.
• CSS & JS Excludes: Die hier angegebenen CSS- und JavaScript-Dateien werden vom Minifying und der Kombination in eine Datei ausgenommen.
• Remove Query Strings: Entfernt Query-Strings von statischen Quellen und wirkt sich positiv auf das Resultat bei Speed-Test-Tools aus.
• Load Google Fonts Asynchronously: Lässt Google Fonts asynchron laden und fügt eine Preconnect-Anweisung hinzu.
• Remove Google Fonts: Verhindert, dass Google Fonts auf der gesamten Website geladen wird.
• Critical CSS Rules: Wenn die Option «Load CSS Asynchronously» unter «Optimize» ausgewählt ist, können hier CSS-Regeln definiert werden, die zwingend für den Aufbau der Seite bzw. von sogenannten Above-the-fold-Inhalten nötig sind.
• JS Deferred Excludes: Hier angegebene JavaScript-Dateien sind von der Funktion «Load JS Deferred» ausgenommen.
• Remove WordPress Emoji: WordPress liefert automatisch eine JavaScript-Datei mit, welche die Anzeige von Emojis in älteren Browsern möglich macht. Sind Ihre Website-Besucher bevorzugt mit modernen Browsern unterwegs, lässt sich mit dieser Option ein HTTP-Request einsparen.
• URI Excludes: Hinterlegen Sie Seiten, die komplett von den unter «Optimize» gewählten Optimierungen ausgenommen werden sollen.
• Role Excludes: Verhindern Sie, dass die aktivierten Optimierungen für die gewählte Nutzergruppe gelten.

Gewählte Optimierungen lassen sich unter «Optimize» justieren.

Media: Rund ums Bild

Unter dem Tab «Media» finden Sie die Optimierungsmöglichkeiten für Bilder auf Ihrer WordPress-Website.

• Lazy Load Images: Sogenanntes Lazy-Loading lädt Bilder erst, wenn diese im Viewport, also dem sichtbaren Bereich des Browsers, erscheinen.
• Lazy Load Image Excludes: Definieren Sie Bilder, die sofort geladen werden sollen. Die Angabe von Verzeichnissen ist möglich, um alle darin enthaltenen Bilder vom Lazy-Loading auszuschliessen.
• Lazy Load Image Placeholder: Ist Lazy-Loading aktiviert, wird im Browser ein grauer Kasten als Platzhalter angezeigt, bis das entsprechende Bild geladen ist. Geben Sie hier ein Bild im Base64-Format an, um den Platzhalter an Ihr Design anzupassen.
• Lazy Load iframes: Aktiviert die Lazy-Loading-Funktion für iframes.
• Disable Optimization Pull: Schaltet das automatische Abholen Bilder vom Bildoptimierungs-Server ab.
• Image WebP Replacement: Ersetzt alle Bilder mit der durch den Optimierungsdienst generierten WebP-Version. Unterstützt der Browsers des Besuchers kein WebP, wird die ursprüngliche Datei ausgeliefert. Die Funktion kann für einzelne Bilder in der Medienbibliothek übersteuert werden.
• WebP Attribute To Replace: Für welche HTML-Elemente und -Attribute die WebP-Version eines Bildes ausgeliefert werden soll, lässt sich mit dieser Option definieren.
• Only Request WebP: Diese Funktion bewirkt, dass JPG- und PNG-Dateien nicht vom Optimierung-Server verkleinert werden, aber trotzdem eine WebP-Version des Bildes generiert wird.
• Preserve EXIF Data: Verhindert, dass Fotos durch die Optimierung ihre EXIF-Daten verlieren, die durch Digitalkameras generiert werden.

Optimierungen rund ums Bild.

CDN: Näher beim Besucher

LiteSpeed Cache für WordPress unterstützt neu auch die Einbindung eines Content-Delivery-Networks (CDN). Mit einem CDN liegen statische Daten auf Servern auf der ganzen Welt verteilt und sind damit geografisch näher bei Website-Besuchern aus dem Ausland. Falls Sie auf den beliebten CDN-Anbieter Cloudflare setzen, bietet das Plugin sogar eigene Anbindung über die Cloudflare-API, was die Konfiguration des CDNs noch komfortabler macht.

Dank CDN sind statische Daten auf der ganzen Welt verteilt und näher beim Besucher.

Zusatzfeatures für cyon-Kunden

Neben den vielen Performance-Optimierungen, die sich dank LiteSpeed Cache für WordPress mit jeder WordPress-Website erzielen lassen, haben die Entwickler des Plugins ihre Wurzeln nicht vergessen. LSCWP, wie die Entwickler das Plugin abgekürzt nennen, verpackt alle tollen Funktionen des LiteSpeed-Webservers, dessen eingebautem Cache-Modul und Premium-Funktionen wie Memcached oder einem Crawler in einer einfach bedienbaren Oberfläche.

ESI: Edge Side Includes

Edge Side Includes (ESI), ein Zauberwort, dass vor allem Online-Shop-Betreiber hellhörig werden lässt. Caching ist eine Wissenschaft für sich. Umso mehr, wenn es darum geht, nur gewisse Teile einer aufgerufenen Seite aus einem Cache zu liefern.

Bestes Beispiel ist der Warenkorb eines Online-Shops. Wird hier vom Server nicht der aktuelle Inhalt des Warenkorbs geliefert, ist die Wahrscheinlichkeit gross, dass der Kunde abspringt. Gleichzeitig sind Online-Shops mit vielen Produkten und Kategorien für den Server aufwendig zu berechnen. ESI lösen das Problem, indem die aufgerufene Seite in Blöcke aufgeteilt wird. Bleibt ein Block, wie z.B. die Angaben zum Produkt oder die Navigation, meist unverändert, kann dieser gefahrlos aus dem Cache geliefert werden. Der Block, in dem sich der Warenkorb befindet, soll aber bei jedem Aufruf neu berechnet werden. Schliesslich sollen immer alle Produkte im Warenkorb vorhanden sein.

Mit der Aktivierung von ESI lassen sich somit auch für eingeloggte Benutzer Inhalte aus dem Server-Cache liefern. Die Einstellungen zu der Funktion finden Sie unter dem Tab «ESI».

Edge Side Includes räumen Schwächen eines Seiten-Caches aus dem Weg.

Advanced: Objekt-Cache und weitere Tools für Cracks

Unter dem Tab «Advanced» finden Sie die Option «Object Cache». Damit lassen sich Objekte an einen zusätzlichen Cache-Dienst wie Memcached oder Redis auslagern. Objekte in WordPress sind Datenbankabfragen die rechenintensiv sind oder sehr häufig aufgerufen werden. Mit der Auslagerung dieser Datenbankabfragen in ein Objekt wird der Datenbankserver entlastet und Seitenaufrufe, die eine jetzt gecachte Datenbankabfrage ausgelöst hätten, sind nochmals schneller.

Objekt-Cache und weitere Tools für Experten.

Crawler: Reise durch die Sitemap

Dank der eingebauten Crawler-Funktion kommen alle Ihre Besucher in den Genuss von LiteSpeed Cache. Der Crawler ruft regelmässig alle Seiten Ihrer Website auf und füllt damit automatisch den Cache. Besuchen Nutzer eine weniger besuchte Unterseite, profitieren diese gleichwohl von einer bereits gecachten Seite und damit von einem blitzschnellen Seitenaufbau.

Dank dem Crawler geniesst jeder Besucher die Geschwindigkeit, die ein Seiten-Cache bringt.

Unterstützung auf allen Kanälen

Nebst all den vielen Performance-Funktionen weiss LiteSpeed Cache für WordPress auch durch praktische Helferlein zu beeindrucken. So bringt das Plugin einen eingebauten Editor für die .htaccess-Datei mit, kann die gemachten Einstellungen exportieren oder aus einer Datei importieren und bietet nicht zuletzt die Möglichkeit, einen Report an die LiteSpeed-Entwickler zu senden. Dies hilft bei Support-Anfragen an die Entwickler ungemein und lässt allfällige Problem schneller ausfindig machen.

Antworten auf Ihre Fragen erhalten Sie übrigens nicht nur im offiziellen Support-Forum auf wordpress.org oder dem LiteSpeed-Wiki sondern auch in einer eigenen Slack-Community. Selbstverständlich steht Ihnen auch unser Team bei Fragen rund ums Thema LiteSpeed Cache gerne zur Seite.