„Wichtige Anforderungen vorab laden“ in WordPress

In regelmäßigen Abständen checke ich meine Website auch mal bei Google PageSpeed Insights und versuche das eine andere Problem zusätzlich zu lösen.

Da ich dort als Eintrag mit der höchsten Priorität den Eintrag „Wichtige Anforderungen vorab laden“ sehe, habe ich nach einer Lösung dafür gesucht.

Diese möchte ich dir in diesem Beitrag vorstellen.

1. Deine Website bei Google PageSpeed Insight analysieren lassen

Auch wenn ich davon ausgehe, dass du das bereits gemacht hast, brauchen wir die Auflistung der wichtigen Anforderungen. Denn diese werden bei dir höchstwahrscheinlich anders aussehen als bei mir.

➜ Zu Google PageSpeed Insights

Nach meiner Analyse bekomme ich folgenden Eintrag zu diesem Thema:

2. Einen Hook für den wp_head erstellen

Hier hast du jetzt verschiedene Möglichkeiten. Da ich das GeneratePress Theme mit Premium Erweiterung nutze, kann ich das über Design > Elements > Hooks sehr einfach umsetzen (Anzeigeregel: Komplette Website).

Alternativ ist es aber u.a. auch über ein Plugin wie Code Snippets oder die function.php deines Child Themes möglich.

Wichtig ist, dass die im nächsten Schritt erstellen Preload-Links im wp_head und auf der gesamten Website ausgeführt werden.

3. Die Preload Links einfügen

Als nächstes fügst du die Preload Links in deinem Hook ein. Dazu brauchen wir jetzt die „wichtigen Anforderungen“ aus deinem Google PageSpeed Insights Bericht.

Bei mir sind es die vier Ressourcen aus dem Screenshot weiter oben.

Diese habe ich zuerst wie folgt nach dem folgenden Muster bei GeneratePress eingebunden:

<link rel="preload" href="https://deine-website.de/link-zu-der-datei-zum-vorab-laden/font.woff2"
as="font" type="font/woff2">

In der functions.php des Child Themes könnte es so aussehen:

/* Preload Fonts */ 
function font_preload() { ?> 
<link rel="preload" as="font" type="font/woff2" 
href="https://deine-website.de/link-zu-der-datei-zum-vorab-laden/font.woff2"> <?php }
add_action('wp_head', 'font_preload');

Die vollständigen Links zu den Ressourcen kannst du einfach im Google Bericht unter Rechtsklick > Adresse des Links kopieren richtig erfassen.

Nach dem Speichern und erneuten Prüfen gab es noch eine weitere Fehlermeldung bei PageSpeed Insights:

Das hatte also leider noch nicht komplett richtig geklappt. Dann schauen wir uns mal dieses ‚crossorigin‘-Attribut an.

4. Das ‚crossorigin‘-Attribut richtig verwenden

Hierzu habe ich etwas recherchiert und bin letztendlich auf einen Artikel von MDN Web Docs (EN) gelandet. Dort kannst du dich auch weiter zum ‚crossorigin‘-Attribut sowie dem dahinter stehenden Konzept Cross-Origin Resource Sharing informieren.

Für unseren Fall ist folgender Abschnitt wichtig:

As mentioned above, one interesting case where this applies is font files. Because of various reasons, these have to be fetched using anonymous-mode CORS (see Font fetching requirements).

– MDN Web Docs

Im darunter folgenden Beispiel wird zusätzlich noch das „crossorigin“-Attribut wie folgt hinzugefügt (das Wort ganz am Ende):

<link rel="preload" as="font" type="font/woff2" 
href="https://deine-website.de/link-zu-der-datei-zum-vorab-laden/font.woff2" crossorigin>

Das habe ich bei allen vier Einträgen auf meiner Website erledigt:

In Code Snippets oder der functions.php könnte der fertige Hook wie folgt aussehen:

/* Preload Fonts */ 
function font_preload() { ?> 
<link rel="preload" as="font" type="font/woff2" 
href="https://deine-website.de/link-zu-der-datei-zum-vorab-laden/font.woff2" 
crossorigin> <?php } 
add_action('wp_head', 'font_preload');

5. Nochmal bei PageSpeed Insights testen

Bei mir wird der Eintrag zu „Wichtige Anforderungen vorab laden“ jetzt bei den bestandenen Prüfungen angezeigt.

Ich darf mich also jetzt über eine weitere grüne Ampel freuen. Zeit für einen Kaffee als Belohnung!

Fazit

Nach etwas Recherche ließ sich auch dieser Optimierungsvorschlag seitens Google am Ende ganz gut lösen. Damit ich die Lösung nicht wieder vergesse, habe ich sie hier für mich und dem einen oder anderen dokumentiert.

Vielleicht hilft der Beitrag ja auch dir bei diesem Problem.