Vor knapp 1 Woche gab es die neue WordPress-Version 6.8 (WordPress 6.8 „Cecil“ wurde veröffentlicht) und damit sind nicht nur viele Gutenberg-Updates gekommen, sondern es gab auch eine neu eingeführte Funktion namens Speculative Loading oder auf Deutsch Spekulatives Laden.

Beim spekulativen Laden werden Inhalte, die mit hoher Wahrscheinlichkeit als Nächstes aufgerufen werden, im Hintergrund vorgeladen. Dies geschieht noch, bevor der Nutzer eine Aktion wie das Anklicken eines Links ausführt. Grundlage dafür ist die Speculation Rules API, die derzeit von Browsern wie Chrome, Edge und Opera unterstützt wird.

Auch wenn es nach KI klingt, ist es keine 🙂

Eigentlich ist das eine sehr spannende Idee – es soll die Wartezeiten verkürzen, wenn man auf einer Webseite unterwegs ist. Somit steigert es die sogenannten «Core Web Vitals» und ist gut für «SEO» und es sorgt für ein besseres User Experience (Nutzererlebnis).

Aber eben, alles hat auch Nachteile, und so kann man bei schwachem Hosting die Webseite damit abschiessen. Die Datenbandbreite steigt ebenfalls und kann somit auch teurer werden (ja, es gibt noch Hoster, die pro GB abrechnen). Ebenfalls kann es die Statistik verfälschen, da auch Webseiten nun geladen und erfasst werden, die gar nie besucht worden sind. Und es kann je nach CMS, Theme und Plugin zu Ärger kommen.

Und genau dieser letzte Punkt ist nun mehrfach aufgetreten. Ich habe von Projekten gehört, die komplett «abgeschossen» worden sind.

Wer sieht Speculative Loading?

Also: Webseitenbesucher, die nicht eingeloggt sind, merken diese neue Funktion – sowie nur diejenigen, die einen chromiumbasierten Browser wie Chrome, Edge oder Opera etc. verwenden. Und man muss «Pretty Permalinks» verwenden, also «meinedomain.ch/wer-bin-ich» anstatt «meinedomain.ch?id=123».

Einstellung

Weil es ja manchmal nötig ist, dass man die Schärfe dieser neuen Funktion noch selbst einstellen muss, zeige ich euch hier, wie es geht.

So sieht die Funktion aus, die ihr einfach einbauen und anpassen könnt:

function cb_spekulatives_laden_regel( $config ) {
    $config['eagerness'] = 'moderate';
    return $config;
}
add_filter( 'wp_speculation_rules_configuration', 'cb_spekulatives_laden_regel' );

Bei dieser Zeile könnt ihr die Schärfe noch einstellen. Es gibt 3 Einstellungen: (conservative, moerate, eager)

$config['eagerness'] = 'moderate';

≪conservative≫ damit ist die Funktion eigentlich deaktiviert und es ist immer noch so wie vorher. Webseiten werden erst geladen, wenn man sie anklickt.

≪moderate≫ damit wird die Webseite mit einer 200 ms Verzögerung geladen, und das merken nur wenige.

≪eager≫ ja, da werden viele Webseiten sofort geladen – ist also die höchste Einstellung.

Die 2 Arten von spekulativem Laden

Es gibt 2 Arten für speculative Loading und zwar ≪prefetch≫ und ≪prerender≫

prefetch

Mit Prefetch lädt man nur ie Ressourcen wie HTML, JS etc aber führt sie nicht aus.

prerender

Mit Prerender wird alles im Hintergrund geladen HTML, JS, CSS, Bilder etc. Das Javascript wird ausgeführt und baut den DOM auf. Die Webseiten werden also im Hintergrund komplett geladen.

Einstellung

Um den Mode einzustellen da verwendet man diese Funktion und einfach prefetch mit prerender Einstellen oder umgekehrt.

function cb_spekulatives_laden_mode( $config ) {
    $config['mode'] = 'prerender';
    return $config;
}
add_filter( 'wp_speculation_rules_configuration', 'cb_spekulatives_laden_mode' );

Ausnahmen einbauen

Jetzt gibt es vielleicht Ort wo man diese neue Funktion gar nicht haben möchte und so kann man auch gezielt Seiten davon ausschliessen. Für Online Shop ist das sicher noch eine Idee.

function cb_spekulatives_laden_ausnahme( $excluded_paths ) {
    $excluded_paths[] = '/checkout/';
    $excluded_paths[] = '/my-account/';
    return $excluded_paths;
}
add_filter( 'wp_speculation_rules_href_exclude_paths', 'cb_spekulatives_laden_ausnahme' );

Einzelne Links ausschliessen

Wie ihr ja jetzt gelernt habt, läuft alles im Hintergrund ab und kann zu Ärger führen. Statistiken können verfälscht werden oder die Bandbreite von dieser Funktion gefressen werden. Aus diesem Grund kann man auch einzelne Links von dieser Funktion ausschliessen. Das sollte man vielleicht tun, wenn man Downloads bereitstellt oder wichtige CTA-Aufrufe hat (wo Statistik wichtig ist). Also überall da, wo man bereits sehen kann, dass so eine Funktion für Ärger sorgen kann.

Man muss einfach diese CSS-Klasse beim Link einführen: ≪no-prerender≫, und schon wird dieser Link ausgeschlossen.

<a href="/download/" class="no-prerender">Dieser Downloadlink wird nicht erfasst.</a>

Spekulatives Laden komplett deaktivieren

Natürlich kann man das Spekulative Laden auch komplett abschalten und dafür muss man diesen Code in die Function.php Datei einbauen

add_filter( ‚wp_enable_speculative_loading‘, ‚__return_false‘ );

function cb_spekulatives_laden_deaktivieren() {
    remove_action( 'wp_head', 'wp_enable_speculative_loading' );
}
add_action( 'init', 'cb_spekulatives_laden_deaktivieren' );

Fazit

Ihr seht diese Funktion ist sicher sehr praktisch aber es kann auch sehr grossen Ärger versusrachen. Aus diesem Grund ist es wichtig genau zu entscheien wo man das wie einstellen möchte.