Preloading Content

Hallo in die Runde,

vielleicht hat hier jemand eine Idee, wie ein kleines Problem zu lösen ist. Ich habe im Seitenlayout (zusätzliche Head-Tags) einer Website testweise Fonts per

HTML-Code:

---

<link rel="preload" href="/files/theme-ukulele-werkstatt/fonts/nunito-v16-latin-regular.woff2" as="font" type="font/woff2" crossorigin>

---

vorgeladen.

Also so wie auch Mozilla es macht: https://mdn.github.io/html-examples/...preload/fonts/

Meine Test (http://neu.ukulele-werkstatt.de/) ergibt in Firefox (nicht in Chrome) Warnungen:
"Die Ressource unter "http://neu.ukulele-werkstatt.de/files/theme-ukulele-werkstatt/fonts/fontawesome-webfont.woff" wurde vorab geladen ("link-preload"), aber nicht innerhalb der ersten Sekunden verwendet. Es wird eine Überprüfung empfohlen, ob alle preload-Attribute korrekt gesetzt sind."

Die Seite von Mozilla zeigen diese Warnungen nicht. Auch andere Website, die ich angeschaut habe, zeigen keine Warnungen. Allerdings bin ich nicht die einzige, die sich damit herumschlägt - nur Lösungsvorschlöge habe ich noch keine bekommen.

Ich habe auch ausprobiert, ob die Warnungen verschwinden, wenn die den Preload-Tag vor den Stylesheets im Header platzieren, aber das hat nichts bewirkt.

Würde mich freuen, wenn jemand darauf eine Antwort, eine Idee oder einen Hinweis hat. Mich wurmt die Warnung ein wenig ...

Herzlichen Gruß
Caro

Versuche mal crossorigin="anonymous", auch wenn es grundsätzlich egal sein sollte ob man crossorigin oder crossorigin="anonymous" schreibt.

Zitat:

---

Zitat von Spooky

Versuche mal crossorigin="anonymous", auch wenn es grundsätzlich egal sein sollte ob man crossorigin oder crossorigin="anonymous" schreibt.

---

Danke Spooky für deinen Hinweis. Das habe ich ausprobiert, aber es zeigt keine Wirkung.
Es ist ja eigentlich nur eine Warnung, aber da es bei anderen Websites auch ohne die geht - wurmt mich das.

Naja, das Problem ist, dass du Resourcen preloaden lässt, die dann gar nicht verwendet werden, so wie die Meldung schon sagt. Bspw. werden in Firefox nur die woff2 Dateien gebraucht, nicht die woff Dateien. Und der Schriftschnitt mit der Stärke 300 der Schriftart Nunito wird anscheinend auch nicht auf jeder Seite gebraucht.

Um das zu optimieren, müsstest du den User-Agent analysieren und damit dann entscheiden, welche Ressourcen tatsächlich preloadet werden. Mein Vorschlag wäre jedoch nur die woff2 Dateien zu preloaden - das befriedigt Lighthouse/PageSpeed und damit vermutlich auch den Kunden :D. Die woff Dateien sind eh nur für alte Browser relevant.

Dass nicht jede Schriftart bzw. nicht jeder Schriftschnitt auf jeder Seite gebraucht wird, ist wiederum ein anderes Thema und innerhalb eines CMS vermutlich auch kaum automatisch lösbar. Wenn du die Warning weghaben willst müsstest du daher wirklich nur die Schriftarten bzw. Schriftschnitte preloaden lassen, die wirklich auf jeder Seite vorkommen.

Du lädst danach nochmal fontawesome-webfont.woff?v=4.1.0 runter. Ich würde also mal prüfen, ob dein vorab geladener FontAwesome überhaupt genutzt wird und falls ja an welcher Stelle.

Zitat:

---

Zitat von Spooky

Naja, das Problem ist, dass du Resourcen preloaden lässt, die dann gar nicht verwendet werden, so wie die Meldung schon sagt. Bspw. werden in Firefox nur die woff2 Dateien gebraucht, nicht die woff Dateien. Und der Schriftschnitt mit der Stärke 300 der Schriftart Nunito wird anscheinend auch nicht auf jeder Seite gebraucht.

Um das zu optimieren, müsstest du den User-Agent analysieren und damit dann entscheiden, welche Ressourcen tatsächlich preloadet werden. Mein Vorschlag wäre jedoch nur die woff2 Dateien zu preloaden - das befriedigt Lighthouse/PageSpeed und damit vermutlich auch den Kunden :D. Die woff Dateien sind eh nur für alte Browser relevant.

Dass nicht jede Schriftart bzw. nicht jeder Schriftschnitt auf jeder Seite gebraucht wird, ist wiederum ein anderes Thema und innerhalb eines CMS vermutlich auch kaum automatisch lösbar. Wenn du die Warning weghaben willst müsstest du daher wirklich nur die Schriftarten bzw. Schriftschnitte preloaden lassen, die wirklich auf jeder Seite vorkommen.

---

Ach je, der Kundin ist das alles völlig wurscht. :-) Es ist nur ein Pro-Bono-Projekt, das ich selber benutze, um Dinge auszuprobieren. Die Woff-Dateien habe ich rausgeschmissen und ich habe auch Schnitte entfernt, die nicht benutzt werden. Ich denke mal in deine Richtung weiter - danke für die Tipps. Bei mir hakt es immer noch und trotzdem, aber ich habe bei einer anderen Website (https://www.redmind.de) gesehen, dass die dein beschriebenes Verhalten zeigt -> Startseite ohne Warnung, Impressum mit Warnung.

Zitat:

---

Zitat von Caro

Bei mir hakt es immer noch und trotzdem, aber ich habe bei einer anderen Website (https://www.redmind.de) gesehen, dass die dein beschriebenes Verhalten zeigt -> Startseite ohne Warnung, Impressum mit Warnung.

---

Ja, diese Website lässt nur woff2 laden - und auch nur Schriften bzw. Schriftschnitte, die verwendet werden.

Zitat:

---

Zitat von tab

Du lädst danach nochmal fontawesome-webfont.woff?v=4.1.0 runter. Ich würde also mal prüfen, ob dein vorab geladener FontAwesome überhaupt genutzt wird und falls ja an welcher Stelle.

---

Danke für den Hinweis. :-) Fontawesome wird eigentlich nur in der mobilen Navigation verwendet und ist hier eh nicht wichtig. Hab ich mittlerweile herausgeworfen.