Ressourcenpriorisierung – praktische Anwendungstipps für WordPress

Mittels der Priorisierung von Ressourcen und Verbindungsaufbauten kann man aus vielen Websites noch ein paar entscheidende Milisekunden herauskitzeln. Die Erläuterung und prinzipielle Syntax der Einzelnen Konzepte habe ich bereits im OMT-Magazin vorgenommen – weiterführende Informationen zur Funktionsweise können an dieser Stelle nachgelesen werden. Hier wollen wir diese Konzepte in praktischer Anwendung innerhalb von WordPress beleuchten. Neben Template-Modifizierungen werden am Ende des Artikels sinnvolle Plugins zum Thema vorgestellt.

Prefetching und Prerendering

Prefetching dient dem Laden von Ressourcen, sobald der Browser mit dem Laden der sichtbaren Inhalte abgeschlossen hat. Prerendering geht noch einen Schritt weiter und lädt nicht nur die Ressourcen, sondern rendert die anvisierte Seite komplett in einem versteckten Tab komplett, so dass diese ohne Verzögerung aufgerufen werden kann, falls der Prozess vor dem Klick des entsprechenden Links beendet wurde. Da Prerendering derzeit lediglich von Chrome unterstützt wird, sollte man sich nicht exklusiv auf dieses verlassen – praktischerweise ist es möglich, beide Kommandos in einem Befehl zu kombinieren. Die Syntax der beiden Methoden kombiniert lautet:

Es ist gängige Praxis, verwandte oder benachbarte Arikel am Ende eines Posts zu verlinken. Wenn im Theme diese Links in der Post-Einzelansicht (single.php) gesetzt sind, kann man diese mithilfe der Folgenden Funktion in der in der functions.php via Prefetching (fast alle Browser)/Prerendering (Chrome) vorab laden lassen:

——————–

Snippet für die functions.php zum Setzen eines Prefetch/Prerender Befehls des nächsten und des vorhergehenden WordPress-Posts:

function prerender_prefetch() {

$next_post = get_next_post();

$prev_post = get_previous_post();

if ( !empty( $next_post ) ) {

echo ‚<link rel=“prefetch prerender“ href=“‚.get_permalink( $next_post->ID ).'“ />‘;

}

if ( !empty( $prev_post ) ) {

echo ‚<link rel=“prefetch prerender“ href=“‚.get_permalink( $prev_post->ID ).'“ />‘;

}

add_action( ‚wp_head‘, ‚prerender_prefetch‘, 10 );

——————–

Aus dem OMT-Artikel: dynamisches generieren von Prefetching und Prerendering bei Mouseover via JQuery Snippet:

Im Eingangs erwähnten Artikel stellte ich das Folgende jquery-Skript vor, welches ich im Zuge meiner Recherchen geschrieben und zum Test auf unseren Seiten eingebunden habe – dieses sollte jedoch nicht unverändert eingebunden werden, da das allgemeine Anvisieren auf ‚a‘ = Link-Elemente auch das Dashboard betreffen würde und dann auch „Neuer Artikel“ und ähnliches via Vorladen unerwünschte „Geister-Posts“ verursachen würde. Bitte verwende dieses also nur, wenn Du weißt, was Du tust und dafür sorgst dass lediglich Content-Elemente anvisiert werden!

Funktion für die scripts.js (ohne Aufruf im Ready/loaded State):

function prefetch_mouseover() {
var links = document.querySelectorAll(‚a‘);
[].forEach.call(links, function(link) {
link.addEventListener(„mouseenter“, function () {
$(„link[rel*=’prerender‘]“).remove();
var newPreLoadLink = document.createElement(‚link‘);
newPreLoadLink.rel = „prerender prefetch“;
newPreLoadLink.href = link.href;
document.head.appendChild(newPreLoadLink);
});
});
}

Das Skript ist so gebaut, dass bei mehreren Mouseovers-Events immer nur der letzte aktiv bleibt und vorherige wieder aus dem <head> gelöscht werden.

DNS- Prefetching und Preconnect

Diese beiden Befehle dienen dem Aufbauen einer Verbindung zu externen Ressourcen wie beispielsweise Google Fonts oder CDN-Aufrufen und sind sich in der Funktionsweise relativ ähnlich und können parallel verwendet werden.

Syntax:

<!– Prefetch:–>
<link rel=“dns-prefetch“ href=“//fonts.googleapis.com/“>

<!– Preconnect: –>
<link rel=“preconnect“ href=“https://fonts.gstatic.com“ crossorigin>

——————–

Snippet für die functions.php zum Verbindungsaufbau vorab definierter Ressourcen:

function dns_prefetch_preconnect()

{

// Ausgewählte Domains im Array eintragen

$reachx_prefetchDomains = [

‚//fonts.gstatic.com‘,

‚//code.jquery.com‘,

];

foreach ($prefetchDomains as $domain) {

$domain = esc_url($domain);

echo ‚<link rel=“dns-prefetch“ href=“‚ . $domain . ‚“ crossorigin />‘;

echo ‚<link rel=“preconnect“ href=“‚ . $domain . ‚“ crossorigin />‘;

}

add_action(‚wp_head‘, dns_prefetch_preconnect‘, 10);

——————–

Diese Funktion wird die im Array „reachx_prefetchDomains“ gelisteten Domains im <head>-Bereich mit DNS-Prefetch sowie Preconnect-Funktionen platzieren. Am sinnvollsten ist es, mithilfe der Netzwerkanalyse im Browser zu prüfen, welche externen Domains eine Website aufruft und diese in der Liste einzufügen. Dies prüft Ihr im Browser in den Optionen mittels:

Google Chrome: DevTools => Network
Firefox: Webentwickler => Netzwerkanalyse

http/2 Server Push

Diese Technik halte ich persönlich für die Interessanteste von allen genannten und sie wäre allein bereits einen Artikel wert. Mittels http/2 Server push kann man den Server anweisen, in der ersten Antwort nicht nur das angefragte HTML-Dokument sondern gleich weitere Ressourcen parallel an den Browser zu schicken. Schreibt doch einen kurzen Kommentar, ob ich das Thema in Zukunft nochmal intensiver behandeln soll.

Wenn man nun die benötigten Ressourcen einer Website (*.css, *.js, *.jpg) mit der ersten Server Response direkt mit übergeben möchte, ist die kurze Einführung im OMT-Magazin einen Blick wert. Kurz zur Syntax – falls http/2 Server Push auf Deinem Server aktiviert ist, kannst Du folgendes in der header.php oben einfügen (stelle sicher, dass die Pfade stimmen):

<?php

header(„Link: </css/styles.css>; rel=preload; as=style“, false);

header(„Link: </assets/logo.jpg>; rel=preload; as=image“, false);

Es gibt hier bereits eine sehr gute Plugin-Lösung, welche auf die definierten Theme-Ressourcen zugreift. Ein dynamiches Skript würde an dieser Stelle ansonsten leider den Rahmen sprengen, doch ich kann das im nächsten Abschnitt genannte Tool sehr empfehlen.

Optimieren ohne Code – welche Plugins helfen:

Abschließend möchte ich noch ein paar Plugins nennen, welche bei der Optimierung eine große Erleichterung sein können, wenn man nicht direkt im Code arbeiten möchte:

Prefetching, Prerendering, Preloading,… – Pre* Party Resource Hints
Dieses Plugin bietet eine bequeme Benutzeroberfläche und deckt die Anweisungen Prefetch, Prerender, Preload, Preconnect und DNS Prefetch als All-in-One-Lösung alle ab. In den Optionen wird einfach die URL der zu optimierenden Ressource sowie die Methode festgelegt.
Weiterhin bietet das Plugin eine Automatisierung an, welche darauf abzielt, extern geladene Ressourcen automatisch zu identifizieren und zu optimieren.

Quelle: https://wordpress.org/plugins/pre-party-browser-hints/ ]
HTTP/2 server push
Dieses Plugin liest automatisch alle Skripte (JQuery) und Styles (CSS) aus, welche ein Theme via dem entsprechenden – dieser ist Standard und somit sehr häufig verwendet – „enqueue“ – Befehl einbindet. Für all diese Ressourcen wird daraufhin automatisch ein „<Link:…>“ Kommando zur Nutzung der http/2 Server Push Technik generiert.
Skripte, welche auf andere Art und Weise eingebunden werden, kann das Plugin leider nicht erkennen, beeinträchtigt deren Funktionsweise jedoch nicht weiter.
WP Rocket – kostenpflichtig, doch der Name ist Programm
Dieses Tool bietet viel, viel mehr als die Ressourcenoptimierung, die ich in diesem Artikel behandle. Caching, Code Minimierung & Komprimierung, uvm. Es soll hier jedoch genannt werden, da die aus WP Rocket generierten Dateien ebenfalls für die Nutzung von http/2 Server push ausgelegt sind und weiterhin in den Optionen eine Möglichkeit geboten wird, Domains für das DNS-Prefetching festzulegen.

Ich hoffe, dass die Snippets und Plugins der einen oder anderen Seite zu besseren Ladezeiten verhelfen kann – zum Messen würde ich https://gtmetrix.com/ , https://tools.pingdom.com/ sowie https://www.webpagetest.org/ empfehlen! Ich freue mich auf Eure Erfahrungsberichte in den Kommentaren.

Daniel Voelskow

Webentwickler bei der ReachX GmbH und immer auf der Suche nach Optimierungsmöglichkeiten. Verantwortlich für die technische Konzeption und Programmierung der www.reachx.de sowie www.omt.de