So beschleunigen Sie eine mit HivePress erstellte Verzeichnis- oder Marktplatz-Website

Heutzutage sind die Ladegeschwindigkeit und die Gesamtleistung einer Website entscheidend für eine gute Benutzererfahrung und Suchmaschinenrankings. Kürzlich kündigte Google an, dass es damit beginnen wird, Core Web Vitals, wie z. B. visuelle Stabilitätswerte und Seitenladezeiten, für Websites zu messen, um festzustellen, ob sie sich für einen Ranking-Signal-Boost qualifizieren. Außerdem haben Seiten mit einer längeren Ladezeit tendenziell höhere Absprungraten und eine geringere durchschnittliche Verweildauer auf der Seite.

In diesem Tutorial erklären wir, wie Sie die Leistung Ihrer Website in die Höhe schnellen lassen, indem Sie Caching einrichten, Stile und Skripte optimieren sowie den Medieninhalt optimieren. Wir verwenden das LiteSpeed ​​Cache-Plugin, eine All-in-One-Website-Beschleunigungslösung mit unzähligen Tools und Funktionen, um Ihre Website blitzschnell zu machen.

Zu Testzwecken verwenden wir eine WordPress-Verzeichnis-Website, die mit HivePress und einigen Erweiterungen zusammen mit dem Standarddesign ListingHive erstellt wurde. Wenn Ihre Website jedoch nicht mit dem HivePress-Plugin erstellt wurde, können Sie die gleichen Schritte für jede andere WordPress-basierte Website ausführen.

Beginnen wir also mit der Installation von LiteSpeed ​​Cache.

LiteSpeed-Cache installieren

Zunächst müssen Sie das LiteSpeed ​​Cache-Plugin installieren. Sie können dies ganz einfach direkt von Ihrem WordPress-Dashboard aus tun, indem Sie zum Abschnitt Plugins > Neu hinzufügen gehen. Finden Sie es über die Suchleiste und fahren Sie mit der Installation fort. Wenn die Installation abgeschlossen ist, klicken Sie einfach auf die Schaltfläche „Aktivieren“, um das Plugin zu aktivieren.

Sobald es installiert und aktiviert ist, können Sie mit der Optimierung Ihrer Website beginnen. Gehen wir zuerst die grundlegenden Cache-Einstellungen durch.

Cache-Optimierung

Um die grundlegenden Cache-Einstellungen anzupassen, navigieren Sie zur Seite LiteSpeed ​​Cache > Cache . Es gibt viele verschiedene Abschnitte auf dieser Seite, aber wir werden nur die wichtigsten Einstellungen durchgehen.

Cache-Einstellungen

Hier empfehlen wir dringend, den Cache für angemeldete Benutzer und REST-API-Anforderungen zu deaktivieren. Dies ist erforderlich, damit das HivePress-Plugin ordnungsgemäß funktioniert. Nachdem Sie Optionen aktiviert oder deaktiviert haben, vergessen Sie bitte nicht, die Änderungen zu speichern.

Objekt-Cache

Als nächstes aktivieren wir den Object Cache . Navigieren Sie zum Abschnitt Objekt und überprüfen Sie, ob der Objekt-Cache auf Ihrer Website verfügbar ist. Der Verbindungstest sollte als „bestanden“ angezeigt werden. Wenn dies der Fall ist, können Sie den Objektcache aktivieren, wodurch die Leistung der Website drastisch verbessert wird, indem doppelte Datenbankabfragen zwischengespeichert werden.

Es sollte keine Probleme geben, den Verbindungstest zu bestehen, wenn Ihre Website auf dem OpenLiteSpeed-Server basiert oder Ihr Hosting-Provider Objekt-Caching unterstützt.

Browser-Cache

Navigieren Sie schließlich zum Abschnitt Browser-Cache und stellen Sie sicher, dass er aktiviert ist. Dadurch werden alle statischen Inhalte wie Stile, Skripte und Bilder im Browser des Benutzers zwischengespeichert.

Seitenoptimierung

Ihr nächster Schritt besteht darin, zum Abschnitt LiteSpeed ​​Cache > Seitenoptimierung zu navigieren, um die Stile, Skripte und Schriftarten zu optimieren.

CSS-Optimierung

Beginnen wir mit dem Abschnitt CSS-Einstellungen . Hier empfehlen wir, die Einstellungen CSS Minify und CSS Combine zu aktivieren.

• CSS minimieren – Wenn Sie diese Option aktivieren, werden alle zusätzlichen Leerzeichen, Zeilenumbruchzeichen und andere unnötige oder redundante Daten automatisch aus CSS-Dateien entfernt, ohne die Website-Stile zu beeinträchtigen.
• CSS Combine – Wenn Sie diese Option aktivieren, werden alle einzelnen CSS-Dateien zu einer einzigen CSS-Datei zusammengeführt. Auf diese Weise sendet der Browser eine einzelne Dateianforderung, anstatt jede CSS-Datei separat anzufordern, wodurch die Anzahl der HTTP-Anforderungen reduziert wird.

Schriftoptimierung

Wenn Ihre Website Google Fonts verwendet, gibt es einige Optionen zum Optimieren des Ladens von Schriftarten. Im selben Abschnitt CSS-Einstellungen können Sie nach unten scrollen und die Option Font Display Optimization auf Swap setzen, damit die Fallback-Schriftart verwendet wird, um den Text anzuzeigen, bis die benutzerdefinierte Schriftart vollständig heruntergeladen wurde.

Nachdem Sie die Option „Austauschen“ festgelegt haben, gehen Sie auf derselben Seite zum Abschnitt „ Optimierung “ und aktivieren Sie die Option „ Google-Schriftarten asynchron laden“, um Google-Schriftarten im Hintergrund zu laden, während die Seite gerendert wird.

JS-Optimierung

Gehen wir nun zum Abschnitt JS-Einstellungen , um die JavaScript-Dateien zu optimieren. Hier empfehlen wir, die gleichen Schritte wie bei den CSS-Einstellungen zu befolgen. Aktivieren Sie einfach die Optionen JS Minify und JS Combine , damit die JS-Dateien ebenfalls minimiert und zu einer einzigen Datei zusammengeführt werden.

Es gibt auch die Option Load JS Deferred , die wirklich einen Unterschied machen kann. Sobald Sie diese Einstellung aktivieren, werden Skripts im Hintergrund geladen, während der Browser das Seitenlayout und die Stile rendert. Skripte sind oft „schwerer“ als HTML, daher kann das Laden und Ausführen von Skripten, die für die anfängliche Seitendarstellung nicht erforderlich sind, verzögert und später geladen werden. Es ermöglicht Besuchern, die Website fast sofort zu nutzen.

Nachdem Sie diese Option aktiviert haben, stellen Sie bitte sicher, dass das Front-End der Website nicht beschädigt ist, da einige Skripte möglicherweise geladen werden müssen, bevor die Seite gerendert wird.

Medienoptimierung

Schließlich müssen Sie Ihre Medieninhalte optimieren. Da Bilder oft etwa die Hälfte der Inhaltsgröße einer Webseite ausmachen, kann die Konvertierung aller Bilder in das WebP-Format (das im Durchschnitt 30 % kleiner als andere Formate ist) die Ladegeschwindigkeit Ihrer Seite erheblich verbessern.

Im Abschnitt LiteSpeed-Cache > Bildoptimierung > Einstellungen können Sie Ihre Website-Bilder in das WebP-Format konvertieren, indem Sie die Einstellungen „ Create WebP Versions“ und „Image WebP Replacement “ aktivieren.

Nachdem Sie diese Optionen aktiviert haben, navigieren Sie zum Abschnitt Zusammenfassung der Bildoptimierung, um den Domänenschlüssel abzurufen und Bilder zu optimieren, indem Sie auf die Schaltfläche „Optimierungsanfrage senden“ klicken, bis der Bildoptimierungswert 100 % erreicht.

Wenn es auf Ihrer Website Einbettungen gibt (z. B. YouTube-Videos, Instagram-Posts oder Tweets), ist es außerdem besser, die eingebetteten Inhalte nur zu laden, wenn die Benutzer zu ihnen herunterscrollen, nicht während der ersten Seitendarstellung. Dadurch wird die erste Seite viel schneller gerendert und die Speichernutzung des Browsers reduziert.

Navigieren Sie zum Abschnitt LiteSpeed ​​Cache > Seitenoptimierung > Medieneinstellungen und aktivieren Sie die Option Lazy Load Iframes .

Einpacken

Unten sehen Sie den Screenshot der Google PageSpeed-Ergebnisse auf Mobil- und Desktop-Geräten, nachdem wir die Leistung der Website gemäß den Schritten in diesem Tutorial optimiert haben.

Das ist es! Wenn Sie Ihre Verzeichnis- oder Marktplatz-Website mit HivePress (oder einer anderen WordPress-basierten Lösung) erstellt haben, können Sie die gleichen Schritte ausführen, um das Caching einzurichten, Stile, Skripte und Schriftarten sowie die Medieninhalte wie Bilder oder Einbettungen zu optimieren. Als Ergebnis erhalten Sie eine hohe Punktzahl bei Google PageSpeed ​​(wodurch Ihre SEO-Rankings verbessert werden) und verbessern die allgemeine Benutzererfahrung Ihrer Website.

Lesen Sie außerdem die folgenden Artikel:

• Beste WordPress-Verzeichnis-Plugins
• Beliebte WordPress-Verzeichnisthemen
• Fehler beim Erstellen einer WordPress-Listing-Website