PageSpeed – WordPress-Themes im Vergleich

Ihre WordPress-Website wird auf Google schlecht geranked, obwohl Sie viel Zeit und Geld in hochwertige Inhalte und Marketing investiert haben? Möglicherweise verhindert Ihr WordPress-Theme ein besseres Ranking.

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.

Avada

Avada ist das populärste kostenpflichtige Theme auf ThemeForest.

OceanWP

OceanWP ist das populärste Theme im offiziellen WordPress-Theme-Repository, das unabhängig entwickelt wurde.

Twenty Nineteen

Das Twenty Nineteen Theme wird zusammen mit WordPress ausgeliefert und ist das aktuellste zum Zeitpunkt der Auswertung.

SV100

SV100 ist unser Haustheme und kostenfrei verfügbar.

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:

Raum für Ihre 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.

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.

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.

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

Test-SitesPageSpeedPingdomPagesizePageloadRequests
Vanilla23/86871.743 KB681ms15
WP-Rocket26/90931.737 KB396 ms11
NGINX Optimized77/9894571 KB770 ms15
WP-Rocket + NGINX Optimized74/9997569 KB363 ms11

Ocean WP

Test-SitesPageSpeedPingdomPagesizePageloadRequests
Vanilla57/9484645 KB835 ms20
WP-Rocket90/10096636 KB271 ms7
NGINX Optimized84/9390285 KB672 ms20
WP-Rocket + NGINX Optimized100/10098265 KB318 ms7

Twenty Nineteen

Test-SitesPageSpeedPingdomPagesizePageloadRequests
Vanilla93/9984264 KB384 ms8
WP-Rocket100/10096222 KB181 ms5
NGINX Optimized100/1009556 KB275 ms8
WP-Rocket + NGINX Optimized100/1009847 KB141 ms5

SV100

Test-SitesPageSpeedPingdomPagesizePageloadRequests
Vanilla100/1009738 KB235 ms3
WP-Rocket100/1009815 KB173 ms4
NGINX Optimized100/100998 KB288 ms3
WP-Rocket + NGINX Optimized100/1009911 KB104 ms4

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.

In den folgenden Übersichten finden Sie die Links auf die einzelnen Test-Installationen sowie den zum Zeitpunkt der Messung ausgewiesenen PageSpeed. Bitte beachten Sie, dass die Messergebnisse von Zeit zu Zeit schwanken können – wir wählen den aus mehreren Tests stabilsten Wert. Dieser Text fokussiert sich auf den technischen Aspekt – gerne beratet Sie unser Team, was das für Ihre Website und Ihr Unternehmen bedeutet – kontaktieren Sie uns einfach.

Konfiguration

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

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.

Plesk NGINX Direktiven
Plesk NGINX Direktiven

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;
}

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;
}