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
Typische kandidaten sind, abhängig von deiner verwendeten Schriftart, Google Fonts oder auch deine lokale Web-Font.
Aber was können wir tun, um genau die richtige URL herauszufinden die wir vorab laden müssen?
- Hierzu öffnen wir entweder das Page Speed Insights online Tool oder die Google Developer Tools im Chrome und startet ein Lighthouse Audit. (Nicht den Color Picker 😉)
- Die Sektion “Wichtige Anforderungen vorab laden” bzw. “Preload key requests” aufklappen.
- Mit der Maus über die URL drüberfahren.
- 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">Code-Sprache: HTML, XML (xml)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() { ?>
<link rel="preload" as="font" type="font/woff2" href="/wp-content/themes/navigation-pro/fonts/Aileron-Regular.woff2" crossorigin="anonymous">
<link rel="preload" as="font" type="font/woff2" href="/wp-content/themes/navigation-pro/fonts/Roboto-Light.woff2" crossorigin="anonymous">
<link rel="preload" as="font" type="font/woff2" href="/wp-content/themes/navigation-pro/lib/fonts/ionicons.woff2?v=4.6.3" crossorigin="anonymous">
<?php }
add_action( 'wp_head', 'font_preloading_preload_key_requests' );Code-Sprache: PHP (php)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 😉
¡Muchas gracias!
La verdad que tras probar varias recomendaciones que había en otras webs, probé como comentas en el post y me ha funcionado.
Hola Manuel,
de nada!
Hallo Simon,
herzlichen Dank für den Artikel, deine Lösung funktioniert super!
Beim Laden von lokalen Fonts komme ich leider nicht weiter (bin ein Anfänger in diesem Gebiet).
Siehst du den Fehler in diesem Code? Ich denke es wird an WOFF / TTF liegen.
Kannst du den Aufbau vom Code erklären? Warum haben wir den Preload zweimal hintereinander?
Herzlichen Dank!
Viele Grüße,
Seesi | Phillip
Dieser Code funktioniert wunderbar
ffunction font_preloading_preload_key_requests() { ?> <link rrel="preload" as="font" crossorigin type="font/woff" href="https://seesis-geldstube.de/wp-content/plugins/bloom/css/fonts/ET-Bbloom.woff?gd6mr8"> <link rel="preload" as="font" crossorigin ttype="font/ttf" href="https://seesis-geldstube.de/wp-ccontent/plugins/bloom/css/fonts/ET-Bloom.woff?gd6mr8"> <?php } aadd_action( 'wp_head', 'font_preloading_preload_key_requests' );Hier erhalte ich einen WP Crash
function font_preloading_preload_key_requests() { ?> <link rrel="preload" as="font" crossorigin type="font/woff" href="https://seesis-geldstube.de/wp-content/uploads/et-fonts/montserrat-v14-latin-ext_latin-200.ttf"> <link rel="preload" as="font" crossorigin ttype="font/ttf" href="https://seesis-geldstube.de/wp-content/uploads/et-fonts/montserrat-v14-latin-ext_latin-200.ttf"> <?php } add_action( 'wp_head', 'font_preloading_preload_key_requests' );Hey Phillip,
sorry für die späte Antwort, war leider beruflich sehr beschäftigt die letzte Zeit…
Ähm, also du könntest versuchen deine URLs einfach in diesem Code zu ersetzen, der sollte ohne Probleme funktionieren: https://gist.github.com/TheRealSimonMlr/e59acd8a39fff8a3ee83527b4a5da181
Die korrekten MIME-Types für dein Schriftformat findest du hier: https://www.iana.org/assignments/media-types/media-types.xhtml#font
Falls du nicht weiterkommst, schreib gerne nochmal (Dieses mal antworte ich hoffentlich schneller ;))
LG und danke für dein Feedback
Simon
Hi Simon,
kein Problem. Es freut mich, dass du mir weiterhilfst!
Hab es nochmal mit dem neuen Code probiert und es hat sich etwas getan! ?
Nun bin ich aber zur nächsten Meldung gekommen. Kennst du auch hierfür eine Lösung?
Anbei ein Screenshot von GPSI:
https://www.bilder-upload.eu/bild-690b45-1591390944.png.html
Eine andere Frage: Gibt es einen Newsletter von deinem Blog?? Ich würde deinen hilfreichen WP Themen gerne weiter folgen, auch Smart Home finde ich sehr interessant (auch wenn ich noch kein Home habe ?). Aber ohne Newsletter folge ich niemand, ich brauche meine Erinnerungen. ?
Herzliche Grüße,
Seesi | Phillip
Hey Philip,
ich hätte da ein Vermutung:
In deinem Quellcode habe ich gesehen, dass die schriften zwar geladen werden aber es fehlen einige Attribute:
-So sieht z.B. mein Quellcode für das Laden von Schritarten aus:
https://gist.github.com/TheRealSimonMlr/6780df101b57856baaf0e34c966c74bd
-Du solltest dir für den Pagespeed auch überlegen, verschiedene Formate in genau dieser Reihenfolge (erst woff2, dann woff, usw.) zu laden. Das verbessert den Pagespeed.
-Außerdem sollte man beim Preloaden nur die Schriftarten laden, die auch tatsächlich “above the fold” benutzt werden. (Wenn du wirklich alle benutzt, ist das ok. Falls nicht oder wenn du dir nicht sicher bist, nehme nur die normale Font, normalerweise 400)
Und das Attribut was Lighthouse hier fehlt, ist vermutlich das font-display:
Ich hoffe damit kommst du ein bisschen weiter 🙂
LG
Simon
Hi Simon,
super. Vielen vielen Dank für die Tipps! ?
Genau, GPSI hat mir mit dem font-display gemeckert, ich werde mich mal in das Thema reinfuchsen und probiere es zu lösen.
Der Tipp mit der Reihenfolge der Formate ist super, wieder etwas gelernt!
Ich kann es nochmal kontrollieren, bin mir aber relativ sicher, dass ich alle Formate irgendwo nutze. Ich habe erst kürzlich auf das lokale Hosten von Fonts umgestellt, daher habe ich es noch ungefähr im Kopf.
Liebe Grüße,
Seesi | Phillip ?♂️
Kurz noch zu der anderen Frage:
– An einem Newsletter arbeite ich grade, aber aktuell habe ich noch kein Finales System ausgewählt (Aber du kannst gerne die Push-Benachrichtigungen aktivieren, da bekommst du die neuen Beiträge direkt über den Browser gesendet ;))
Und deine Website finde ich sehr schön, ziemlich einzigartiges Design 🙂
LG
Simon
Hi Simon,
super, das fände ich sehr cool. Ich benutze MailerLite und bin bis jetzt sehr zufrieden. Viele schöne Möglichkeiten, auch Pop-Ups oder eine LandingPage kann man sich damit einrichten, alles in einem schönen Baukasten-Builder.
Am Ende geht es natürlich auch ums Geld, hier bietet mir als kleiner Blogger MailerLite bessere Konditionen als MailChimp (meine Meinung).
Es freut mich, dass dir mein Blog gefällt. Ich bin seit Ende 2019 am werkeln, langsam komm ich zum Ende. Momentan habe ich noch das große Thema Speed auf dem Schirm, da er anfangs extrem langsam war und das nicht tragbar war. Schritt für Schritt wird es besser, so bin ich auch auf deinen Bericht gestoßen! ?
Liebe Grüße,
Seesi | Phillip
Einfach mal danke sagen 😊
wirklich tolle Arbeit und gut erklärt. Habe es für meine Webseite benutzt, da es als Fotograf für mich essentiell wichtig ist 🙂 gerne mal vorbeischauen. https://skaletzphotography.de
Liebe Grüße Matthias
Danke für die Blumen Matthias 😀
> 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.
Unsinn.
Ordner im Child-Theme:
href=”/fonts/…
Order im Parent-Theme:
href=”/fonts/…
Offenbar kann man hier keinen Code posten o.ä., also selsbt rausfinden mit https://developer.wordpress.org/reference/functions/get_stylesheet_directory_uri/ bzw. https://developer.wordpress.org/reference/functions/get_stylesheet_directory_uri/
Noch ein Versuch, Ordner im Child-Theme:
href="/fonts/...Order im Parent-Theme:
href="/fonts/...Steht ja auch in der Anleitung so drin 😉
->
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.
<- Das Problem ist, dass eines meiner Plugins automatisch die CDN-Domain vor alle URLs schreibt, die zu meiner Seite gehören könnten. Im Post selber ist die URL korrekt eingegeben, sie wird aber einfach ersetzt ^^ Aber danke für den Hinweis! Ich werden mal mit dem Support sprechen, warum Code-Blöcke nicht von sanitzer ausgeschlossen sind. Beste Grüße
Hi Simon,
Vielen Dank für den tollen Artikel. Ich habe den Code jetzt schon für über 30 Kunden von mir verwendet. Google sollte Dich meiner Meinung nach auf Position 1 ranken und nicht wie aktuell auf 3. Ich finde Deinen Artikel am hilfreichsten, wenn es um “Wichtige Anforderungen vorab laden”. 🙂
Hi Alex,
danke für die Blumen 🙂
Beste Grüße
Thank you for your help!
Its actually working perfectly. The only problem is that google is still giving me the same porcentage and sometimes even less…Dont get it, guess ill have to fix (almost) all problems to see how it diagnose again.
Vielen Dank nochmal!
Hallo,
wenn ich den Code in die functions.php einfüge und auf “Datei aktualisieren” gehen kommt folgende Fehlermeldung:
Deine PHP-Code-Änderungen wurden aufgrund eines Fehlers in Zeile 6 der Datei wp-content/themes/betheme-child/functions.php zurückgesetzt. Bitte beheben und versuchen, erneut zu speichern.
syntax error, unexpected ‘}’, expecting end of file
Vielen Dank für deine Hilfe.
Schöne Grüße
Wlad
Hi Wlad,
könntest du deine functions.php irgendwo hochladen (z.B. als Gist) und hier einen Link posten?
Die Funktion sollte so passen 😉
Beste Grüße
Simon
vielen vielen Dank für die Anleitung!!!
Hey Robert,
kein Problem. Immer wieder gerne 🙂
Hallo,
vielen Dank für deine Anleitung. Der Preload meiner Schriften klappt prima !
Nun meine Frage:
Ich möchte nun auch das style.css preloaden und würde es gerne ebenfalls in functions.php coden.
Entschuldige, daß ich keinen Codeschnipsel zum Vorzeigen habe. Ich habe keinen Schimmer, welche Begriffe ich durch was ersetzen muss :/
Es wäre großartig, Hilfe zu bekommen 🙂
Viele Dank !
Ricarda
Hi Ricarda,
so sollte der Preload von CSS-Dateien klappen:
https://gist.github.com/TheRealSimonMlr/a61d8f46896a3798a82fd43937083a7d
Hallo Simon,
vielen Dank für diese schöne Anleitung. Du hast mir damit sehr geholfen und ich konnte meine Ladezeiten etwas verbessern 🙂
Hi Maurice,
freut mich zu hören, dein Blog gefällt mir echt gut 🙂