PageSpeed – WordPress-Themes im Vergleich

Diese Auswertung vergleicht verschiedene WordPress-Themes hinsichtlich ihrer PageSpeed-Performance.

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 bedeutet – kontaktieren Sie uns einfach.

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

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 wechselt, ist das eine wichtige Information.

Konfigurationen

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 ~* \.(css|js|svg)$ {
	etag on;
	gzip_vary on;
	expires max;
}

location ~* \.(ico|gif|jpe?g|png|eot|otf|woff|woff2|ttf|ogg)$ {
	etag on;
	expires max;
}

Twenty Nineteen

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

Theme Installation & Konfiguration

Test-SitesPageSpeedPageload
Vanilla93/99264 KB
WP-Rocket100/100222 KB
NGINX Optimized100/10056 KB
WP-Rocket + NGINX Optimized100/10047 KB

Ocean WP

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

Theme Installation & Konfiguration

Test-SitesPageSpeedPageload
Vanilla57/94645 KB
WP-Rocket90/100636 KB
NGINX Optimized84/93270 KB
WP-Rocket + NGINX Optimized100/100265 KB

Avada

Avada ist das populärste kostenpflichtige Theme auf ThemeForest.

Theme Installation & Konfiguration

Test-SitesPageSpeedPageload
Vanilla23/861.743 KB
WP-Rocket26/901.737 KB
NGINX Optimized77/98571 KB
WP-Rocket + NGINX Optimized74/99569 KB

Fazit

Sollten für Ihre Website Benutzerfreundlichkeit, SEO oder der Adwords-Quality-Score wichtig sein – entscheiden Sie sich für ein WordPress-Theme, das hier hohe Werte aufzeigt. Natürlich können Sie die Werte durch Plugins oder schlecht optimierte Medien und Inhalte wieder verringern – aber das liegt ganz bei Ihnen. Sicher möchten Sie kein kritisches Feature aufgeben, doch ein leichtgewichtiges Theme gibt Ihnen dafür zusätzliche Kapazität.

Suchen Sie nach tatsächlich modularen Themes, die nur das ausliefern, was auch tatsächlich benötigt wird – und es erlauben nicht benötigte Funktionen zu deaktivieren, ohne dass weiterhin deren Assets ausgeliefert werden.

Für unser Theme können wir leider keinen höheren Wert, als 100/100 erreichen – daher werden wir diesen Test in Zukunft z.B. auf Pingdom erweitern – einfach um für Sie die Extrameile zu gehen.