Die Wahrheit über WordPress-Performance [#2/2]

Im ersten Artikel dieser Serie habe ich alle Punkte für eine perfekte On-Page Performance-Optimierung angesprochen. Daher wissen Sie jetzt, an welchen Stellschrauben Sie drehen müssen, um Ihre WordPress-Webseite so richtig schnell zu machen. Allerdings ist es in der Praxis nicht ganz so leicht, wie es sich in der Theorie anhört. Aus diesem Grund werden wir in diesem Beitrag alle Punkte zusammen abarbeiten, damit Sie die Gewissheit haben, das Gelernte auch mit Ihrer eigenen Webseite umsetzen zu können. Damit wir uns richtig verstehen: In diesem Beitrag wird es darum gehen, eine WordPress-Website richtig schnell zu machen und eine exorbitant hohe Google PageSpeed-Bewertung zu bekommen.

Feststellen des Ausgangszustands

Ich wähle für den Test eine frische WordPress-Installation mit importierten Theme Unit Test Daten, um einen gut gefüllten Blog zu simulieren. Das WordPress-Theme meiner Wahl ist das Baskerville von Anders Norén, weil es relativ viel CSS und JavaScript benötigt. Ebenfalls habe ich jedem Artikel ein Artikelbild zugewiesen. Damit habe ich einen länger existierenden und geflegten Blog simuliert. Von mir installiert wird auch das Jetpack-Plugin und ich aktiviere genau die Punkte, die auch auf meiner eigenen Webseite aktiviert sind (TechNick – hat 93 von 100 Google Page Speed Punkte). Das hat den Vorteil, dass wir eine Webseite optimieren werden, die einer normalen Installation gleichkommt, weil mehr CSS- und mehr JavaScript-Dateien im HTML-Quelltext zu finden sind. Die Optimierung soll ja nicht zu leicht sein.

Folgendes ist bei Jetpack aktiviert:

• Photon
• Publizieren
• Sharing
• Shortcodes einbetten
• Site Verification
• Subcriptions
• WP.me Kurz-URLs
• WordPress.com-Statistiken

1. Bevor es losgeht: Erstellen Sie ein Child-Theme

Bevor wir die Arbeiten starten, legen Sie bitte ein Child-Theme an und aktivieren es dann. Änderungen am Theme direkt zu machen macht nur Sinn, wenn Sie es selbst erstellt haben und somit keine Updates erfolgen. Bei allen anderen Themes ist es jedoch unabänderlich, nur mit Child-Themes zu arbeiten, weil ansonsten alle Änderungen nach einem Theme-Update verloren wären und nichts mehr läuft, wie es sollte. Im WordPress Codex ist eine tolle Anleitung zu finden, wie man ein Child-Theme erstellt. Wichtig hierbei ist, die CSS-Datei des Parent-Theme nicht über die CSS-Datei des Child-Themes per @import zu laden. Das ist nicht nur äußerst schlechter Stil und entspricht nicht den WordPress-Richtlinien, es verursacht auch einen HTTP-Request mehr – genau das aber wollen wir vermeiden.

Das CSS wird korrekt über die functions.php des Child-Themes geladen, so geht es:

1
2
3
4
5
6

<code>
function enqueue_parent_theme_style() {
      wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style');
</code>

Auch das CSS Stylesheet des Child-Themes muss korrekt geladen werden und auf keinen Fall direkt im Header verlinkt sein. Fügen Sie es so dem Header hinzu, der Code muss in die functions.php des Child-Themes eingebaut werden.

1
2
3
4
5
6
7
8

<code>/**
 * Proper way to enqueue styles and scripts
 */
function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
</code>

Im Child-Theme-Ordner enthalten sein muss eine CSS-Datei namens style.css und eine Datei namens functions.php. Ein Screenshot wäre auch klasse, dann lässt sich unser Child-Theme leichter auffinden. Laden Sie jetzt Ihr frisch ersteltes Child-Theme per (S)FTP auf den Server in den Ordner wp-content/themes. Wechseln Sie in die WordPress-Administrationsoberfläche und aktivieren Sie nun Ihr Child-Theme. Wenn Sie alles richtig gemacht haben, sollte Ihr HTML-Quellcode nun drei CSS-Dateien enthalten:

• parent-style-css
• style-css
• jetpack_css-css

2. Testen Sie die Geschwindigkeit und die Google PageSpeed-Punkte

Damit festgestellt werden kann, wieviel die Optimierungen bringen, muss der Ausgangszustand in Erfahrung gebracht werden. Testen Sie daher die nicht optimierte Webseite mit den Pingdom Tools und Google PageSpeed Insights. Bei Pingdom ist es wichtig, bei den “Settings” unter dem Feld für die URL noch schnell Amsterdam anzuklicken.

Ausgangszustand mit den Pingdom Tools:

Ausgangszustand mit Google PageSpeed Insights:

68 von 100 möglichen Punkten zu erreichen, ist ziemlich schlecht. Da haben wir nun also genügend Potenzial, dass Optimierungen wirklich ins Gewicht fallen.

1. “Tunen” der .htaccess Datei

Bevor wir mit anderen Arbeiten beginnen, beschäftigen wir uns kurz mit der .htaccess Datei von WordPress und ergänzen sie um einige Zeilen Code. Die .htaccess Datei finden Sie im WordPress-Hauptordner auf dem Server, dort, wo auch die Ordner wp-content, wp-admin usw angezeigt werden. Laden Sie die .htaccess auf den Desktop und fügen Sie unter “End WordPress” folgendes ein:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

################### Kompression aktivieren ######
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
 
################# Browser Caching aktivieren ######
ExpiresActive On
ExpiresDefault "access plus 1 month 1 days"
ExpiresByType text/html "access plus 1 month 1 days"
ExpiresByType image/gif "access plus 1 month 1 days"
ExpiresByType image/jpeg "access plus 1 month 1 days"
ExpiresByType image/png "access plus 1 month 1 days"
ExpiresByType text/css "access plus 1 month 1 days"
ExpiresByType text/javascript "access plus 1 month 1 week"
ExpiresByType application/x-javascript "access plus 1 month 1 days"
ExpiresByType text/xml "access plus 1 seconds"

Was diese beiden Einträge bereits ohne weitere Optimierungen bringen, zeigt der Test mit Google PageSpeed danach:

Ob bei Ihnen die Gzip-Kompression funktioniert, können Sie mit diesem Tool testen. Das Tool REDBot wiederum testet, ob der von Ihnen eingerichtete Browser-Cache funktioniert.

2. CSS und JavaScript optimieren

Bevor man sich an größere Operationdn im Bereich CSS wagt, sollte zuallererst an den normalen Stellschrauben wie der Zusammenfassung und Komprimierung gedreht werden. Für mich fängt es dabei an, dass ich prüfe, ob sich jQuery weiterhin (wie meist normal aus Kompatibilitätsgründen) im Header befinden muss. Ich füge daher der functions.php des Child-Themes ein wenig Code hinzu, der alle JavaScript-Dateien in den Seitenfuss verschwinden lässt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/**
*
* Verfrachtet alles JavaScript in den Footer
*
*/
add_action( 'wp_enqueue_scripts', 'evolution_print_jquery_in_footer' );
 
function evolution_print_jquery_in_footer() {
 
if ( ! is_admin() )
 
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
}

Download und Installation von Autoptimize

Autoptimize ist ein kleines, sehr wirkungsvolles Plugin für die Komprimierung, Zusammenfassung und Minimierung von CSS- und JavaScript-Dateien. Weiterhin besitzt es eingebaute Funktionen für das sogenannte “CSS above the fold”, was wir etwas später noch benötigen werden. Nach der Installation und Aktivierung wechseln Sie im WordPress-Dashboard zu “Einstellungen => Autoptimize” und klicken hier alle drei Punkte, also: HTML, CSS und JavaScript optimieren an. Ist das erledigt, sieht Ihr HTML-Quellcode bereits sehr komprimiert, aber auch aufgeräumt aus. Die Anzahl der eingebundenen Dateien haben sich extrem verringert. Ich finde im Quellcode des Baskerville-Child-Themes nur noch zwei CSS-Dateien (eine vom Theme und Google Fonts) und zwei JavaScript-Dateien vor (Theme und Jetpack).

Download Autoptimize von wordpress.org

Download und Installation von Cachify

Cachify ist ein hochwirksames Caching-Plugin für WordPress mit nur wenigen Einstellungsmöglichkeiten, das jedoch trotzdem hervorragende Arbeit leistet. Cachify generiert aus den dynamischen PHP-Seiten statische HTML-Seiten, die so schneller an den Browser ausgeliefert werden können, weil nicht bei jedem Aufruf einer Seite der PHP-Interpreter gestartet werden muss. Cachify ist eines der besten Caching-Plugins auf dem Markt, weil es einfach zu bedienen ist und gute Ergebnisse liefert.

Als Cache-Aufbewahrungsort stellt man am besten “Festplatte” ein, das ist die schnellere der beiden Varianten. Allerdings muss die .htaccess Datei hierzu noch angepasst und um einen Code-Block ergänzt werden. Sie finden den Code-Block und viele Tipps vom Entwickler Sergej Müller auf der Cachify Seite.

Download Cachify von wordpress.org

Zwischentest

Die Pingdom-Tools sind nett zu uns und geben bereits jetzt anständige Ergebnisse heraus. Google PageSpeed Insights wird nicht so optimistisch sein, wetten?

Google hat uns trotz der ganzen Mühe nur einen Punkt dazu gegeben, weil für das Test-Script noch drei Probleme existieren. Nur einer der angemerkten drei Punkte kann so ohne weiteres behoben werden. Warum? Sprechen wir die 3 Punkte mal kurz durch:

Punkt 1: JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten “above the fold” (ohne Scrollen sichtbar) beseitigen

Ganz klar lösbar. Hier geht es darum, aus dem CSS die Punkte rauszusuchen, die für die Darstellung des Bildschirminhalts ohne Scrollen nötig sind. Diese Teile des CSS werden dann komprimiert und inline in den Header eingefügt. Das dann noch übrige CSS wird wieder verlinkt – allerdings in den Footer, damit der Seitenaufbau nicht wieder gestört wird.

Punkt 2: Bilder optimieren. Wird bei dem verwendeten Theme ein kleines Problem, da muss der Code angefasst werden.

Stellen Sie zuerst fest, wie groß die Beitragsbilder auf der Startseite wirklich sein müssen. Wenn Ihr Browser Google Chrome ist, klicken Sie rechts auf das betreffende Bild und klicken dann auf “Element untersuchen”. Dann können Sie sehen, wie groß das Bild sein muss und wie groß es wirklich ist.

Wie Sie auf dem Screenshot erkennen können, ist das Bild 600 x 300 Pixel groß und wird vom HTML auf eine Größe von 359 x 180 Pixel skaliert. Wir brauchen also eine korrekte Bildgröße von 359 Pixel mal irgendwas.

Für die Darstellung der Startseite ist die Index.php zuständig. Wenn diese aus dem Parent-Theme-Ordner kopiert und mit einem Text-Editor geöffnet wird, stellen Sie schnell fest, dass von der index.php die content.php geladen wird. Kopieren Sie diese auch auf Ihren Desktop und  ändern folgende Zeile:

Diese Zeile ersetzen Sie zum Beispiel mit:

1

<?php the_post_thumbnail( 'front-thumb' ); ?>

Zusätzlich müssen Sie dann noch in der functions.php Ihres Child-Themes folgende Notierungen machen:

1
2
3
4
5
6
7
8
9
10
11
12

/**
* Bildgroessen
*
*/
if ( function_exists( 'add_theme_support' ) ) {
 
add_theme_support( 'post-thumbnails' );
add_image_size( 'post-image', 945, 9999 );
add_image_size( 'post-thumbnail', 600, 9999 );
 
add_image_size( 'front-thumb', 359, 9999 );
}

Die abgeänderte content.php wird nun mit der functions.php des Child-Themes ebenfalls in den Child-Theme-Ordner auf den Server hochgeladen, damit bei einem Theme -Update keine Änderung verloren geht. Nun müssen die auf der Startseite befindlichen Beitragsbilder nochmal neu vergeben werden, damit WordPress die Post-Thumbnails auch korrekt zuschneidet. Jetzt testen wir unsere Webseite nochmals mit Google PageSpeed Insights. Nicht vergessen: Vorher den Cache von Cachify löschen (Mülleimer-Symbol ganz rechts oben im Dashboard).

Das neue Google PageSpeed Insights Ergebnis

Punkt 3: JavaScript reduzieren.

Was soll man sagen? Diese Aufforderung ist Unsinn, da das JavaScript bereits hervorragend komprimiert ist. Sie dürfen sie deshalb getrost ignorieren, davon wird Ihre Website auch nicht schneller. Besonders nicht, wo das JavaScript erst am Ende geladen wird und zudem vom Plugin noch ein Defer-Attribut zugeordnet bekommen hat (auch wenn es keinen Sinn ergibt, weil es sich im Footer befindet).

Jetzt bleibt uns nur noch eine einzige Stellschraube, wenn wir mit den 93 Google PageSpeed Insights Punkten nicht zufrieden sind:

3. CSS-Ressourcen, die das Rendering blockieren – jetzt geht’s ans Eingemachte

Ich hoffe, Sie sind experimentierfreudig und haben eine Neigung zu Fummelarbeit, da jetzt viel rumprobiert werden muss, bis man die optimale Lösung gefunden hat. An diesem Punkt müssen nun alle CSS-Notierungen aus den Stylesheets heraus gesucht werden, die für die Darstellung des Bildschirminhalts sorgen, ohne das gescrollt werden muss. Laden Sie sich nun das Style.css aus dem Parent-Theme “Baskerville” auf den Desktop und öffnen diese Datei wieder mit einem reinen Texteditor. Vergessen Sie bitte auch nicht das Google Fonts Stylesheet, die meisten Themes verwenden heute Google Fonts, um eine angenehme Typographie zu gewährleisten.

Legen Sie zudem noch eine neue CSS Datei namens “test.css” oder ähnlich an. Sie wird nur für die herauskopierten CSS-Stücke aus der Google Font-Datei und der Baskerville Theme CSS-Datei benötigt.

Wichtig: Machen Sie vor jeder Arbeit an einer Original-Theme-Datei eine Kopie.

Probieren wir nun ein wenig rum und versuchen, nur das wirklich nötige CSS für die Darstellung ohne Srollen zu finden. Hierfür gibt es auch einen Generator, den man ausprobieren kann.

Ich habe mich für folgendes entschieden: Zuerst kopiere ich den Inhalt der Google Webfonts-Datei. Das ist wichtig, weil es sonst zu Rucklern in der Fontdarstellung kommen wird. Aus der style.css des Baskerville-Themes kopiere ich die CSS Punkte 0 bis 7 heraus. Das entspricht Zeilennummer 37 bis 1240. Dieses CSS (Google Webfonts und das style.css von 0 bis 7) wird nun mit einem CSS Kompressor auf stärkster Stufe komprimiert.

Das nun stark komprimierte CSS wird in das dafür vorgesehene Feld in Autoptimize eingefügt und abgespeichert. Wenn Sie in den Einstellungen von Autoptimize die “Erweiterten Einstellungen” aktivieren, bekommen Sie unter dem Punkt “CSS” noch den Unterpunkt “Inline und Defer CSS”. Klicken Sie ihn an und fügen dort das komprimierte CSS ein und speichern alles.

Das Google Webfonts-Stylesheet aus dem Header nehmen

Die Google Webfonts brauchen wir nun nicht mehr im Header, schliesslich haben wir Sie ja soeben mit dem restlichen, für die Darstellung ohne Scrollen nötigen CSS, komprimiert und inline in unseren Header eingefügt. Mit einigen Zeilen Code in der functions.php des Child-Themes bekommen wir das Google-Stylesheet wieder komplett entfernt:

1
2
3
4
5
6
7
8
9
10
11
12

/**
* Deregister und Dequeue Google Webfonts
* Diese Fonts befinden sich nun im Inline CSS
*
*/
function baskerville_remove_scripts() {
 
wp_deregister_style( 'baskerville_googleFonts' );
wp_dequeue_script( 'baskerville_googleFonts' );
 
}
add_action( 'wp_print_styles', 'baskerville_remove_scripts', 20 );

Nun ist der Moment gekommen, in dem der Elefant das Wasser lässt: der abschliessende Test mit Google PageSpeed Insights.

Das Endergebnis der Testseite

Wie sich herausgestellt hat, lande ich mit meinen Optimierungen nur einen einzigen Punkt unter dem Smashing Magazine, welches unglaubliche 100 von 100 möglichen Punkten aufweist. Da kann man schon mal stolz sein.

Gleichzeitig hat sich auch die Mobil-Ansicht dramatisch verbessert, obwohl wir nicht direkt darauf optimierten.

Fazit

Der einzige Punkt, an den wir noch drehen könnten, wäre eine bessere Komprimierung des JavaScripts, um letztendlich nur eine Ersparnis von 673 Byte (1 %) zu erreichen. Geschwindigkeitsrelevant ist dieser Wert absolut nicht mehr. Jetzt weiter zu machen, hieße nur das eigene Ego zu befriedigen. Bei Desktop und Mobil eine Punktanzahl von 99 von 100 möglichen zu erreichen, ist bereits exorbitant gut. So gut, dass eine solchermaßen optimierte Webseite die absolute Ausnahme darstellt. Wer das erreicht, darf sich zu den wirklichen Könnern zählen. Ich hoffe, dass mein Artikel Ihnen die Möglichkeit eröffnet hat, zu einem wirklichen Könner zu werden und eine Top-Speed-Webseite Ihr eigen nennen zu dürfen.

Links zum Beitrag

• Baskerville Theme – Download von WordPress.org
• Theme Unit Test – Inklusive Download Testdaten
• Google PageSpeed Insights – Speed und Optimierung
• Pingdom Tools – Speed Test
• GZIP Test Tool Testet, ob Kompression funktioniert
• REDBot Test Tool Testet, ob Browser-Caching funktioniert
• Download Autoptimize von WordPress.org
• Download Cachify von WordPress.org
• Die Cachify Seite von Sergej Müller
• Ein CSS-Compressor
• Critical Path CSS Generator

(dpe)