Schriftarten vorladen

Der Autor des Artikels, dessen Übersetzung wir heute veröffentlichen, möchte darüber sprechen, warum er die Schriftarten vorlädt, auch wenn er es nicht sollte.

Als er die Site erstellte, auf der das Original dieses Materials veröffentlicht wurde, wollte er keine seiner eigenen Schriftarten verwenden. Dies würde die Leistung der Website zwangsläufig beeinträchtigen, wenn auch nicht sehr stark. Der Autor des Artikels sagt, er habe sich bemüht, eine schnelle Website zu erstellen. Am Ende wurde jedoch beschlossen, eine spezielle Schriftart für Seitentitel zu verwenden und gleichzeitig zu versuchen, diese Lösung so wenig wie möglich auf die Leistung des Projekts auszuwirken.

Erste Schritte

Zunächst habe ich beschlossen, die Schriftartdatei so klein wie möglich zu halten. Also habe ich eine Teilmenge dieser Schriftart erstellt. Mit anderen Worten, ich habe aus der Schriftart nur die Zeichen ausgewählt, die für die Wörter im Titel erforderlich sind.

Als Ergebnis erhielt ich eine sehr kompakte Datei, deren Größe weniger als 2 KB betrug. Außerdem habe ich es an derselben Stelle platziert wie alle anderen Materialien auf der Site, wodurch ich Abhängigkeiten von Drittanbietern und die Zeit, die für die Verbindung mit einer anderen Domain aufgewendet wurde, loswerden konnte.

Und schließlich wurde der Link zur Schriftartdatei in den in die Seite eingebetteten CSS-Code oben im HTML-Code und nicht in die externe CSS-Datei eingefügt.

Dies bedeutet, dass der Browser die Schriftartdatei erkennen und herunterladen kann, ohne ein externes Stylesheet herunterladen zu müssen. Dies ist übrigens ein häufiger Grund dafür, dass Schriftarten später als nötig geladen werden.

Überraschung

Da für die Anzeige von Text spezielle Schriftarten erforderlich sind, muss der Browser diese als Ressourcen mit hoher Priorität behandeln.

Infolgedessen habe ich erwartet, dass die Schriftartdatei sehr schnell geladen wird. Die Seiten meiner Ressource waren auf jeden Fall ziemlich "hell", daher dachte ich, dass nichts das Laden der Schriftartdatei verhindern sollte.

Als ich die Seite analysierte, war ich leicht schockiert.

Als ich die Site mit den Chrome-Entwicklertools betrachtete und in Webpagetest untersuchte, stellte ich fest, dass die Schriftart mit hoher Priorität nach den Bildern geladen wurde - Ressourcen mit niedriger Priorität.


Die Bilder werden vor dem Herunterladen der Schriftart heruntergeladen

Es schien mir völliger Unsinn.

Ich wusste mit Sicherheit, dass der Browser vor dem Herunterladen der Schriftart warten kann, bis er feststellt, dass die Schriftart zum Anzeigen der Seite benötigt wird. Das Element, in dem meine Schriftart verwendet wurde, befand sich jedoch ganz oben auf der Seite im <header> , viel höher als die Tags mit Bildern, die vor dem Herunterladen der Schriftart geladen wurden. Das entsprechende Element befand sich nicht nur im Seitencode, sondern auch im DOM-Baum.

Vorladen von Schriftarten als Lösung für das Problem

Das preload Attribut teilt dem Browser mit, dass die entsprechende Ressource, die zum Anzeigen der aktuellen Seite erforderlich ist, vorgeladen werden muss.

Die Verwendung dieses Attributs ist eine gute Möglichkeit, wichtige Ressourcen frühzeitig herunterzuladen, die sonst später vom Browser erkannt würden.

Schriftdateien sind ein gutes Beispiel für die Verwendung dieses Mechanismus. Wenn der Link zur Schriftartdatei in einem externen Stylesheet erstellt wird, erkennt der Browser die Schriftart erst, wenn er dieses Stylesheet lädt.

Die Verwendung des preload Attributs preload Anwenden auf Schriftdateien teilt dem Browser mit, dass beim Anzeigen der Seite die entsprechenden Schriftarten benötigt werden.
Darüber hinaus ist dieser Mechanismus mit dem <link> -Element sehr einfach zu implementieren.

 <link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin> 

Alternativ können Sie die Preload-Direktive zum Antwortheader hinzufügen (obwohl, sofern nicht anders angegeben, einige Server oder CDNs dieses Design möglicherweise als vom Server initiierte Anforderung zum Übertragen von Ressourcen an den Client interpretieren).

Ich hatte nicht erwartet, dass ich auf dieser Site Mechanismen zum Vorladen von Ressourcen verwenden müsste. Mein CSS-Code ist sehr bescheiden. Ich habe ihn in den HTML-Code der Seite eingebettet, damit die Seiten beim ersten Besuch der Website von den Browsern schneller angezeigt werden. Da meine Schriftart nicht vom Laden einer externen CSS-Datei abhängig war, hätte der Browser sie auf jeden Fall sehr früh und ohne „Hinweise“ zum Vorladen erkennen müssen.

Ich fand jedoch heraus, dass das Vorladen der Schriftart zur Wiederherstellung der Gerechtigkeit führte, da die Schriftartdatei jetzt geladen wurde, bevor die Bilddateien heruntergeladen wurden.

Hier ist das Wasserfalldiagramm von Webpagetest - Ich habe die Stellen hervorgehoben, an denen die Arbeit mit der Schriftartdatei gezeigt wird. Oben in der Abbildung wird das Vorspannen nicht verwendet. Unten - gebraucht.


Vorladen und Arbeiten mit der Schriftartdatei.

Vielleicht wäre es sinnvoller, das Storyboard des Seitenladevorgangs zu betrachten (hier wurde aus Gründen der Klarheit eine Nachahmung einer sehr langsamen Verbindung verwendet).


Im oberen Storyboard wird das Vorladen nicht verwendet. Unten - gebraucht

Nebenbei stelle ich fest, dass ich das Handle für die font-display: fallback . Das heißt, der Titel wurde ursprünglich mit der Sicherungsschriftart angezeigt, falls meine Schriftart langsam geladen wurde. Für diesen Test habe ich diese Funktion jedoch deaktiviert, da es sonst sehr schwierig wäre, zwischen den Schritten beim Laden der Seite zu unterscheiden.

Warum hat es funktioniert?

Um eine Webseite anzuzeigen, muss der Browser den DOM-Baum und den CSSOM-Baum erstellen, die später zum Erstellen des Rendering-Baums verwendet werden.

Es preload dass die Verwendung des <link> -Elements mit dem preload Attribut zum Herunterladen der Schriftart es dem Browser ermöglicht, CSSOM zu erstellen, bevor das DOM abgeschlossen ist.

Sie können dies in den folgenden Bildern sehen, die eine Untersuchung des Seitenladevorgangs mit den Chrome-Entwicklertools zeigen.

So sieht die Arbeit mit Seitenmaterialien ohne Vorladen aus. Zuerst wird das DOM erstellt und das Bild geladen, dann wird CSSOM erstellt und die Schriftart geladen.


Arbeiten Sie mit der Seite ohne Vorladen

Und hier ist das gleiche, aber mit der Verwendung von Vorspannung. Hier beginnt der Browser mit der Erstellung von CSSOM, dem Herunterladen der Schriftart, dem DOM und dem Herunterladen der Bilder.


Arbeiten mit der Seite mit Preload

Gibt es Alternativen zum Vorladen?

Angenommen, ich könnte das preload Attribut nicht verwenden, um die Priorität der Schriftartdatei zu erhöhen. Was könnte ich dann tun? Wie können Sie die Priorität von Bildern senken?

Aus Neugier versuchte ich, die obige Idee umzusetzen und fügte den Elementen, die die Bilder beschreiben, das Attribut loading="lazy" hinzu. In Chrome 76 (dem einzigen Browser, der dies zum Zeitpunkt des Schreibens unterstützte) müsste dies die Priorität von Bildern außerhalb des ursprünglich sichtbaren Bereichs der Seite verringern.

Das Testen dieser Idee mit Entwicklertools hat gezeigt, dass dies dazu führt, dass Schriftarten früher heruntergeladen werden. Vielleicht ist dies eine Erinnerung wert, da die Browserunterstützung für verzögerte Lademechanismen mit der Zeit zunimmt.

Unterschiedliche Browser verhalten sich unterschiedlich

Ich habe das Projekt in verschiedenen Browsern und auf mehreren Geräten getestet. Beim Testen habe ich festgestellt, dass iOS Safari (iPhone 8) dasselbe Verhalten wie Chrome aufweist. Schriftarten werden nämlich standardmäßig nach Bildern geladen, aber mit dem preload Attribut können preload die Situation beheben.

Das Problem des späten Ladens von Schriftarten trat auch in Firefox auf, aber das preload Attribut wird von diesem Browser standardmäßig noch nicht unterstützt. Die Verwendung des preload Attributs beim Anzeigen einer Site in Firefox hat also nichts geändert.

In Edge werden Schriftarten auch später als gewünscht geladen. Es gab das Gefühl, dass die Verwendung von Webload Pagetest unter Verwendung des preload Attributs nur teilweise funktionierte. Es schien mir nämlich, dass es wie ein doppelter Schriftdownload aussah. Sobald es früher geladen wurde, das zweite Mal später.

Im vorigen Absatz habe ich darüber gesprochen, dass ich "eine Sensation hatte" und dass ich "schien". Tatsache ist, dass beim Versuch, dieses Verhalten mit meiner eigenen Version von Edge zu testen, die "doppelten" Downloads verschwunden sind. Jetzt hatte ich das Gefühl, dass die Verwendung des preload Attributs preload Laden von Schriftarten nicht beschleunigt. Möglicherweise war dieser Unterschied im Verhalten der Seite das Ergebnis der Behebung eines Fehlers in Edge. In diesem Fall wurde der Fehler jedoch auf Kosten der Änderung des Mechanismus zum Vorladen von Ressourcen korrigiert.

Zusammenfassung

Hier haben wir darüber gesprochen, warum das Vorladen von Schriftarten nicht schadet, selbst wenn die Links zu ihren Dateien im auf der Seite eingebetteten CSS-Code erstellt werden.

Browser verhalten sich nicht immer so, wie wir es wollen oder wie wir es erwarten. Wir haben jedoch Tools, die das Verhalten von Browsern beeinflussen und sie in die von uns benötigte Richtung neigen.

Früher dachte ich, dass das Vorladen von Schriftarten auf meiner Website völlig sinnlos ist. Aus all dem, worüber ich gesprochen habe, habe ich eine wichtige Lektion für mich gelernt. Es besteht darin, dass Sie niemals etwas annehmen sollten.

Am Ende kann ich sagen, dass das Vorladen von Schriftarten eine großartige Möglichkeit ist, die Ausgabe von Text auf Webseiten zu beschleunigen.

Liebe Leser! Verwenden Sie in Ihren Webprojekten Mechanismen zum Vorladen von Schriftarten?