Posted on 10 Kommentare

Das Theme beschleunigen – am Beispiel von Twenty Seventeen

Performance ist für eine Website heutzutage sehr wichtig und zumindest bis zu einem gewissen Grad und insbesondere mobil ausschlaggebend, ob ein Besucher oder eine Besucherin (mitgemeint) auf einer Website verweilt oder sie vorzeitig verlässt. Bevor das eigentliche Angebot also erkennbar ist, kann eine Conversion bereits verloren bzw. ein das Ziel der Website verfehlt worden sein.

Daher möchte ich am Beispiel des Themes Twenty Seventeen zeigen, wo man verhältnismäßig einfach und mit wenigen Code-Zeilen bereits Fortschritte machen kann – selbst bei einem solch schlichten und leichtgewichtigen Theme.

Ich arbeite in diesem Beispiel mit einem Child Theme von Twenty Seventeen, welches bis dato fast jungfräulich ist. Es genügt demnach vollkommen bei der Befolgung des folgenden Artikels, ein grundsätzlich funktionierendes Child Theme von Twenty Seventeen sein Eigen nennen zu dürfen.

jQuery Migrate entfernen

jQuery Migrate liefert Funktionen nach, die in jQuery selbst nicht mehr vorhanden sind, aber dennoch manchmal benötigt werden. Das ist zum einen gut für die Abwärtskompatibilität, andererseits sollte man bei einer neuen Seite nicht mehr derartige Funktionen benötigen.

Standardmäßig liefert WordPress zusammen mit jQuery auch jQuery Migrate aus, was eine geladene Datei mehr ist, die man im Normalfall gar nicht (mehr) benötigt. Also ist es das beste, sie zu entfernen. Man findet an vielen Stellen die Möglichkeit, jQuery Migrate zu entfernen, dafür wird aber auch jQuery erst entfernt und muss manuell wieder hinzugefügt werden. Mit folgender Funktion ist das nicht der Fall (Quelle: cedaro auf GitHub):

/*
* Remove the migrate script from the list of jQuery dependencies.
*
* @see https://github.com/cedaro/dequeue-jquery-migrate
*
* @param WP_Scripts $scripts WP_Scripts scripts object. Passed by reference.
*/
function twentyseventeen_child_dequeue_jquery_migrate( $scripts ) {
	if ( ! is_admin() && ! empty( $scripts->registered['jquery'] ) ) {
		$jquery_dependencies = $scripts->registered['jquery']->deps;
		$scripts->registered['jquery']->deps = array_diff( $jquery_dependencies, [ 'jquery-migrate' ] );
	}
}
add_action( 'wp_default_scripts', 'twentyseventeen_child_dequeue_jquery_migrate' );

Dieser Code muss in die functions.php eures Child Themes.

Hierbei wird, sofern wir uns nicht im Backend (is_admin()) befinden und jQuery selbst ein registriertes Skript ist, aus den Abhängigkeiten von jQuery einfach der Eintrag von jQuery Migrate entfernt.

Schriften lokal einbetten

Als ich meine Website mit dem Dienst von WebPagetest getestet habe, fiel mir schnell auf, dass die Google Font im Verhältnis sehr lange braucht, bis sie geladen ist und daher auch das Rendern der Seite bis zu diesem Zeitpunkt zurückgehalten wird:

WebPagetest Waterfall vorher

Natürlich sind individuelle Schriftarten etwas schönes und verleihen der Website einen ganz anderen Charakter. Daher empfehle ich, diese lokal einzubinden. Ich habe mich hier für Source Sans Pro bzw. Source Code Pro entschieden und werde daher am Beispiel dieser zeigen, wie man die Schrift ändert.

Zuerst muss man die in Twenty Seventeen genutzte Schriftart mit folgender Funktion entfernt werden, welche in die functions.php eingefügt wird:

/**
 * Remove the Google font CSS of Twenty Seventeen.
 */
function twentyseventeen_child_dequeue_google_font() {
	wp_dequeue_style( 'twentyseventeen-fonts' );
	wp_deregister_style( 'twentyseventeen-fonts' );
}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_dequeue_google_font', 100 );

Hier wird das CSS der Schrift komplett von der Website entfernt. Bei einem erneuten Aufruf der Webseite wird nun die Fallback-Schrift angezeigt.

Damit wird übrigens auch der automatische DNS-Prefetch (das automatische Vorladen von DNS-Informationen) für die Domain von Google Fonts entfernt.

Um die gewünschte Schrift zu nutzen, muss diese irgendwo hochgeladen werden. Entweder über (S)FTP oder direkt über die Medienverwaltung – bei letzterem müssen die entsprechenden Dateiformate allerdings erst noch erlaubt werden. Daher habe ich mich für die erste Variante entschieden und im Wurzelverzeichnis meines Twenty Seventeen Child Themes ein neues Verzeichnis namens font angelegt und dort folgende beiden Dateien gelegt:

  • SourceCodePro-Regular.otf
  • SourceSansPro-Regular.otf

Nun muss man dem Theme natürlich noch sagen, dass diese Dateien als Schrift genutzt werden sollen. Erstere hier für Code, letztere für den Fließtext. Dazu muss lediglich folgender Code in die style.css des Child Themes gepackt werden:

@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 400;
	src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(font/SourceSansPro-Regular.otf) format('opentype');
	unicode-range: U0100-024F, U1E -1EFF, U20A -20AB, U20AD-20CF, U2C 58C 7F, UA720-A7FF;
}
@font-face {
	font-family: 'Source Code Pro';
	font-style: normal;
	font-weight: 400;
	src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(font/SourceCodePro-Regular.otf) format('opentype');
	unicode-range: U0100-024F, U1E -1EFF, U20A -20AB, U20AD-20CF, U2C 58C 7F, UA720-A7FF;
}
body,
button,
input,
select,
textarea {
	font-family: "Source Sans Pro", "Lucida Sans", "Lucida Grande", Monaco, Geneva, sans-serif;
}
code {
	font-family: "Source Code Pro", "Courier New", Courier, mono;
}

Für andere Schriften muss mindestens der Teil mit @font-face natürlich noch angepasst werden.

JavaScript asynchron und verzögert laden

Viele JavaScript-Funktionen sind erst bei einer Interaktion mit der Webseite notwendig. Aus diesem Grund kann man viele JavaScript-Inhalte eigentlich erst ganz am Ende bzw. asynchron laden, wenn Zeit dafür ist und das eigentliche Design der Seite bereits vollständig geladen wurde.

Zugegeben ist es jedoch während der Entwicklung eines Themes, insbesondere auch eines, das von anderen praktisch unbegrenzt angepasst werden können soll, gar nicht einfach zu entscheiden, ob ein Skript nun direkt geladen werden soll oder nicht. Daher sind die nachfolgenden Empfehlungen auch als solche zu verstehen. Ich lade hier JavaScript-Code asynchron und verzögert, die ich nicht direkt benötige.

jQuery selbst wird zwingend benötigt und sollte auch nie asynchron geladen werden, denn sobald dadurch Inhalte ein- und ausgeblendet werden, erscheinen diese Inhalte erst dann oder verschwinden, wenn die Seite und danach das JavaScript geladen wurden.

Davon abgesehen werden aber noch weitere JavaScript-Dateien geladen:

  1. skip-link-focus-fix.js
    Stellt Funktionen für Screenreader & Co. bereit.
  2. navigation.js
    Stellt Funktionen für die Navigation bereit – wer hätte das nur gedacht?
  3. global.js
    Stellt globale Funktionen bereit. (Ja, ich weiß, Captain Obvious und so …)
  4. jquery.scrollTo.js
    Stellt Funktionen für ein weiches Scrollverhalten bereit.
  5. wp-embed.js
    Stellt Funktionen für eingebettete Inhalte bereit.

Hier empfinde ich es als in Ordnung, wenn man die Skripte 1, 4 und 5 asynchron lädt. Letztere kann man sogar komplett entfernen, wenn man weiß, dass man keine Inhalte einbetten möchte.

Das geht mit folgender Funktion, die auch in die functions.php muss:

/**
 * Add async and defer attribute to certain JavaScript files.
 *
 * @param string $tag The <script> tag for the enqueued script.
 * @param string $handle The script's registered handle.
 * @return string
 */
function twentyseventeen_child_add_async_attribute( $tag, $handle ) {
	$defer_script_handles = [
		'twentyseventeen-skip-link-focus-fix',
		'jquery-scrollto',
		'wp-embed',
	];
	if ( ! in_array( $handle, $defer_script_handles ) ) return $tag;
	return str_replace( ' src', ' async defer src', $tag );
}
add_filter( 'script_loader_tag', 'twentyseventeen_child_add_async_attribute', 10, 2 );

Hierbei werden mit $defer_script_handles die Namen der JavaScript-Handles angegeben, welche die Attribute async und defer erhalten sollen.

Testen

Mit den drei genannten Verbesserungen bekommt man schon einiges aus seiner Website heraus. Dies dürfte auch nicht nur für das Theme Twenty Seventeen gelten – bei vielen anderen ist das Potenzial vermutlich sogar ungleich höher. Dennoch sollte man natürlich auch das Testen nicht vergessen.

Für den besten Vergleich empfehle ich vor und nach der Umsetzung der hier genannten Tipps die Nutzung des Dienstes von WebPagetest. Damit lässt sich detailliert darstellen, wann genau was auf einer Webseite wie lange lädt. Getestet habe ich immer mit einer mobilen 3G-Verbindung mit dem Browser Chrome am Standort Frankfurt.

Von mir ist oben bereits ein Screenshot vor der Optimierung zu sehen, hier nun das Ergebnis nach der Optimierung:

WebPagetest Waterfall nachher

Das Rendern der Seite (roter Streifen) hat demnach vor 1,8 Sekunden begonnen (vorher: 2,5 Sekunden) und ist dementsprechend auch bereits viel früher fertig (grüner Streifen). Eine Ersparnis von 0,7 Sekunden entspricht hier 28 %. 💪🏻

10 thoughts on “Das Theme beschleunigen – am Beispiel von Twenty Seventeen

  1. Ich mag solche kurzen und sehr hilfreichen Beiträge sehr! Werde gleich mal schauen was ich davon auch bei meinem TwentyFifteen benutzen kann 😉
    Bin da auch gerade am optimieren und noch nicht wirklich zufrieden.

  2. Wow, 28% schneller 😳
    Sehr informativ, gefällt mir!

  3. Hilfreiche Zusammenfassung kleiner kleiner Helfer.
    Weil meine Seite schon länger ohne externe Schriften oder jQuery auskommt, kann ich dadurch zwar an meiner Performance nix mehr verbessern, aber dieser Post hat mich inspiriert, meine Seite noch *etwas* weiter zu optimieren. 🤓

  4. Schöner Artikel! Du kannst die Geschwindigkeit noch weiter erhöhen, indem du statt OTF-Fonts auf Woff und Woff2 setzt. Damit sind die Schriften nochmal deutlich kleiner!

    1. Danke, das habe ich direkt gemacht! 🙂

  5. […] bastele nun mal gerne. Deshalb kam mir der Tipp von Matthias Kittsteiner im WP Letter gerade recht. In dem Artikel geht es um die Performance der Webseite und wie man an […]

  6. Danke für diesen Beitrag. Klasse

  7. […] So beschleunigst du dein Theme in wenigen Schritten Matthias Kittsteiner erklärt am Beispiel eines Child-Themes von “Twenty Seventeen”, wie du schon mit kleinen Veränderungen im Code die Performance deines Themes verbessern kannst. […]

  8. […] auch nicht wie ich die Schrift des Themes ändere. Der Tipp zum Ändern fand ich dann im Artikel Das Theme beschleunigen – am Beispiel von Twenty Seventeen von Matthias Kittsteiner. Der Artikel beschreibt wie man die genutzte Google-Schrift durch eine […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.