Preload Key Requests in WordPress (z.B. Font Preloading)

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.
Preload Key Requests URL auf WordPress Site mit Lighthouse herausfinden

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="https://mk0wpzeus84dn4ep9992.kinstacdn.com/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:

WordPress functions.php des Theme oeffnen

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="https://mk0wpzeus84dn4ep9992.kinstacdn.com/wp-content/themes/navigation-pro/fonts/Aileron-Regular.woff2" crossorigin="anonymous"> <link rel="preload" as="font" type="font/woff2" href="https://mk0wpzeus84dn4ep9992.kinstacdn.com/wp-content/themes/navigation-pro/fonts/Roboto-Light.woff2" crossorigin="anonymous"> <link rel="preload" as="font" type="font/woff2" href="https://mk0wpzeus84dn4ep9992.kinstacdn.com/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' );

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.

Auch interessant
Wordpress Bilder aus der DB entfernen, die nicht im Filesystem sind

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

WordPress preload key requests im Quellcode überprüfen

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

16 Gedanken zu „Preload Key Requests in WordPress (z.B. Font Preloading)“

  1. ¡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.

    Antworten
  2. 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' );
    

     
     

    Antworten
    • 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:
       
       
       

        font-display: auto|swap|block;
      

       
      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

  3. > 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/…

    Antworten
  4. 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“. 🙂

    Antworten

Schreibe einen Kommentar

×
Someone share Modify WordPress Image URL to add Query Parameters on Facebook
5 hours ago
Send this to a friend