Keiner verweilt gerne auf Internetseiten, die langsam sind und sich der Content schleppend aufbaut. Die Absprungrate auf solchen Seiten sind hoch, wie man es sicherlich vom eigenen Verhalten beim Surfen kennt. Hinzu kommt noch, dass dein Google-Ranking darunter leiden kann. Nur wie die Geschwindigkeit messen?
Um herauszufinden an welcher Stelle deine WordPress Seite noch Verbesserungspotenzial hat (und ob Anpassungen und Optimierungen überhaupt etwas bringen), kannst du die Ladezeit deiner Seite testen.
Hierzu habe ich eine frische WordPress Installation erstellt und nur mein derzeitiges Theme aktiviert, plus die von mir genutzten Plugins.
Ich persönlich nutze am liebsten Pingdom Tools. Der Test zeigt dir nicht nur die Ladezeit deiner Seite an sondern gibt auch Informationen über die Größe deiner Seite, die Anzahl der HTTP Anfragen und stellt ein Wasserfall Diagramm zur Verfügung, in welcher Reihenfolge welche Daten geladen werden und wielange jede einzelne hierfür benötigt.
Bei manchen Detail-Analysen verwende ich gerne GT Metrix, da hier eben mehr Details angezeigt werden und die Optimierung vereinfacht. Zum Schluss werfe ich dann noch einen Blick auf Google PageSpeed Insights.
Wichtig: Bitte mach vor jeder nachfolgenden Änderung ein Backup und sichere auch deine WordPress Datenbank!
1. Wahl des Webhosters
Damit kommen wir auch direkt zum ersten entscheidenden Punkt die Geschwindigkeit deiner Seite zu optimieren: Die richtige Wahl des Webhosters.
Ihr kennt von dieser Seite evtl. bereits das Tool Pingdom, welches ich bereits beim Wechsel meines Webhosters genutzt habe, um die Performance Steigerung messen zu können. Diese war für mich echt überraschend und die Wahl des Webhosters hat einen enormen Einfluss auf die Geschwindigkeit deiner Seite.
2. Feldversuch: Meine WordPress Installation
Ich beschreibe hier die einzelnen, vorgenommenen Schritte meiner Vorgehensweise:
2.1 WordPress Installation
Ich habe mich dazu entschieden direkt die aktuelle Beta Version von WordPress 5.3 zu verwenden (5.3-beta2-46416) und habe die mitinstallierten Plugins direkt gelöscht.
2.2 aktuelles Theme installiert
Im nächsten Schritt habe ich mein aktuelles Theme installiert und die Geschwindigkeit zum neuen Standard-Theme Twenty Twenty verglichen.
Die Unterschiede hier sind vor allem die Page Size, die daraus resultiert, das in meinem Theme die Beitragsbilder im Blog klein dargestellt werden und nicht die Originalgröße anzeigt. Der wesentlichere Unterschied ist jedoch der Punkt: Make fewer HTTP requests (17 vs. 28). Im Standard Theme 92 “Punkte”, in meinem “nur” 84.
Bei beiden Themes gibt es jedoch zwei gravierende Hinweise zum Steigern der Performance:
- Compress components with gzip –> 3.1 GZIP Komprimierung aktivieren
- Add Expires headers –> 3.3 Browser-Caching aktivieren (Expires headers hinzufügen)
2.3 Meine Plugins installiert
In einem früheren Artikel habe ich meine “Abneigung” gegenüber zu vielen Plugins beschrieben und nach meinem Seiten-Relaunch die Anzahl der Plugins deutlich reduziert. Übrig geblieben sind derzeit folgende:
- Cache Enabler
- CoBlocks
- Cookie Notice
- Google Analytics for WordPress by MonsterInsights
- Solo Blocks Photo Gallery
- TablePress
- The SEO Framework
- ThirstyAffiliates
- tinyTOC
- WP SVG images
- WP User Avatars
Das sind schon wieder ganz schön viele… den oben erwähnten Artikel habe ich mit 8 Plugins beendet, nun sind es doch schon wieder 10. Da muss ich wohl noch einmal nachbessern, um die Geschwindigkeit der Seite noch einmal zu optimieren.
Aber zurück zum Feldversuch! Nach der Installation und Aktivierung aller obiger Plugins hat sich der Punkt Make fewer HTTP requests deutlich verschlechtert und die Anzahl deutlich erhöht: von 28 auf 53!
3. Anpassungen an function.php und .htaccess
3.1 GZIP Komprimierung aktivieren
Wer kennt keine ZIP oder RAR Datei z.B. beim Versenden von großen Dateien per E-Mail… GZIP ist das Komprimierungsverfahren für Webseiten. Es werden alle JavaScript-, HTML- und CSS-Dateien komprimiert. Vorteil: der Download der komprimierten Daten ist wesentlich schneller und der Browser kann die Seite wesentlich schneller anzeigen.
# GZIP Komprimierung
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
</IfModule>Ich habe mich für die “einzeilige” Variante entschieden. Man hat alternativ auch die Möglichkeit stattdessen die unterschiedlichen Typen einzeln anzugeben:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/vtt
AddOutputFilterByType DEFLATE text/x-component
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/js
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/atom+xml
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/ld+json
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-web-app-manifest+json
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon Bei meinem Theme immerhin eine Reduktion von 664,3 KB auf 492,5 KB. Durch GZIP werden keine Bilder komprimiert.
3.2 Bilder komprimieren
Ich verzichte für die Optimierung der Bilder und Screenshots auf ein Plugin und nehme die entsprechenden Optimierungen vorab vor. Zum einen durch die Bildgröße und den Export mit “verminderter” Qualität als JPEG. Die finale Optimierung nehme ich dann mithilfe eine Programms am Mac vor.
Als Plugin kann ich aus der Vergangenheit Smush von WPMU DEV empfehlen. In der kostenlosen Version mit vollem Funktionsumfang und mit nur ein paar Einschränkungen, die aber aus meiner Sicht nicht wesentlich sind und einen in der normalen Verwendung nicht stören (u.a. Bildgröße max. 5 MB, Bulk-Verarbeitung auf 50 Bilder beschränkt, Autokonvertierung von PNG in JPEG und man kann in der Pro Version lossy (verlustbehaftet) optimieren).
3.3 Browser-Caching aktivieren (Expires headers hinzufügen)
Ohne die Aktivierung des Browser-Caching wird deine Internetseite nicht aus einem Cache gelesen, sondern muss bei jedem Aufruf von deinem Server neu geladen werden. Das erhöht die Ladezeit enorm. Mit der Aktivierung definierst du für verschiedene Dateitypen die Dauer, die diese im Browser-Cache verbleiben.
Hierzu wird wie bei der GZIP-Komprimierung die .htaccess Datei angepasst und um folgenden Code ergänzt:
# Browser Caching
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType font/woff "access plus 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 14 days"
Dies ist der Code, den ich benutze. Es kann durchaus sein, das hier Einträge “fehlen”, die dann individuell ergänzt werden müssen. An dieser Stelle ist GT Metrix eine große Hilfe, da hier die Dateien aufgelistet werden, wofür es keinen entsprechenden Eintrag gibt.
4. Caching-Plugin installieren
WordPress ist ein dynamisches Content Management System, d.h. es generiert bei jedem Aufruf die jeweilige Seite neu und es erfolgen jedesmal Datenbankabfragen. Da sich auf einem Blog die Inhalte nicht in kurzen Zeitabständen ändern ist eine dynamische Generierung nicht notwendig.
Ein Caching-Plugin generiert aus den dynamischen Inhalten statische Seiten und speichert diese in einem Cache auf deinem Server. Dadurch reduzieren sich die Datenbankabfragen.
Ich nutze als Caching-Plugin Cache Enabler. Es muss lediglich installiert werden und arbeitet nach der Aktivierung still im Hintergrund und es bedarf keiner komplizierten Einrichtung.
5. Emoji deaktivieren
Ich mag sie eh nicht sonderlich: Emojis. Und für mich haben sie auf einer Webseite nichts zu suchen. Durch die Deaktivierung sparst du zusätzlich noch eine HTTP Abfrage.
Die Deaktivierung erfolgt diesmal über die function.php deines Themes. Hier ergänzt du folgenden Code:
// Emoji deaktivieren
function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
}
add_action( 'init', 'disable_emojis' );
/**
* Filter function used to remove the tinymce emoji plugin.
*
* @param array $plugins
* @return array Difference betwen the two arrays
*/
function disable_emojis_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( 'wpemoji' ) );
} else {
return array();
}
}
/**
* Remove emoji CDN hostname from DNS prefetching hints.
*
* @param array $urls URLs to print for resource hints.
* @param string $relation_type The relation type the URLs are printed for.
* @return array Difference betwen the two arrays.
*/
function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
if ( 'dns-prefetch' == $relation_type ) {
/** This filter is documented in wp-includes/formatting.php */
$emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' );
$urls = array_diff( $urls, array( $emoji_svg_url ) );
}
return $urls;
}
Aktueller Zwischenstand:
Oha… ein neues “Problem”: Use cookie-free domains.
6. Use cookie-free domains
Viele Inhalte einer Internetseite wie Bilder, JavaScript oder CSS sind eher statische Inhalte, d.h. sie verändern sich während einer User-Session nicht. Wenn diese Daten vom Server übertragen werden, ist es also nicht notwendig ein Cookie mitzusenden. Das Cookie gilt für die jeweilige Hauptdomain meine-domain.de und für alle “nachfolgenden” Dateien, also auch für meine-domain.de/mein-bild.jpg.
Um genau diesen Datein kein Cookie mitzugeben, kannst du deine statischen Inhalte auf eine Subdomain auslagern. Hierzu legst du eine entsprechende neue Sub-Domain an: static.meine-domain.de und verweist diese Sub-Domain auf das Verzeichnis /wp-content.
Nehme danach folgende Änderung der wp-config.php vor, in dem du folgenden Code hinzufügst:
define("WP_CONTENT_URL", "http://static.meine-domain.de");
define("COOKIE_DOMAIN", "meine-domain.de");Im letzten Schritt änderst du für die statischen Inhalte die URL in der SQL Datenbank. Entweder direkt per SQL Befehl
UPDATE wp_posts SET post_content = REPLACE(post_content,'meine-domain.de/wp-content/','static.meine-domain.de/')oder aber mithilfe eines Plugins, z.B. Better Search Replace.
7. JavaScript- und CSS-Dateien zusammenfassen
Ich habe nach dem derzeitigen Zwischenstand immer noch 44 HTTP requests, welche vor allem durch “zuviele” einzelne JavaScript- und CSS-Dateien verursacht werden. Jedes Plugin und Theme bringt hiervon eine gewisse Anzahl mit sich.
Der Ansatzpunkt ist hier, so viele JavaScript- und CSS-Dateien zusammenzufassen, um die Anzahl an HTTP-Requests zu reduzieren und zu komprimieren, um die Größe zu reduzieren.
Diesen Schritt kann man manuell vornehmen. Hierzu muss man allerdings tief in WordPress Core, Themes und Plugins einsteigen und birgt auch ein gewisses Risiko, das danach irgendetwas nicht mehr so funktioniert wie es soll. Hier kommt also tatsächlich ein neues Plugin zum Einsatz: Autoptimize
Hier einfach die jeweiligen Optionen für JavaScript, CSS und (HTML) aktivieren, letzteres habe ich nicht aktiviert.
Nach Aktivierung solltest du auf jeden Fall einmal deine Seite checken, ob alles noch reibungslos funktioniert, sowohl Mobile- als auch Desktop-Version. Falls etwas nicht funktionieren sollte, musst du auf Fehlersuche gehen, evtl. einzelne Dateien von der Optimierung ausschließen und dann erneut testen.
8. Bilder per Lazy-Load laden
Benutzt du auf deiner Seite und in deinen Beiträgen viele Bilder und Screenshots kann es sinnvoll sein Lazy Load zu aktivieren. Das oben genannte Plugin Autoptimize bietet eine solche Option an. Es gibt aber auch alternative Plugins.
Lazy Load lädt die Bilder erst, wenn der Besucher zu der entsprechenden Stelle scrollt.
Finale
Neben den oben genannten Punkte und Optimierungen sollten folgende Punkte ebenfalls “normal” sein:
- auf PHP 7.x umstellen (erhöht die Geschwindigkeit ggü. einer älteren PHP Version enorm)
- HTTP/2 (Wenn dein Webhoster dies bereits unterstützen solle, meiner derzeit leider noch nicht. Der Unterschied zu HTTP/1.x: es werden Requests parallel durchgeführt, so dass dann hoffentlich das obige Plugin Autoptimize überflüssig wird)
- man kann es nicht oft genug sagen: nutze nur Plugins die du wirklich einsetzt und benötigst
- nutze ein schlankes WordPress Theme
Nach den obigen Anpassungen und Optimierungen erzielt meine Seite folgende Ergebnisse:
Noch nicht optimal, aber aus meiner Sicht schon ein sehr gutes Ergebnis. Ich werde im Laufe der Zeit noch ein wenig Fein-Tuning betreiben und werde ggf. darüber hier berichten.
