Wenn es um die Optimierung der WordPress-Leistung geht, können wir folgendes versuchen.

Installieren Sie das Thema und füllen Sie den Inhalt auf

Wenn Sie unser Theme in einer neuen WordPress-Installation einrichten, importieren Sie normalerweise einige Dummy-Inhalte. Dieser Inhalt soll Ihnen helfen, Ihre Website schnell zum Laufen zu bringen und zu verstehen, wie sie aufgebaut und konfiguriert ist. Da diese Inhalte viele Bilder, Seiten, Beiträge und Produkte enthalten, die Sie möglicherweise bald löschen werden, sind sie nicht für die Leistung optimiert. Daher ist es nicht erforderlich, die Leistung der Website in diesem Schritt zu messen.

Nach der Installation des Themas müssen die Bereiche der Website durchsucht und mit aktuellen Bildern, Produkten, Beiträgen und Seiten gefüllt werden. Dadurch werden alle veralteten Daten entfernt und die Website wird für künftige Besucher vorbereitet. In diesem Stadium müssen Sie sich auf die folgenden Empfehlungen konzentrieren, um die Geschwindigkeit und Leistung der Website zu gewährleisten:

1. Überprüfung von SSL-Zertifikaten Stellen Sie sicher, dass Ihre Website über ein gültiges SSL-Zertifikat verfügt. Dies ist entscheidend für die Leistung und Sicherheit Ihrer Website. Wenn dies noch nicht der Fall ist, wenden Sie sich an Ihren Hosting-Provider, um Hilfe zu erhalten.
2. Optimierte Bilder Optimieren Sie alle Bilder und verwenden Sie geeignete Bildgrößen, bevor Sie sie hochladen. Siehe Schritt 3 für weitere Einzelheiten.
3. Ersetzen von Bildern in virtuellen Inhalten Stellen Sie sicher, dass Sie alle Bilder in den virtuellen Inhalten durch Ihre eigenen ersetzen. Einige der virtuellen Bilder werden möglicherweise von unserem Server geladen und verlangsamen Ihre Website.
4. Vereinfachung des Seiteninhalts Vermeiden Sie die Erstellung komplexer Seiten mit vielen Schiebereglern, Animationen, Drehungen und Produkten. Jedes zusätzliche Seitenelement erhöht die Komplexität und die DOM-Größe, was zu Leistungsproblemen führt. Halten Sie Ihre Seiten einfach und reduzieren Sie unnötige Elemente.

Überprüfung der Server-Antwortzeiten und Optimierung

Die Schnelligkeit und Zuverlässigkeit Ihres Webhosting-Servers ist für die Leistung Ihrer Website von entscheidender Bedeutung. Bei einer neuen Installation ohne installierte Plugins sollte die Reaktionszeit des Servers zwischen 0,5 bis 1,2 SekundenZwischen. Hier finden Sie einige Möglichkeiten zur Messung und Optimierung von Server-Antwortzeiten:

1. Testseite auswählen Die Antwortzeit des Servers kann von Seite zu Seite variieren. Normalerweise testen wir sie auf der Warenkorb-Seite, weil diese Seite keine zusätzlichen Elemente hat und das Caching-Plugin (falls aktiviert) sie nicht beeinflusst.
2. Testen mit WebPageTest Interviews WebPageTestführen Sie den Test der Server-Antwortzeit durch. Die Antwortzeit Ihres Servers wird im Feld "Wasserfälle"Die erste Anfrage in Abb.

3. Überprüfen und Optimieren der Servereinstellungen Stellen Sie sicher, dass die GZIP-Komprimierung auf dem Server aktiviert ist, um die Ladezeit der Ressourcen zu verkürzen. Dies kann mit der Option GiftOfSpeed Sonde GZIP-Komprimierungob sie ordnungsgemäß funktioniert. Wenn sie nicht aktiviert ist, wenden Sie sich an Ihren Hosting-Anbieter.

Konfigurieren der Theme-Leistungseinstellungen

Die Standardkonfiguration unseres Themes ist sehr optimiert, um die meisten Funktionen zu unterstützen. Wenn Sie jedoch einige Funktionen nicht benötigen, können Sie sie deaktivieren, um die Leistung zu verbessern. Hier sind einige Optionen, die sofort nach der Installation konfiguriert werden können:

1. Gutenberg-Stile deaktivieren Wenn Sie hauptsächlich Elementor oder den WPBakery Page Builder verwenden, können Sie alle Gutenberg-CSS- und JS-Dateien deaktivieren:
   • Navigieren Sie zu:Thema Einstellung -> Leistungen -> CSS
   • Wählen Sie aus:Gutenberg-Stile deaktivieren
2. Einstellung der Schriftartanzeige Um die Leistung zu verbessern, wird empfohlen, die Google-Schriftarten und -Symbole der Schriftart-Anzeige eingestellt auf Tauschen Sie::
   • Navigieren Sie zu:Thema Einstellung -> Leistungen -> Schriftarten und Icons
   • Einstellung:Schriftart-Anzeige wegen Tauschen Sie
   • Für weitere Informationen siehe Google Docs
3. Verzögertes Laden einschalten Wenn Sie eine große Anzahl von Bildern auf Ihrer Seite haben, können Sie das verzögerte Laden aktivieren, um die Seitengröße zu verringern:
   • Navigieren Sie zu:Theme-Einstellungen -> Leistung -> Verzögertes Laden
   • Aktivieren:verzögerte Belastung(Diese Option ist nicht immer aktiviert, ist aber nützlich, wenn es viele Bilder gibt)
4. Optimierung des WPBakery Page Builders Wenn Sie den WPBakery Page Builder verwenden, können Sie die CSS-Größe reduzieren, indem Sie nicht verwendete Widgets deaktivieren:
   • Navigieren Sie zu:Dashboard -> WoodMart -> Werkzeuge -> WPBakery CSS Generator
   • Deaktivieren: Unnötige Widgets
5. Initialisierung der Rotation beim Scrollen Für alle rotierenden Elemente, die sich nicht auf dem Startbildschirm befinden, empfiehlt es sich, die Option "Rotation beim Scrollen initialisieren" zu aktivieren:
   • Dadurch wird die anfängliche JS-Ausführungszeit reduziert und die Ladegeschwindigkeit der Seite verbessert.

6. AJAX-Dropdown-Menü aktivieren
   • Pfade::Erscheinungen -> Menü
   • RiggAJAX-Menü: Aktivieren Sie die AJAX-Menüoption für alle Dropdown-Menüs mit HTML-Blöcken, um die DOM-Größe beim ersten Laden der Seite zu reduzieren und die Leistung zu verbessern.

Durch die Konfiguration dieser Optionen ist es möglich, die Seitengröße um 10-40% zu verringern. Überprüfen Sie nach dem Aktivieren oder Deaktivieren einer der Optionen unbedingt alles noch einmal, um sicherzustellen, dass keine Probleme aufgetreten sind.

Schritte zur Bildoptimierung

Große, nicht optimierte und unangemessen große Bilder sind eine der Hauptursachen für das langsame Laden von Seiten. In der Regel nehmen Bilder 50-80% des Gesamtgewichts einer Seite ein. Durch die Optimierung von Bildern und die Verringerung ihrer Anzahl können Sie die Ladegeschwindigkeit einer Seite und die wichtigsten Web-Metriken erheblich verbessern. Nachfolgend finden Sie die einzelnen Optimierungsschritte:

1. Bildgröße kontrollieren
   • Empfohlene GrößeAlle Bilder sollten zwischen 100-200KB groß sein. Die durchschnittliche Größe von Produkt- und Beitragsbildern sollte 50-150KB betragen. Große Bilder für die Hero-Sektion und den Slider können 150-200KB groß sein, sollten dies aber nicht überschreiten.

2. Optimieren von Bildern mit Online-Tools
   • Empfohlene Tools: Bevor Sie ein Bild hochladen, verwenden Sie die TinyPNG und andere Online-Tools zur Komprimierung. Laden Sie das Bild einfach auf die Website hoch und laden Sie das optimierte Bild herunter.
3. Installieren Sie das Plug-in für die automatische Bildoptimierung
   • Empfohlene Plug-insWenn Sie die Bilder nicht manuell optimieren möchten, können Sie ein Plugin zur automatischen Optimierung installieren, zum Beispiel Imagify. Das Plugin komprimiert die Bilder nicht nur, sondern wandelt sie auch in das kleinere WEBP-Format um, wodurch das Gewicht des Bildes weiter reduziert wird 20-40%.

4. Einstellen der Bildgröße
   • Produktbilder auf der Shop-Seite: durch Instrumententafeln -> Erscheinungen -> Personalisierung -> WooCommerce -> Produktbilder Legen Sie die Bildgröße fest.
   • Blog Post Bilder: durch Instrumententafeln -> aufstellen -> Medien, insbesondere Nachrichtenmedien Legen Sie die Bildgröße fest.
   • seitenbezogenes ElementBildgröße von Elementen wie Bannern, Infoboxen, Galerien usw. festlegen, wenn eine Seite mit einem Page Builder wie WPBakery oder Elementor bearbeitet wird.

Wichtige Empfehlungen

• Optimieren Sie alle Bilder vor dem HochladenVergewissern Sie sich, dass das Bild vor dem Hochladen komprimiert und die Größe mit einem Tool geändert wurde.
• WEBP-Format aktivierenUnser Theme unterstützt das WEBP-Format. Sie können die Bildgröße weiter reduzieren, indem Sie das Bild mit dem Imagify-Plugin in das WEBP-Format konvertieren.
• Vermeiden Sie zu viele grafische ElementeMinimieren Sie die Anzahl der Bilder auf der Seite und vermeiden Sie übermäßige Schieberegler, Animationen und Drehungen.

WP Rocket Cache-Plugin installieren

Caching-Plugins sind für jede WordPress-Website von entscheidender Bedeutung, da sie die Antwortzeiten des Servers erheblich verkürzen und dafür sorgen können, dass Seiten fast sofort geladen werden. Wir empfehlen WP Rocket, ein hochwertiges und benutzerfreundliches Plugin für Caching und Leistungsoptimierung. Obwohl WP Rocket ein kostenpflichtiges Plugin ist, sind seine Ergebnisse bemerkenswert. Wenn Sie nur über ein kleines Budget verfügen, sollten Sie kostenlose Alternativen wie Autoptimize, W3 Total Cache oder WP Super Cache ausprobieren.

Einrichten des WP Rocket-Plugins

Nachdem Sie das WP Rocket-Plugin aktiviert haben, führen Sie die folgenden Schritte aus, um es für eine optimale Leistung zu konfigurieren:

1. Datei-Optimierung
   • CSS-MinimierungAktivieren Sie diese Option, um CSS-Dateien zu komprimieren und ihre Größe zu verringern. Die Optionen "CSS-Übermittlung optimieren" und "Unbenutzte CSS entfernen" können beim Laden der Seite zu einem Flackern des Stils führen, weshalb wir diese Optionen in der Regel nicht aktivieren, auch wenn sie die Google-Seitengeschwindigkeit verbessern.
   • JS Minimal und verzögertes LadenAktivieren Sie die Option zur Minimierung von JavaScript, um die Größe der JS-Datei zu verringern. Die Verzögerung der JS-Ausführung ist eine gute Option, um die anfängliche Ladezeit zu verkürzen. Allerdings können einige Skripte das Laden verzögern, bevor der Benutzer mit ihnen interagiert. Daher müssen wichtige JS-Dateien in eine Ausnahmeliste aufgenommen werden. Diese Liste kann in WoodMart Version 7.0 automatisch gefüllt werden.

2. Cache-Einstellungen
   • Separate Cache-Dateien für mobile GeräteWenn Sie die Option Mobile DOM-Optimierung verwenden, wird empfohlen, diese Funktion zu aktivieren, um eine separate Cache-Datei für mobile Geräte zu erstellen.
   • URLs niemals zwischenspeichernErweiterte Regeln: Fügen Sie unter Erweiterte Regeln Seiten-URLs hinzu, die nicht zwischengespeichert werden sollen, z. B. Wunschlisten- und Vergleichsseiten. Standard-WooCommerce-Seiten wie "Mein Konto", "Warenkorb" und "Kasse" sind bereits vom Caching ausgeschlossen.

Empfehlungen zur weiteren Optimierung

• Verwendung eines CDNKonfiguration eines Content Delivery Network (CDN) kann die Ladegeschwindigkeit für Besucher aus aller Welt drastisch verbessern. Die Ladezeiten können erheblich verkürzt werden.

Beispielhafte Konfiguration

Nachfolgend finden Sie unsere Beispielkonfiguration mit Einstellungen, die uns zu schnellen Ladezeiten und hohen Google Page Speed-Werten verholfen haben:

• WP Rocket -> Einstellungen -> Datei-OptimierungCSS- und JS-Minimierung aktivieren und das Laden von JS-Dateien verzögern.
• WP Rocket -> Einstellungen -> CacheSeparate Cache-Dateien für mobile Geräte.
• WP Rocket -> Einstellungen -> Erweiterte RegelnFügen Sie eine Wunschliste und die URL einer Vergleichsseite zur Never Cache-Liste hinzu.

So beheben Sie die Google-Warnung zur Seitengeschwindigkeit

Der Google Page Speed Bericht gibt spezifische Warnungen, die auf verschiedenen Faktoren für jede Website basieren. Hier sind die häufigsten Warnungen und ihre Behebungen für unser Projekt.

1. die Beseitigung von Ressourcen, die das Rendering blockieren

Dies ist eine der häufigsten Warnungen für WordPress-Websites. Je mehr Ressourcen sich im Kopf der Seite befinden, desto länger dauert das Rendern der Blockierung. Zu diesen Ressourcen gehören in der Regel CSS-Dateien, JS-Dateien und Schriftarten (z. B. Google Fonts). Hier sind einige Schritte, um die Rendering-Blockierungszeit zu reduzieren:

• Gutenberg-Stile deaktivierenWenn Sie den Gutenberg-Editor nicht verwenden, können Sie seine Stile deaktivieren, um unnötige CSS-Dateien zu reduzieren (siehe Schritt 2 oben).
• Vermeiden Sie doppelte Google-SchriftartenStellen Sie sicher, dass Google-Schriftarten nur aus einer Quelle geladen werden. Wenn Google-Schriftarten zum Beispiel über das Design und Elementor geladen werden, können Sie die Schrifteinstellungen in den Website-Einstellungen von Elementor zurücksetzen.

• Unnötige Google-Schriftarten deaktivierenWenn Sie die Google-Schriftarten nicht benötigen, können Sie sie in den Theme-Einstellungen deaktivieren oder sie vom Server herunterladen und laden.
• Reduzieren Sie unnötige CSS-DateienZum Beispiel können die CSS-Dateien der Font Awesome-Symbole unnötigerweise auf die Seite geladen werden. Versuchen Sie, einzelne SVG-Symbole anstelle ganzer Symbolbibliotheken zu verwenden.

2. ungenutztes JavaScript reduzieren

Achten Sie auf diese Warnung und überprüfen Sie alle geladenen JS-Dateien, insbesondere Skriptdateien von Drittanbieter-Plugins. Beispiel:

• Deinstallieren Sie nicht verwendete Plug-insWenn das Slider Revolution-Plugin nicht verwendet wird, können Sie es einfach deinstallieren. Wenn es nur auf bestimmten Seiten verwendet wird, können Sie seine globale Ladefunktion deaktivieren.
• Verwendung von leichteren AlternativenVerwenden Sie zum Beispiel den leichten Slider, der mit WoodMart geliefert wird, anstelle des schweren Slider-Plugins.

3. die Verkürzung der anfänglichen Antwortzeit des Servers

Eine zu lange anfängliche Antwortzeit des Servers kann die Leistung der Website beeinträchtigen. Dies kann durch die nachstehenden Schritte optimiert werden:

• Verwendung des Cache-PluginsDie Installation eines Caching-Plugins wie WP Rocket kann die Antwortzeiten des Servers erheblich verkürzen.
• FehlersucheWenn die Antwortzeit mehr als 2 Sekunden.Die Ursache des Problems kann durch die folgenden Tests ermittelt werden:
  • Deaktivieren Sie alle externen Plugins und messen Sie die Reaktionszeit, indem Sie ein Plugin nach dem anderen aktivieren, um dasjenige zu finden, das das Problem verursacht.
  • Testen Sie mit dem Standard-WordPress-Theme und vergleichen Sie dessen Reaktionszeit mit der des WoodMart-Themes. Wenn das Standard-Theme eine deutlich kürzere Reaktionszeit hat, kann es sich um ein Theme-Problem handeln.
  • Wenn die Antwortzeit nach dem Deaktivieren aller Plugins und der Verwendung des Standardthemas immer noch zu lang ist, wird empfohlen, dieTreuhandschaftDienstanbieter, da es Probleme mit der Serverkonfiguration oder der Leistung geben kann.

Zusammenfassung:

In diesem Artikel zeigen wir Ihnen, wie Sie die Leistung von WordPress-Websites optimieren können. Mit diesen Optimierungsschritten können Sie die Ladegeschwindigkeit Ihrer Website und die Benutzerfreundlichkeit deutlich verbessern.