Es gibt viele Missverständnisse über große Multipurpose-WordPress-Themes wie Avada und das X-Theme und dass sie deine Webseite zum Crawlen bringen könnten. Es ist wahr, dass die meisten Multipurpose Themes eine gewisse Aufblähung mit sich bringen (besonders wenn sie mit WooCommerce gepaart sind), aber wenn sie richtig optimiert sind, können sie schnell laden. Heute werden wir uns das Multipurpose Total WordPress Theme genauer ansehen und herausfinden, wie schnell es auf den Servern von Kinsta laden kann. Dies ist kein typischer WordPress Theme Test, der einfach nur die Features aufzählt, wir werden das Total WordPress Theme auf Herz und Nieren prüfen!
- Was ist das Total WordPress Theme?
- Neue WordPress Installation
- Installiere das Total WordPress Theme
- Optimiere das Total WordPress Theme
Total WordPress Theme
Das Total WordPress Theme wurde von dem Team von WPExplorer entwickelt, die auch einen beliebten WordPress Blog betreiben, den viele von euch wahrscheinlich schon einmal gelesen haben. Es ist derzeit auf ThemeForest für $59.00 erhältlich, und 12 Monate Support für zusätzliche $17.63. Es ist ein modernes Mehrzweck-Theme, das leicht für jede Art von WordPress-Seite verwendet werden kann, von Online-Shops (unterstützt WooCommerce), über Blogs, Foren (unterstützt bbPress), bis hin zu News-Seiten. Wenn es um große Multipurpose Themes wie dieses geht, ist wirklich alles möglich. Wenn du es dir vorstellen kannst, kannst du es auch bauen. Schau dir einige Beispiele von Webseiten an, die das Total Theme verwenden. Total-Seiten gibt es in allen Formen und Größen. Wenn du dich also fragst, ob eine Seite das Total-Theme verwendet, schau dir unser WordPress-Theme Detector Tool an.
Features
Da es ein Mehrzweck-Theme ist, hat es eine Menge Features! Wir werden nicht auf alle eingehen, aber hier sind ein paar wichtige Features, die du beachten solltest:
- WPML kompatibel – macht das Übersetzen viel einfacher
- Drag and Drop Page Builder (Visual Composer) mit 90+ Bausteinen
- Beinhaltet Revolution, Layer Slider und benutzerdefinierte Beiträge
- Child Theme kompatibel und RTL Support
- SEO-optimiert, cross-browser-kompatibel und voll responsive für Mobile-First-Indexierung
- 40+ vorgefertigte, gestylte Demos mit XML-Demodaten, damit du schnell loslegen kannst
- Theme-Customizer mit über 300 Theme-Optionen, einfach alles zu ändern, wie z.B. Google Fonts
- Kompatibel mit allen gängigen WordPress-Plugins wie Yoast SEO
- Kostenlose Theme Updates und Support direkt von den Entwicklern
Neue WordPress-Installation
Wir haben mit einer neuen WordPress-Installation auf Kinsta (zentraler US-Google-Cloud-Standort) begonnen und das Standard-Theme Twenty Sixteen installiert. SSL ist eingerichtet und HTTPS ist aktiviert. Wir wollten vorher noch ein paar Tests durchführen, damit wir genau wissen, wie viel Ladezeit das Total Theme hinzufügt. Wir haben fünf Geschwindigkeitstests auf Pingdom durchgeführt und den Durchschnitt genommen. Wie du unten sehen kannst, kommt unsere aktuelle Installation auf 383 ms.
Schau dir unbedingt unser ausführliches Tutorial an, wie Pingdom funktioniert und du die Wasserfall-Analyse verstehst.
Total WordPress Theme installieren
Als erstes werden wir das Total WordPress Theme installieren und die Dummy-Daten importieren. Du kannst der Installationsdokumentation folgen oder unsere Schritte unten befolgen.
Schritt 1
Du kannst das Total WordPress Theme bei ThemeForest kaufen. In diesem Tutorial werden wir die Dummy-Daten verwenden, damit wir schneller loslegen können, also wählen wir „Alle Dateien & Dokumentation“ zum Download.
Schritt 2
Als nächstes klickst du in deinem WordPress Dashboard auf „Themes“ unter Appearance. Klicke auf „Add New“ und dann auf „Upload Theme“. Wähle die Datei „Total.zip“ im Ordner des Themes aus.
\themeforest-6339019-total-responsive-multipurpose-wordpress-theme\Total-3.6.0\Installable-Theme\Total.zip
Abhängig von der Geschwindigkeit deines WordPress Hosts kann die Installation ein paar Sekunden dauern.
Schritt 3
Klicke dann auf „Aktivieren“.
Schritt 4
Das Total Theme benötigt ein paar Plugins, die du installieren musst, um alle Funktionen nutzen zu können. Wähle die empfohlenen Plugins aus und klicke auf „Installieren“.
Schritt 5
Anschließend müssen wir die Demodaten installieren. Unter dem „Demo Importer“ klicke auf das „Base Lite“ Theme. Du kannst das gesamte „Base“ Theme machen, aber das wird nicht empfohlen, da es sehr groß ist. Die Base Lite ist eine leicht abgespeckte Version.
Schritt 6
Es wird dich dann auffordern, „WooCommerce“ zu installieren. Wenn du dies nicht verwendest, empfehlen wir, es deaktiviert zu lassen, da WooCommerce unnötige Last hinzufügen kann. Für dieses Tutorial werden wir es jedoch aktivieren, damit wir es später optimieren können. Klicke einfach darauf und es wird installiert, dann klicke auf „Weiter“.
Schritt 7
Wenn du eine Neuinstallation machst, wähle alle Inhalte aus und klicke auf „Import bestätigen“. Je nachdem, wie schnell dein WordPress-Hoster ist, kann es ein paar Minuten dauern, bis alle Inhalte importiert sind. Auf den Servern von Kinsta hat es nur etwa 20 Sekunden gedauert.
Und das war’s! Deine Demodaten sind nun importiert und deine WordPress-Seite sollte nun wie die Base Lite Demo aussehen, wie unten zu sehen.
Optional – WooCommerce Einrichtung
Wenn du WooCommerce verwendest, wirst du aufgefordert, den Einrichtungsassistenten zu beenden. Schau dir unser ausführliches Tutorial an, wie du WooCommerce einrichtest. Wir haben WooCommerce für die untenstehenden Beispiele eingerichtet.
Total WordPress Theme optimieren
Jetzt kommt der spaßige Teil! Wir werden dir zeigen, wie du das Total WordPress Theme ein wenig optimieren kannst. Zuerst brauchen wir eine Basisgeschwindigkeit, um damit zu beginnen. Also haben wir fünf Geschwindigkeitstests auf Pingdom durchgeführt und den Durchschnitt genommen. Wie du unten sehen kannst, liegt unsere Basisgeschwindigkeit mit den installierten Demodaten bei 1,06 Sekunden, mit 54 HTTP-Anfragen und einer Gesamtseitengröße von 1,4 MB.
Schritt 1 – Google Analytics lokal synchronisieren (optional)
Fast jeder nutzt Google Analytics, also ist es fair, dass wir das in unserem Test einrichten, da 99% der Leute, die das Total Theme nutzen, das wahrscheinlich laufen haben. Also werden wir das auch tun. Das kostenlose Plugin Complete Analytics Optimization Suite ermöglicht es dir, das Skript von Google Analytics lokal zu synchronisieren, was die Sache wiederum etwas beschleunigen kann.
Wir sagen, dass dies optional ist, weil Google diese Methode nicht offiziell empfiehlt, aber wir haben dies auf einigen Webseiten mit hohem Traffic verwendet und es funktioniert gut. Indem du dein Google Analytic Skript lokal synchronisierst, kannst du die Caching-Warnung deines Leverage-Browsers und die Geschwindigkeit verbessern, da der Browser des Nutzers keinen Roundtrip machen muss, um die Datei von Googles externem Server herunterzuladen. Hier ist ein Beispiel für den Unterschied, wenn das Plugin installiert ist. Du kannst es gerne auf deiner Webseite ausprobieren und deine eigenen Tests durchführen.
Normales Google Analytics installiert
Als erstes haben wir fünf Tests mit Pingdom durchgeführt, wobei Google Analytics auf normale Weise installiert wurde. Wie du sehen kannst, fügt das Hinzufügen von Google Analytics etwa 0,25 Sekunden zu unserer Gesamtladezeit hinzu und 4 zusätzliche HTTP-Anfragen. Das Team von WPExplorer hat bei der Entwicklung des Multipurpose Total Themes gute Arbeit geleistet, denn die Ladezeiten sind schon ziemlich schnell. Und natürlich sind die Server von Kinsta stark auf Performance optimiert. Kinsta nutzt Server-Level-Caching, sodass kein Caching-Plugin benötigt wird.
Google Analytics lokal synchronisiert
Dann haben wir das oben erwähnte CAOS-Plugin so konfiguriert, dass es Google Analytics lokal synchronisiert. Wir haben dann weitere fünf Tests auf Pingdom durchgeführt. Das bringt unsere gesamten HTTP-Anfragen um zwei runter und unsere Ladezeit auf 1,26 Sekunden. Das ist nicht viel, aber etwas schneller als das normale Google Analytics Setup.
Schritt 2 – Deaktiviere Einbettungen
Wenn du keine automatischen Einbettungen verwendest, musst du als erstes die Einbettungen deaktivieren. Dies erzeugt eine zusätzliche HTTP-Anfrage auf deiner WordPress-Seite (wie unten zu sehen), um die Datei wp-embed.min.js zu laden. Und diese wird auf jeder einzelnen Seite geladen.
Während diese Datei nur 1,2 KB groß ist, summieren sich solche Dinge mit der Zeit. Die Anfrage selbst ist manchmal eine größere Sache als die Downloadgröße des Inhalts. Am einfachsten ist es, wenn du einfach ein kostenloses Plugin namens Disable Embeds installierst.
Wenn du an alternativen Möglichkeiten interessiert bist, schau dir unseren ausführlichen Beitrag über die Deaktivierung von Einbettungen an. Wir haben dann weitere fünf Tests auf Pingdom durchgeführt. Das bringt unsere gesamten HTTP-Anfragen um eins runter und unsere Ladezeit auf 1,25 Sekunden. Auch hier gilt, dass sich all diese Dinge summieren, wenn wir fertig sind.
Schritt 3 – Query Strings aus URLS entfernen
Ein weiteres häufiges Problem ist der Umgang mit Query Strings. Deine CSS- und JavaScript-Dateien haben normalerweise die Dateiversion am Ende ihrer URLs, wie z.B. https://domain.com/file.min.css?ver=4.5.3. Einige Server und Proxyserver sind nicht in der Lage, Query Strings zu cachen. Indem du sie also entfernst, kannst du manchmal dein Caching verbessern. Es gibt kostenlose Plugins wie Query Strings Remover, die dies automatisch für dich in WordPress erledigen können.
Wir haben dann weitere fünf Tests auf Pingdom durchgeführt. Wie du sehen kannst, hat sich unsere Geschwindigkeit nicht verbessert, wohl aber unsere Performance-Note. Wir haben sie von 93 auf 99 erhöht.
In unserem ausführlichen Tutorial erfährst du, wie du Query-Strings aus URLs entfernen kannst.
Schritt 4 – Bild-Optimierung
Der nächste Schritt ist die Optimierung der Bilder in unserer WordPress-Mediathek. Dies ist bei weitem eine der wichtigsten Optimierungen, die du vornehmen kannst, da Bilder im Durchschnitt über 60% des Gewichts einer Seite ausmachen. Vor allem, wenn du große Bilder in deinem Slider auf dem Total Theme verwendest. In diesem Beispiel verwenden wir das Imagify Image Optimizer Plugin vom Team von WP Rocket.
Im Plugin gehen wir unter der Mediathek auf „Bulk Optimization“. Wir lassen die Standard-Komprimierungsstufe von Aggressiv eingestellt und klicken auf „Imagif’em all“. Wir konnten 7,63mb von 11,89mb einsparen! Alles mit einem einzigen Klick.
Wir haben dann weitere fünf Tests auf Pingdom durchgeführt. Dies reduzierte die Ladezeit erneut und verringerte die Gesamtgröße der Seite um satte 30%. Die Standardbilder, die in den Dummy-Daten enthalten sind, sind ziemlich klein, so dass du leicht viel schnellere Performancegewinne sehen wirst, wenn du dies auf einer nicht optimierten Webseite ausführst.
Schritt 5 – Aktiviere ein CDN
Der nächste Schritt besteht darin, ein Content Delivery Network (CDN) auf der Seite zu aktivieren. So können wir unsere Inhalte weltweit schneller ausliefern.
Kinsta-Kunden können das Kinsta CDN nutzen, das im Lieferumfang enthalten ist. Dieses ist zusammen mit der Funktion zur Code-Minifizierung direkt in das MyKinsta Dashboard integriert. So können Kunden mit einem einfachen Klick die automatische CSS- und JavaScript-Minifizierung aktivieren und ihre Seiten ohne manuellen Aufwand effektiv beschleunigen.
Schritt 6 – Unnötige Skripte auf der Homepage deaktivieren
Eine weitere Möglichkeit, die Webseite zu beschleunigen, ist die Deaktivierung unnötiger Skripte auf der Startseite und auf der gesamten Webseite. WooCommerce hat ein paar Skripte, die nicht auf der Homepage geladen werden müssen. Und wenn du die Lightbox-Funktion nicht verwendest, kannst du auch diese deaktivieren. Dazu verwenden wir das Premium Gonzalez Plugin, welches uns erlaubt, Skripte unserer Wahl individuell zu deaktivieren, wie z.B. die folgenden.
//wpdev.ink/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js //wpdev.ink/wp-content/plugins/woocommerce/assets/css/woocommerce.css //wpdev.ink/wp-content/themes/Total/assets/css/wpex-woocommerce-responsive.css //wpdev.ink/wp-content/themes/Total/assets/lib/ilightbox/minimal/ilightbox-minimal-skin.css
Wir haben dann weitere fünf Tests auf Pingdom durchgeführt. Dies brachte uns auf eine Ladezeit von 1,18 Sekunden und reduzierte unsere Gesamtzahl der HTTP-Anfragen um fünf.
Schritt 7 – Optimiere die Slider Revolution Geschwindigkeit
Wir sind keine großen Fans von Slidern, aber sie werden trotzdem ziemlich viel genutzt. Zum Glück gibt es ein paar Dinge, die du in den Einstellungen von Slider Revolution tun kannst, um sie zu beschleunigen. Wir empfehlen dir, die beiden Optionen „JavaScript in die Fußzeile einfügen“ und „JavaScript-Laden verzögern“ zu aktivieren.
Wir haben dann weitere fünf Tests auf Pingdom durchgeführt. Dies brachte uns auf eine Ladezeit von 1,15 Sekunden.
Ein Problem, das wir mit Slider Revolution gefunden haben, ist, dass es standardmäßig nicht alle seine Assets aus dem CDN lädt. Wir haben festgestellt, dass die folgenden drei Skripte noch von unserem Ursprungsserver geladen wurden:
https://wpdev.ink/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.slideanims.min.js https://wpdev.ink/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.layeranimation.min.js https://wpdev.ink/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.navigation.min.js
Dies ist etwas, das wahrscheinlich mit dem Entwickler des Plugins angesprochen werden sollte.
Denk an HTTP/2
Es ist auch wichtig zu bedenken, dass mit HTTP/2 die Verkettung (Kombination) deiner Skripte nicht mehr erforderlich ist. In manchen Fällen kann es deine Webseite jetzt sogar verlangsamen. Um dies zu testen, haben wir das kostenlose Plugin Autoptimize installiert, die HTML/CSS/JS-Optimierung aktiviert, sowie die CDN-Option. Anschließend haben wir noch fünf Tests auf Pingdom durchgeführt. Am Ende hat es der Webseite tatsächlich überhaupt nicht geholfen und war sogar langsamer. Mit HTTP/2 und Parallelität macht es einen tollen Job, mehrere kleine Dateien schnell zu laden. Wenn du allerdings noch nicht über HTTPS läufst, was HTTP/2 voraussetzt, kann das Autoptimize Plugin eine Menge helfen!
Zusammenfassung
Alles in allem waren wir ziemlich beeindruckt von dem Total WordPress Theme des Teams von WPExplorer. Dank der schnellen Server von Kinsta lag die Ladezeit selbst bei einer Neuinstallation mit Google Analytics bei 1,26 Sekunden. Und wenn man es ein wenig optimiert, sind 1,15 Sekunden Ladezeit verdammt schnell für eine Webseite mit installiertem WooCommerce! Wenn diese Total WordPress Theme Review hilfreich war, lass es uns unten in den Kommentaren wissen. Wenn du willst, können wir noch einmal tief in das Avada Theme oder Theme X eintauchen.
Brian hat eine große Leidenschaft für WordPress, verwendet es seit über einem Jahrzehnt und entwickelt sogar einige Premium-Plugins. Brian liebt Blogging, Filme und Wandern. Verbinde dich mit Brian auf Twitter.
Schreibe einen Kommentar