Themes können sich beim PageSpeed als echte Blocker erweisen.

Wir haben Top WordPress Themes hinsichtlich PageSpeed und PageLoad verglichen – die Ergebnisse gibt es hier.
Die drei populärsten Themes treten in vier verschiedenen Szenarien gegen unser SV100-WordPress-Theme an.
Sehen Sie hier, welche Auswirkung allein das gewählte Theme auf den Pageload haben kann – eines der vielen Kritierien für das Google Ranking.
Diese WordPress Themes wurden getestet
Avada
ist das populärste kostenpflichtige Theme auf ThemeForest.
OceanWP
ist das populärste unabhängige Theme im WP-Theme-Repository.
Twenty Twenty
ist das Standard-Theme und wird zusammen mit WP ausgeliefert.
SV100
ist unser selbst entwickeltes Theme und kostenfrei verfügbar.
Ein Theme sprengt bereits das Limit
Pagesize
Die Ladezeit Ihrer Website hängt stark von der Menge an Daten ab, die übertragen wird. Ihre Besucher brauchen mehr Bandbreite oder mehr Geduld, um sich Ihre Website ansehen zu können. Dabei sollte ein Theme möglichst sparsam mit den Ressourcen umgehen, damit Sie mehr Freiheiten bei Ihren Inhalten haben.
Google empfiehlt, dass eine Website nicht mehr als 1.600 Kilobyte PageSize haben sollte.
Avada benötigt – ohne Optimierung – allerdings schon über 1.700 Kilobyte – ohne Inhalte. Wählen Sie daher besser ein Theme, das sparsamer mit Ressourcen umgeht.
Folgend sehen Sie die getesteten Themes – je größer die PageSize, desto schlechter:
Was bleibt übrig?
Raum für Inhalte
Wenn Sie dem empfohlenen PageSize-Budget von Google folgen – wie viel Raum für Ihre Inhalte geben Ihnen die WordPress-Themes? Wir vergleichen hier im optimierten Szenario, also mit aktiviertem NGINX + WP-Rocket.
„Ihr Seitenaufruf ist uns sehr wichtig, bitte warten Sie…“
PageLoad
Die PageSize hat direkte Auswirkungen auf den PageLoad – das betrifft aber vor allem den Weg vom Server zum Client. Danach müssen die Seiten noch im Browser dargestellt werden. Das Laden von Daten und der Aufbau der Seiten geschieht ein Stück weit parallel und kann vom Theme-Entwickler beeinflusst werden. Wichtige Daten sollten zuerst übertragen werden, unwichtige später.
Für unsere Messung haben wir die Load Time von pingdom verwendet – in den PageSpeed-Tests finden Sie aber noch eine genauere Aufschlüsselung – z.B. wann die ersten Inhalte gezeichnet wurden oder ab wann der User mit der Seite interagieren kann.
Einfach alles laden?
Requests
Die Anzahl der Anfragen sollte möglichst gering gehalten werden – jede Anfrage erzeugt zusätzliche Last. Je mehr Dateien das Theme einbindet, wie Medien, Styles oder Scripts, desto mehr Anfragen müssen Client und Server bearbeiten.
Ein intelligentes und aufgeräumtes Asset-Loading durch das Theme reduziert effektiv die Anzahl der nötigen Anfragen und erhöht den PageSpeed.
100/100 ist das Ziel
PageSpeed
Der PageSpeed ist ein Messwert, der Ausdruck über die Geschwindigkeit einer Website gibt – hierbei werden zahlreiche Kriterien abgefragt, die es zu erfüllen geht. Der maximal erreichbar Wert ist 100/100.
Der erste Wert steht für die mobile Geschwindigkeit, der zweite für Desktop-Geräte. Da Google die Indexierung auf Mobile-First umgestellt hat, ist der erste Wert für Mobile-Geräte ausschlaggebend für das Ranking im Google-Index.
Google erhöht die Anforderungen laufend – neue Technologien werden geschaffen und irgendwann vorausgesetzt. Warten Sie daher mit der Optimierung nicht – es wird dadurch nicht besser.
Avada
Twenty Twenty
Empfehlung
Sollten für Ihre Website Benutzerfreundlichkeit, SEO oder der Adwords-Quality-Score wichtig sein – entscheiden Sie sich für ein WordPress-Theme, das Sie unterstützt und nicht ausbremst.
Natürlich sind die finalen Werte Ihrer Website auch abhängig von den installierten Plugins, Inhalten und Medien – doch hier können Sie mehr kontrollieren, als das Verhalten Ihres Themes. Das Theme bildet die Grundlage für die Ausgabe Ihrer Website. Suchen Sie nach tatsächlich modularen Themes, die nur das ausliefern, was auch tatsächlich benötigt wird.
Für Techniker
Konfiguration
Für Techniker und um die Ergebnisse nachvollziehbar zu machen, finden Sie hier Details zu der Konfiguration beim PageSpeed-Test.
Wir haben in unserer Servercloud eine eigene Instanz für diesen Test eingerichtet. Zum Zeitpunkt des Tests haben wir Plesk mit Apache+NGINX sowie PHP 7.4.10 eingerichtet. NGINX ist vor allem sinnvoll, um statische Dateien auszuliefern – Apache kümmert sich dagegen um die PHP Scriptausführung.
Zusätzlich haben wir für jedes Theme vier Testinstallationen eingerichtet mit jeweils unterschiedlichen Konfigurationen – so können wir vergleichen, wie abhängig ein Theme von diesen Optimierungen ist – und wo sich eine weitere Optimierung aus Nutzersicht für das jeweilige Theme nicht mehr lohnt.
Avada
Letzte Aktualisierung: Theme-Version 7.0.2

Nach der Theme-Aktivierung empfiehlt Avada die Installation von zusätzlichen Plugins. Wir installieren die mit „Required“ markierten Plugins.

Wir verzichten auf die Installation einer Demo, da der Pagespeed sonst nicht mehr zwischen den verschiedenen Themes vergleichbar wäre – die Inhalte wären zu unterschiedlich.

Ansonsten belassen wir das Theme bei den Standardeinstellungen.
WP-Rocket
Bei Avada mussten wir unsere WP-Rocket-Konfiguration anpassen und den Sicherheitsmodus für jQuery aktivieren – das führt dazu, dass das Laden dieses Scripts das weitere Laden der Website verzögert. Eigentlich unnötig, jedoch bei Avada zwingend, da es manche jQuery-Anweisungen nicht optimal einbindet – als angehängte Dateien – sondern inline. Das führt dann zu einem Javascript-Fehler, wenn inline-Scripts versuchen auf jQuery zuzugreifen, wenn es noch nicht geladen wurde.

Dies führt dazu, dass Avada im Mobile-Pagespeed 15-30 Punkte zusätzlich verliert – dieses Verhalten hat also eine recht große Auswirkung auf den Pagespeed.
OceanWP
Letzte Aktualisierung: Theme-Version 1.8.9

Nach der Theme-Aktivierung empfiehlt OceanWP die Installation von zusätzlichen Plugins. Da die meisten Nutzer der Empfehlung folgen werden, aktivieren wir diese Plugins im Rahmen dieses Tests auch.

Setup Wizard

OceanWP bietet darüber hinaus einen Setup Wizard.

Wir überspringen die Installation einer Demo, da der Pagespeed sonst nicht mehr zwischen den verschiedenen Themes vergleichbar wäre – die Inhalte wären zu unterschiedlich.

Auch auf der nächsten Seite verzichten wir auf den Upload von Logo oder Icons und ändern nichts an den Standardeinstellungen.

Damit ist der Setup Wizard abgeschlossen.
Ansonsten belassen wir das Theme bei den Standardeinstellungen.
Twenty Twenty
Letzte Aktualisierung: Theme-Version 1.5
Es wurden keine Theme-Einstellungen vorgenommen.
SV100
Die Konfigurationseinstellungen unseres Themes dokumentieren wir zu einem späteren Zeitpunkt.
Vanilla
Wir haben nichts weiter optimiert – es wurde lediglich das Theme installiert.
WP-Rocket
Je größer Ihre Website ist, desto wichtiger ist die Nutzung eines Caching-Plugins. Wir haben jahrelang mit verschiedenen Caching-Plugins gearbeitet, die allerdings kompliziert zu konfigurieren waren und regelmäßig fehlerhaft arbeiteten – bis das Plugin WP-Rocket veröffentlich wurde. Wir nutzen dieses Plugin bei allen unseren Projekten und sind begeistert über die Benutzerfreundlichkeit, Stabilität und herausragenden Support.
NGINX Optimized
In Plesk ist es möglich, mit dem primären Adminaccount zusätzliche NGINX Direktiven festlegen. Sollte Ihr Webhoster Plesk nutzen und nicht Zugriff auf dieses Formular haben, sollten Sie Ihren Webhoster bitten, die Cache-Einstellungen entsprechend zu setzen – da dies auch auf Domainebene möglich ist, sollte Ihr Webhoster das schnell umsetzen können.
Die folgende NGINX-Konfiguration aktiviert Komprimierung für statische Dateien und erhöht die Browser-Cache-Anweisung auf das Maximum – ideal für statische Dateien. Da WordPress Dateien mit Versionsnummern in der URL einbindet, erhalten Ihre Websitebesucher trotz hoher Cache-Dauer stets aktuelle Dateiversionen.
# BROWSER CACHE
gzip on;
gzip_min_length 1100;
gzip_buffers 4 32k;
gzip_types text/plain application/javascript application/x-javascript text/xml text/css image/svg+xml;
location ~* \.(css|js|svg)$ {
gzip_vary on;
expires max;
}
location ~* \.(ico|gif|jpe?g|png|eot|otf|woff|woff2|ttf|ogg)$ {
expires max;
}
Code-Sprache: PHP (php)
WP-Rocket + NGINX
Kombinieren Sie WP-Rocket mit optimierten NGINX-Direktiven, erreichen Sie in der Regel das beste Ergebnis. Wir nutzen hierzu eine von uns leicht angepasste Version der NGINX Konfiguration von Maxime Jobin, die speziell auf den Einsatz zusammen mit WP-Rocket optimiert ist.
###################################################################################################
# Rocket-Nginx
#
# Rocket-Nginx is a NGINX configuration to speedup your WordPress
# website with the cache plugin WP-Rocket (http://wp-rocket.me)
#
# Author: Maxime Jobin
# URL: https://github.com/maximejobin/rocket-nginx
#
# Tested with WP-Rocket version: 3.0.5.1
# Tested with NGINX: 1.15 (mainline)
#
# Version 2.1.1
#
###################################################################################################
# Add debug information into header
set $rocket_debug 0;
###################################################################################################
# Do not alter theses values
#
set $rocket_bypass 1; # Should NGINX bypass WordPress and call cache file directly ?
set $rocket_encryption ""; # Is GZIP accepted by client ?
set $rocket_file ""; # Filename to use
set $rocket_is_bypassed "No"; # Header text added to check if the bypass worked or not. Header: X-Rocket-Nginx-Serving-Static
set $rocket_reason ""; # Reason why cache file was not used. If cache file is used, what file was used
set $rocket_https_prefix ""; # HTTPS prefix to use when cached files are using HTTPS
set $rocket_hsts 0; # Is HSTS is off (0) by default. Will be turned on (1) if request is HTTPS
# HSTS value
set $rocket_hsts_value "max-age=31536000; includeSubDomains";
###################################################################################################
# PAGE CACHE
#
# Is GZIP accepted by client ?
if ($http_accept_encoding ~ gzip) {
set $rocket_encryption "_gzip";
}
# Is Brotli accepted by client ?
if ($http_accept_encoding ~ br) {
set $rocket_encryption "";
}
# Is SSL request ?
if ($https = "on") {
set $rocket_https_prefix "-https";
set $rocket_hsts 1;
}
# If HSTS is disabled, unset HSTS set for Rocket-Nginx configuration
if ($rocket_hsts = "0") {
set $rocket_hsts_value "";
}
# File/URL to return IF we must bypass WordPress
# Desktop: index.html or index-https.html
# Mobile: index-mobile.html or index-mobile-https.html
set $rocket_end "/cache/wp-rocket/$http_host/$request_uri/index$rocket_https_prefix.html$rocket_encryption";
set $rocket_url "/wp-content$rocket_end";
set $rocket_file "$document_root/wp-content$rocket_end";
set $rocket_mobile_detection "$document_root/wp-content/cache/wp-rocket/$http_host/$request_uri/.mobile-active";
# Do not bypass if it's a POST request
if ($request_method = POST) {
set $rocket_bypass 0;
set $rocket_reason "POST request";
}
# Do not bypass if arguments are found (e.g. ?page=2)
if ($is_args) {
set $rocket_bypass 0;
set $rocket_reason "Arguments found";
}
# Do not bypass if the site is in maintenance mode
if (-f "$document_root/.maintenance") {
set $rocket_bypass 0;
set $rocket_reason "Maintenance mode";
}
# Do not bypass if one of those cookie if found
# wordpress_logged_in_[hash] : When a user is logged in, this cookie is created (we'd rather let WP-Rocket handle that)
# wp-postpass_[hash] : When a protected post requires a password, this cookie is created.
if ($http_cookie ~* "(wordpress_logged_in_|wp\-postpass_|woocommerce_items_in_cart|woocommerce_cart_hash|wptouch_switch_toogle|comment_author_|comment_author_email_)") {
set $rocket_bypass 0;
set $rocket_reason "Cookie";
}
if (-f "$rocket_mobile_detection") {
set $rocket_bypass 0;
set $rocket_reason "Specific mobile cache activated";
}
# Do not bypass if the cached file does not exist
if (!-f "$rocket_file") {
set $rocket_bypass 0;
set $rocket_reason "File not cached";
}
# If the bypass token is still on, let's bypass WordPress with the cached URL
if ($rocket_bypass = 1) {
set $rocket_is_bypassed "Yes";
set $rocket_reason "$rocket_url";
}
# Clear variables if debug is not needed
if ($rocket_debug = 0) {
set $rocket_reason "";
set $rocket_file "";
}
# If the bypass token is still on, rewrite according to the file linked to the request
if ($rocket_bypass = 1) {
rewrite .* "$rocket_url" last;
}
# Add header to HTML cached files
location ~ /wp-content/cache/wp-rocket/.*html$ {
etag on;
add_header Vary "Accept-Encoding, Cookie";
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header X-Rocket-Nginx-Serving-Static $rocket_is_bypassed;
add_header X-Rocket-Nginx-Reason $rocket_reason;
add_header X-Rocket-Nginx-File $rocket_file;
add_header Strict-Transport-Security "$rocket_hsts_value";
}
# Do not gzip cached files that are already gzipped
location ~ /wp-content/cache/wp-rocket/.*_gzip$ {
etag on;
gzip off;
types {}
default_type text/html;
add_header Content-Encoding gzip;
add_header Vary "Accept-Encoding, Cookie";
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header X-Rocket-Nginx-Serving-Static $rocket_is_bypassed;
add_header X-Rocket-Nginx-Reason $rocket_reason;
add_header X-Rocket-Nginx-File $rocket_file;
add_header Strict-Transport-Security "$rocket_hsts_value";
}
# Debug header (when file is not cached)
add_header X-Rocket-Nginx-Serving-Static $rocket_is_bypassed;
add_header X-Rocket-Nginx-Reason $rocket_reason;
add_header X-Rocket-Nginx-File $rocket_file;
# No HSTS header added here. We suppose it's correctly added in the site configuration
###################################################################################################
# BROWSER CACHE
gzip on;
gzip_min_length 1100;
gzip_buffers 4 32k;
gzip_types text/plain application/javascript application/x-javascript text/xml text/css image/svg+xml;
location ~* \.(ico|gif|jpe?g|png|eot|otf|woff|woff2|ttf|ogg|webp)$ {
etag on;
expires max;
}
Code-Sprache: PHP (php)