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!

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 wordpress theme

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:

total wordpress theme demo

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.

fresh wordpress install speed test

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.

download total wordpress theme

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.

install total wordpress theme

Schritt 3

Klicke dann auf „Aktivieren“.

activate total wordpress theme

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“.

install plugins

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.

install total theme demo data

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“.

demo total theme

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.

import data total theme

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.

total wordpress theme base lite

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.

woocommerce setup wizard

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.

total theme base speed

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.

complete analytics optimization suite plugin

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.

normal google analytics script

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.

local google analytics speed

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.

embed script wordpress

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.

disable embeds

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.

disable embeds speed test

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.

query strings remover plugin

Haben Sie mit Ausfallzeiten und WordPress-Problemen zu kämpfen? Kinsta ist die Hosting-Lösung, die Ihnen Zeit spart! Sieh dir unsere Features an

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.

remover query strings speed

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.

imagify image optimizer

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.

optimize wordpress media library

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.

image optimization speed test

Schritt 5 – Aktiviere ein CDN

Der nächste Schritt besteht darin, ein Content Delivery Network (CDN) auf der Webseite zu aktivieren. Dies ermöglicht es uns, unsere Inhalte rund um den Globus schneller auszuliefern. In diesem Beispiel nutzen wir KeyCDN auf unserer Webseite. Wir haben dann weitere fünf Tests auf Pingdom durchgeführt. Dies brachte uns auf eine Ladezeit von 1,19 Sekunden.

cdn speed test

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

disable scripts

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.

disable unnecessary scripts speed

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.

slider revolution speed optimize

Wir haben dann weitere fünf Tests auf Pingdom durchgeführt. Dies brachte uns auf eine Ladezeit von 1,15 Sekunden.

optimize revolution slider speed

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!

http2 scripts concatenate

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.


Wenn Dir dieser Artikel gefallen hat, dann wirst du Kinsta’s WordPress Hosting-Plattform lieben. Beschleunige deine Webseite und erhalte 24/7 Support von unserem erfahrenen WordPress-Team. Unsere Google Cloud basierte Infrastruktur konzentriert sich auf die Bereiche Skalierbarkeit, Performance und Sicherheit. Lass uns dir den Kinsta-Unterschied zeigen! Schau Dir hier unsere Pakete an