Müssen Sie Schriftarten im Voraus laden? und sie in CSS als Schriftart deklarieren?

Meine Frage ergibt sich aus dem Versuch, die Schlüsselassets für das Vorladen von Lighthouse-Tests zu optimieren.

Ich habe die vom Leuchtturmbericht im Chrome-Browser gekennzeichneten Schriftarten in einen Link in meiner Head-Datei eingefügt.

[header.php]

<link rel=”preload” href=”/wp-content/themes/mytheme/assets/font/Roboto/Roboto-Regular.ttf” as=”font” crossorigin=”anonymous”>

Muss ich es trotzdem in meine style.css-Datei aufnehmen und die Schriftart deklarieren?

[style.css]

@font-face {
  font-family: "Roboto";
  src: url("/wp-content/themes/mytheme/assets/font/Roboto/Roboto-Regular.ttf") format("truetype"); }

Ich frage, weil der Lighthouse-Bericht trotz Hinzufügen des Preload-Links in meiner Kopfzeile immer noch zeigt, dass meine Datei nicht vorab geladen wird.

Vielen Dank für Ihre Hilfe.

Beide Deklarationen haben nicht dasselbe Ziel.

Mit dem preload-Wert des rel-Attributs des Elements können Sie Abrufanforderungen im HTML-Code deklarieren und Ressourcen angeben, die Ihre Seite sehr bald benötigen wird und die Sie früh im Seitenlebenszyklus laden möchten, bevor die Haupt-Rendering-Maschinerie des Browsers einsetzt.

• Quelle @ https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

Wenn Sie Preload selbst hinzufügen, wird Ihre Schriftart nicht berücksichtigt. Sie müssen auch die Aktion angeben.

<link rel="preload" href="style.css" as="style"> <!--preload-->
<link rel="stylesheet" href="style.css"> <!--action-->

Hier laden wir unsere CSS- und JavaScript-Dateien vor, damit sie verfügbar sind, sobald sie später für die Darstellung der Seite benötigt werden.

Wie Graham im Kommentar sagte, kann das Vorladen nur dann effizient sein, wenn es vor allen schriftartbezogenen Aktionen wie angegeben wird <link> -Tag (Laden von Schriftarten über HTML) oder die CSS-Datei selbst.

Darüber hinaus ist Ihre Anfrage abhängig von style.css. Das Laden Ihrer Schriftart in HTML kann die Leistung erheblich verbessern. Entweder durch Inlining in a <style> Tag oder durch Laden durch die <link> Schild.

Mit den jüngsten Verbesserungen bei der Wartung von Schriftarten mithilfe von CDNs wird das Laden einer Schriftart aus einer lokal gespeicherten Version ineffizient. Als Fallback sollte die lokale Version verwendet werden. Ich würde Ihnen empfehlen schau dir mal googlefonts an.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

Als Randnotiz .ttf sollte nicht verwendet werden, es ist nicht optimiert. @ https://stackoverflow.com/a/11002874/3645650 erwägen Sie die Verwendung .woff Und .woff2 stattdessen.

(Führen Sie Lighthouse mit Ihrem Browser im Inkognito-Modus aus, um tatsächlich zuverlässige Informationen zu erhalten).

TL;DR: Ja

Der vorladen stellt es zur Verfügung, aber der Browser scheint es nicht zu verwenden.

Ich habe es auf meiner Website versucht: bis ich die @font-face -Deklaration, die auf dieselbe Datei verweist (ich behalte Merriweather.woff2 auf meinem Server), wurde der Text nicht mit der Schriftart gerendert, obwohl ich es getan hatte * { font-family: Merriweather } in meinem CSS.