Du hast grade mal wieder den PageSpeed Insights Score deiner Seite überprüft und fragst dich, wie man nochmal diese Meldung mit „Wichtige Anforderungen vorab laden“ oder auf Englisch „Preload Key Requests“ in WordPress weg kriegt? Dann bist du hier genau richtig!

Ich zeige dir, wie du über ein kleines Code Snippet in deiner functions.php jede wichtige WordPress Resource der Critical Request Chain vorab laden kannst, um deinen PageSpeed Score deutlich zu verbessern. Ganz ähnlich wie im Artikel zum DNS Prefetch.

Key Requests URL herausfinden

Was wir nun zuerst tun müssen, ist die URL herauszufinden die wir vorab laden müssen.

1. Hierzu öffnen wir entweder das Page Speed Insights online Tool oder die Google Developer Tools im Chrome und startet ein Lighthouse Audit.
2. Die Sektion „Wichtige Anforderungen vorab laden“ bzw. „Preload key requests“ aufklappen.
3. Mit der Maus über die URL drüberfahren.
4. Schon wird die vollständige URL der Ressource angezeigt.

Am besten kopieren oder merken/notieren wir uns alle URLs, die hier aufgelistet sind.

WordPress Preload Key Requests Funktion

Um das ganze nun in WordPress zu erledigen und das Page Loading etwas zu verbessern, müssen wir dafür sorgen, dass die Ressourcen im HTML Head unserer Website vorgeladen werden. Das sollte dann im HTML Quelltext des Headers beispielsweise so aussehen:

link rel="preload" as="font" crossorigin="" type="font/woff" href="/wp-content/themes/astra/assets/fonts/astra.woff">

functions.php öffnen

Aber in WordPress schreiben wir natürlich nichts direkt in den Quelltext, hier erledigen wir das mit einer PHP Funktion in der functions.php unseres Child-Themes:

Preload Funktion einfügen

Die Funktion, die du hier einfügen musst, sieht in meinem Beispiel wie folgt aus:

/** Head Font Preloading **/
function font_preloading_preload_key_requests() { ?>
	"preload" as="font" crossorigin type="font/woff" href="/wp-content/themes/astra/assets/fonts/astra.woff">
	"preload" as="font" crossorigin type="font/ttf" href="/wp-content/plugins/socialsnap-agency/assets/fonts/socialsnap.ttf?5k7r6t">
 }
add_action( 'wp_head', 'font_preloading_preload_key_requests' );

Bitte beachte, dass die URL bei href erst ab „wp-content“ angegeben wird. Deine Webseiten-Domain und das Protokoll (http/https) sollte nicht mit angegeben werden, da dass zu Sicherheitswarnungen und Problemen in neueren Browsern führen kann.

Bei type= musst du den MIME-Type des verlinkten Inhalts angeben. Für CSS Files ist das beispielsweise text/css und für Font Files, wie oben zu sehen, font/FONTTYPE. Hier gibt es eine Liste aller MIME Types.

Übrigens können alle Parameter außer link rel preload href theoretisch weggelassen werden. Ich bin mir nicht mehr ganz sicher, warum ich die anderen Parameter mit aufgenommen habe. Ich meine mich aber daran zu erinnern, dass es nur so in allen Browsern fehlerfrei funktioniert hat. (Ich verwende die Funktion mit genau diesen Parametern auf allen WordPress Seiten)

Überprüfen kannst du das ganze dann im Quellcode deiner Website

Ich hoffe, es hat bei dir geklappt und du konntest die Ladezeiten deiner Seite optimieren. Wenn nicht, schreib mir gerne ein Kommentar 😉