In den letzten Wochen habe ich durch Zufall bei der Arbeit und in Projekten von Drittanbietern viel über Web-Schriftarten und insbesondere über Google-Schriftarten gelernt. Dank dessen kann ich eine detailliertere Antwort auf eine Frage geben, die mir in der Vergangenheit einfach erschien: Sollten Sie Google Fonts auf Ihrem Server speichern?Objektiv gesehen gebe ich zu, dass Schriftarten nicht meine Stärke sind. Ich bevorzuge einen praktischeren Ansatz und konzentriere mich nicht auf das Design (schauen Sie sich diese Site an und stellen Sie sicher, dass dies der Fall ist). Vorher hatte ich nicht das Bedürfnis, nicht standardmäßige Schriftarten zu verwenden. Natürlich sehen sie etwas schöner aus und „brandmarken“ den Text. Aber für den Haupttext macht es wenig Sinn. Ich habe den Artikel nie bewertet (oder in Bezug auf seinen Inhalt anders bezogen), nur weil eine schöne Schriftart verwendet wurde, um ihn einzureichen. Ich war mir jedoch der negativen Auswirkungen zusätzlicher Schriftarten auf die Leistung und die Geschwindigkeit beim Laden von Seiten voll bewusst. Vielleicht bin ich deshalb voreingenommen.Viele mögen mir jedoch nicht zustimmen, und die Schriftarten, ob sie für mich persönlich wichtig sind oder nicht, werden regelmäßig von vielen anderen Entwicklern verwendet und haben oft einfach keine Wahl. Lassen Sie uns sehen, was getan werden kann, um die Geschwindigkeit der Website nicht zu verlieren, und die Designer glücklich machen.Selbst gehostete oder externe Ressourcen
Vor einigen Jahren galt es als normal, CDN zu verwenden, um gemeinsam genutzte Ressourcen zu verbinden (z. B. jQuery mit code.jquery.com - und ja, sie verwenden es immer noch sehr häufig ). Zur Verdeutlichung meine ich hier mit CDN das Laden von Ressourcen aus der Domain eines anderen, nicht aus Ihrem eigenen CDN.Der Grund war, dass Browser angeblich die Anzahl der Verbindungen zu jeder Domain (normalerweise auf 6 Verbindungen) begrenzt haben. Wenn Sie also eine andere Domain verwenden, erhalten Sie weitere 6 Verbindungen. Dies könnte in der Vergangenheit (insbesondere wenn die Einschränkung <6 Domänen war) und bevor HTTPS zur Norm wurde, zutreffen , was die Verbindungskosten erheblich erhöht . Darüber hinaus HTTP / 2Tatsächlich profitiert die Verwendung einer Verbindung (meistens!), sodass die Verwendung anderer Domänen häufig eher einen Leistungsverlust als eine Akquisition darstellt.Eine andere Möglichkeit, dies zu erreichen, bestand darin, die Hauptdomäne mit einer oder mehreren technischen Unterdomänen (z. B. Assets.example.com) zu verknüpfen. In diesem Fall werden Schriftarten nicht in Ihrer Hauptdomäne angezeigt, von der aus Ihre Webseite geladen wird. Trotzdem hat diese Methode die gleichen Verbindungsprobleme, so dass dies nicht als Leistungsgewinn bezeichnet werden kann, selbst wenn dies einmal der Fall war.Ein weiterer Vorteil eines öffentlichen CDN war die hohe Wahrscheinlichkeit, dass Besucher diese Version von bedingtem jQuery bereits im Cache hatten. Aber auch hier bin ich überzeugt, dass dies zu viel ist. Es gibt so viele Bibliotheken und ihre Versionen, undDer Browser-Cache ist kleiner als es scheint, daher ist eine solche Übereinstimmung sehr unwahrscheinlich. Darüber hinaus verwendet Safari aus Datenschutzgründen für jede besuchte Domain einen eindeutigen HTTP-Cache (Doppelschlüssel-Cache). Chrome wird diese Funktion in Kürze ebenfalls einführen . Es gibt also nichts mehr zu streiten.Dieses Thema wird reibungslos zu einem Gespräch über die Auswirkungen von CDNs von Drittanbietern auf den Datenschutz. Sie haben keine Ahnung, wie und warum sie Ihre Benutzer verfolgen, was mit einer selbst gehosteten Lösung nicht möglich ist. Und die jüngsten Gesetzesinnovationen verpflichten viele Websites, alle auf der Website verwendeten Cookies explizit aufzulisten. Nicht die einfachste Aufgabe bei der Verwendung von CDNs von Drittanbietern.Ich war lange davon überzeugt, dass CDNs von Drittanbietern oder sogar das Sharding Ihrer eigenen Domains weit vom versprochenen Leistungsgewinn entfernt sind. Zu oft finden Sie Websites, auf denen die Hauptdomäne nur index.html verteilt, und dann wird viel Zeit damit verschwendet, neue Verbindungen einzurichten .Dies ist nicht zu erwähnen, welche Auswirkungen das Herunterladen von Ressourcen von Websites von Drittanbietern auf die Sicherheit hat. Ja, es gibt SRI , aber es kann zu unerwarteten Problemen führen , und ich verstehe den Punkt ehrlich gesagt nicht. Wenn es sich um eine statische Ressource handelt (in der Sie SRI verwenden können), speichern Sie sie lokal. Wenn sie nicht statisch ist (da sich der Inhalt möglicherweise ändert), können Sie SRI nicht verwenden.Durch die Verwendung von Ressourcen aus Quellen von Drittanbietern besteht außerdem die Gefahr, dass diese zu einem Single Point of Failure (SPOF) werden und Ihre Site deaktivieren. Dies ist mehr als einmal vorgekommen , und obwohl es unwahrscheinlich erscheint, dass Google Fonts fallen, wird es möglicherweise von Unternehmensvertretern oder ganzen Ländern blockiert .Im Allgemeinen raten immer mehr Menschen , ihre statischen Ressourcen zu Hause zu lassen , idealerweise in der Domain, von der aus Sie Webseiten verteilen. Schriftarten sind statische Ressourcen, daher gilt das Gleiche für sie, oder? Nun, es stellt sich heraus, dass nicht alles so einfach ist, da Schriftarten ihre eigenen Besonderheiten und Optimierungstechniken haben, die die lokale Speicherung etwas komplizierter machen können ...Google Fonts und wie sie funktionieren
Google Fonts ist eine großartige Ressource, wenn Sie Schriftarten mögen. 977 kostenlose Schriftarten, die jeder kostenlos nutzen kann. Kommerzielle Schriftarten sind oft lächerlich teuer und werden in der Regel eher lizenziert als verkauft. Das heißt, Gebühren werden basierend auf der erwarteten Anzahl von Seitenaufrufen erhoben. Daher ist es sehr nützlich, so viele kostenlose und einfach zu verwendende Schriftarten in einer Sammlung zu haben.Das ist aber noch nicht alles. Google Fonts bietet, wie viele Ressourcenanbieter für Websites (siehe das obige jQuery-Beispiel), CDNs und speichert Schriftarten, die jeder direkt von seinen Servern aus verwenden kann. Dies bedeutet, dass Sie mit der Verwendung von Schriftarten beginnen können, indem Sie einfach eine Codezeile auf Ihrer Site hinzufügen, um das Stylesheet zu laden:<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Sie können auch weitere Eigenschaften und Schriftarten in einer Zeile hinzufügen, um mehrere Schriftarten und Variationen von jeder von ihnen zu laden:<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900%7CPoppins:300,400,700,900&display=swap" rel="stylesheet">
Der Nachteil ist ein Leistungsabfall (der Vorteil liegt auch in der Leistung, aber das ist nicht so offensichtlich, wir werden darauf zurückkommen). Das Problem ist, dass Ihre Site (z. B. www.example.com ) ein Stylesheet von fonts.googleapis.com lädt, das einige CSS mit Font-Facé-Regeln zurückgibt. Hier ist die Quelle für den Link im obigen Beispiel:
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Wir werden später darüber sprechen, was einige dieser Einstellungen bedeuten (und warum es zwei Regeln für Schriftarten gibt), aber im Moment bedeutet dies, dass Sie diese Schriftart in Ihren Stilen wie folgt verwenden können:body {
font-family: 'Lato', sans-serif;
}
Jetzt müssen Sie jedoch eine Verbindung zu fonts.googleapis.com herstellen, CSS herunterladen und dann eine Verbindung zu fonts.gstatic.com herstellen und die Schriftarten selbst herunterladen (warum Google nicht sowohl CSS als auch Schriftarten auf derselben Domain hosten kann - ich verstehe das wirklich nicht!).Schriftarten werden vom Browser beim Laden der Seite häufig mit einer Verzögerung erkannt (schließlich müssen Sie CSS laden, um Links zu ihnen zu finden). Google Fonts werden jedoch noch später entdeckt, da CSS von einer anderen Domain heruntergeladen werden muss und dann Schriften von der dritten Domain und, wie bereits erwähnt, das Herstellen einer HTTPS-Verbindung nicht sofort erfolgt. Dies ist im folgenden Kaskadendiagramm zu sehen, das von WebPageTest generiert wurde (beachten Sie, dass alle Tests mit Chrome - 3GSlow ausgeführt wurden):
Zeile 1 zeigt, dass HTML zuerst geladen wird. Sobald es in weniger als 2 Sekunden heruntergeladen und gelesen wurde, erkennt der Browser die Notwendigkeit, das Google Fonts CSS zu laden, und lädt es in Zeile 4. Das Herstellen einer Verbindung dauert eine Sekunde. Anschließend wird eine Datei 3,5 Sekunden lang heruntergeladen. Schließlich erfuhr der Browser von der Existenz unserer Schriftart und lud sie in Zeile 6, nachdem er auf dem Weg zur Verbindung mit fonts.gstatic.com weitere 1 ¼ Sekunde verloren hatte.Die Verwendung dieser Schriftart von Google Fonts kostet uns ab dem Zeitpunkt der Verfügbarkeit von HTML drei Sekunden Produktivität, ohne die Zeit zum Herunterladen der Schriftart selbst zu berücksichtigen!Beschleunigen von Google Fonts durch Vorladen von Ressourcen
Sie können diesen schrecklichen Leistungseinbruch abmildern, wenn Sie CSS und Schriftarten aus zwei verschiedenen Domänen laden. Die erste Domain (für CSS) sollte sich näher am Anfang der Datei index.html befinden, damit der Browser sie so schnell wie möglich liest, die zweite jedoch weiterhin ausgeblendet ist. Wir wissen jedoch, wie diese Domain aussehen wird (fonts.gstatic.com), sodass wir die Verbindung im Voraus öffnen können, um später bei der zweiten Verbindung Zeit zu sparen:
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Beim erneuten Testen sehen wir das folgende Bild:
Hier sehen wir, dass die Verbindung in Zeile 5 vor dem Laden von CSS offen ist. Wir gewinnen also mehr als eine Sekunde (Herunterladen von Schriftarten in 4 Sekunden, nicht in 5.25), da wir keine Zeitverschwendung während der Verbindung vermeiden konnten und die Schriftarten sofort nach dem Lesen der CSS-Google-Schriftarten heruntergeladen werden.Sie könnten denken, Sie könnten die gesamte Schriftart vorab laden, anstatt sich nur mit dem Beitritt zur Domain zufrieden zu geben, aber Google Fonts nennt Schriftarten eindeutige Hashes. Im obigen Beispiel heißt die heruntergeladene Schriftart S6uyw4BMUTPHjx4wXg.woff2 und nicht lato.woff2. Daher ist das Vorladen nicht möglich, es sei denn, Sie möchten, dass Ihre Website eines Tages abstürzt, wenn Google plötzlich beschließt, diesen Hash zu ändern.Wenn Sie Google Fonts verwenden und nach dem Lesen dieses Hinweises nichts anderes tun möchten, fügen Sie in jedem Fall mindestens eine vorläufige Verbindung zur Domain hinzu, sofern dies noch nicht geschehen ist. Dies ist nur eine Codezeile und sollte die Leistung Ihrer Seite erheblich verbessern.Tatsächlich gibt Google Fonts beim Rendern von CSS einen ähnlichen Befehl in HTTP-Headern aus:
In vielen Fällen hilft dies jedoch nicht viel, da der Browser bereits weiß, dass Sie eine Verbindung zu dieser Domäne herstellen möchten, um Schriftarten herunterzuladen, wenn Sie die HTTP-Antwortheader vom Server mit CSS erhalten. Es ist daher besser, wenn Sie dies im HTML-Code angeben, damit das Vorladen früher funktioniert (es spielt keine Rolle, dass es auf diese Weise dupliziert wird, der zweite Versuch wird einfach ignoriert). Wenn Ihre Seite jedoch zum Zeitpunkt des Empfangs der Header vom Google Fonts CSS-Server noch verarbeitet wird und das DOM noch nicht bereit ist (dies ist möglicherweise ein Zeichen für zu viel JavaScript auf Ihrer Seite?), Kann dies zur Verbesserung der Leistung beitragen, wenn es endgültig klar wird welche Schriftart heruntergeladen werden soll.Schriftanzeige: Tauschen
Im obigen Schriftartencode sehen Sie die Schriftanzeige: swap; line. Dies ist eine relativ neue Anweisung. Es kann zur Schriftartdeklaration hinzugefügt werden und weist den Browser an, zuerst Fallback zu verwenden, d. H. Die Systemschrift (in diesem Beispiel serifenlos), und diese nach dem Herunterladen durch die echte Schrift zu ersetzen. Auf diese Weise können Sie Verzögerungen beim Laden von Inhalten vermeiden, wenn die Schriftart noch nicht geladen wurde, und die Leistung verbessern.Ja, dies führt zu einem Aufblitzen von nicht stabilisiertem Text (FOUT) - die gleichen "Sprünge" im Inhalt beim Laden von Seiten, aber einige Leute mögen es nicht (meiner Meinung nach ist der Inhalt wichtiger als das Stylen, aber der Text, der über die Seite springt, ist jedoch ärgerlich Dies kann durch Optimieren der Ersatzschriftart gemindert werden. Eine Alternative ist Flash Unible Text (FOIT). In diesem Fall wird der Text ausgeblendet, bis die Schriftart angezeigt wird. Dies verzögert offensichtlich den Download und kann andere Probleme verursachen, wenn Text geladen wird, andere jedoch nicht !In jedem Fall haben sich vor der Einführung von font-display: swap verschiedene Browser unterschiedlich damit befasst - einige, wie IE und Edge, verwendeten FOUT, andere FOIT, und sie hatten unterschiedliche Zeiten, bis sie darauf warteten, dass die Schriftarten warteten. Wenn die Schriftart nicht geladen wird, kann Ihr Inhalt daher für lange Zeit unsichtbar bleiben. Mit der Einführung von font-display: swap konnten Website-Entwickler selbst entscheiden, wie dies geschehen soll. Die meisten Browser unterstützen die Anzeige von Schriftarten: Swap, mit Ausnahme von IE und Edge. Wie oben erwähnt, wird dies jedoch standardmäßig verwendet. Google-Schriftarten unterstützen auch verschiedene Optionen für die Schriftanzeige und bieten die Anzeige von Schriftarten: Standardmäßig austauschen.Ein weiterer Tipp, wenn Sie Google-Schriftarten verwenden, besteht darin, zu überprüfen, ob Sie den Parameter & display = swap in der URL haben. Wenn dies nicht der Fall ist (er wurde erst kürzlich unterstützt), fügen Sie ihn hinzu:Ersetzen Sie beispielsweise Folgendes:
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
Auf das:
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Sie können auch einen der anderen Anzeigewerte für Schriftarten angeben , z. B. optional , wenn Sie dies wünschen.Leider löst dies nur die Hälfte des Problems. Diese Anweisung befindet sich in CSS, das Google Fonts zurückgibt. Sie ist daher erst nützlich, nachdem Sie die CSS-Datei heruntergeladen haben. Daher hilft es, die Verzögerung beim Laden der Schriftarten selbst zu bewältigen, aber es hilft nicht, während Sie auf das Laden dieses CSS warten. Dies ist also eine gute Verbesserung (zumindest für diejenigen, die FOUT bevorzugen), aber immer noch nicht die gesamte Lösung als Ganzes.Google Fonts
Ich habe bei der Erstellung von Web Almanac mitgeholfen (ein fantastischer Blick auf den Zustand des Internets - sehen Sie selbst, ob Sie ihn noch nicht gesehen haben), und das langsame Herunterladen von Google-Schriftarten auf unserer Website hat mich geärgert und ich wollte ihn beheben. Besonders FOUT mit Font-Display: Swap. Ich habe mich gefragt, ob wir die Auswirkungen verringern können, und die lokale Lösung schien darin zu bestehen, Dateien lokal zu speichern, möglicherweise mithilfe des Vorladens.Wir haben bereits die oben genannten Techniken verwendet (Preload und Font-Display: Swap;), aber natürlich ist es besser, CSS nicht von außen zu verbinden. Wir wissen, was in diesem CSS enthalten sein wird. Wählen Sie also sicher selbst gehostet? Hier wird es interessant ...Ich habe auf GitHub ein praktisches Skript gefunden ( Google Font Download), wodurch ich alle verschiedenen Schriftartenoptionen herunterladen konnte (da es viele gab, je nach Seite bis zu 9), dann das CSS kopierte, das in unserem Haupt-Stylesheet angezeigt wurde, und die Schriftarten auf den Server hochlud. Es gibt andere Online-Tools , die dasselbe tun. Es schien alles zu funktionieren, und wir haben das lästige CSS-Laden und die Notwendigkeit, mit zwei Domänen zu arbeiten, beseitigt.Bei näherer Betrachtung stellte ich jedoch fest, dass die Schriftarten größer waren:
Wie Sie sehen, hat die Größe erheblich zugenommen (bei einigen von ihnen bis zu 74% mehr!). Im Vergleich zu heruntergeladenen Google-Schriftarten (rechts) und lokal platzierten Schriftarten (links). Anfangs dachte ich, dies liege an meinem lokalen Webserver, zum Beispiel daran, dass die Komprimierung deaktiviert war. WOFF2-Schriftarten werden jedoch ohne Komprimierung vom Webserver bereitgestellt - oder sollten es zumindest sein -, da das Format die Brotli-Komprimierung enthält. Der obige Screenshot zeigt auch die heruntergeladenen Bytes (oben schwarz) sowie die unkomprimierten Bytes (unten etwas heller) für jede Spalte (sie sind in beiden Spalten ziemlich ähnlich, da die Schriftarten vom Webserver wirklich ohne Komprimierung gesendet werden, die heruntergeladenen Bytes jedoch HTTP-Header enthalten (also sind sie etwas größer), und es gab Unterschiede sowohl bei komprimierten als auch bei nicht komprimierten Bytes. Das ist also nicht der Punkt.Der Vergleich der mit dem Tool erhaltenen Regeln für Schriftarten mit den ursprünglichen Regeln ergab einen Unterschied:Von Google Fonts:
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Aus dem Download-Tool:@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src:
local('Lato Regular'),
local('Lato-Regular'),
url('Lato_400.woff2') format('woff2'),
url('Lato_400.woff') format('woff');
}
Der erste Unterschied ist, dass wir die Schriftanzeige verloren haben: Zeile tauschen, aber dies kann ohne Probleme behoben werden. Viel interessanter ist die Tatsache, dass Google Fonts zwei Schriftarten verteilt - und unterschiedliche Unicode-Bereiche enthält. Dies ist auf eine Untergruppe von Schriftarten zurückzuführen und reduziert Schriftdateien.Untermenge der Schriftarten
Bei der Untermenge von Schriftarten werden Zeichen entfernt, die Sie nicht zum Reduzieren der Schriftgröße verwenden werden. Normalerweise verwenden die meisten Westler nur lateinische Zeichen, und das Herunterladen einer Schriftart mit allen Zeichen, die Sie wahrscheinlich nicht verwenden, ist irrational. Ich hatte schon einmal davon gehört, aber ich hätte nie gedacht, wie wichtig dies sein könnte! Google Fonts rendert automatisch eine Schriftart mit einer Reihe lateinischer Zeichen und verbindet nach Möglichkeit eine zweite Schriftart für erweiterte lateinische Zeichen (z. B. Ā), die nur bei Bedarf heruntergeladen wird.Tatsächlich können Sie auch eine spezielle Schriftart anfordern, die nur die Zeichen enthält, die Sie mit dem Textparameter benötigen:https://fonts.googleapis.com/css?family=Lato&text=ABCNach weiteren Beobachtungen zu urteilen, unterstützt das von mir verwendete Tool zum Laden von Schriftarten anscheinend die Teilmenge von Schriftarten, jedoch nur für die gesamte „Sprache“ (Latein oder erweitertes Latein), und kombiniert beide Teilmengen von Zeichen in einer einzigen Datei. Am Ende habe ich wieder das verwendet, was mein Browser verwendet hat, und dieses Tool nicht mehr verwendet. Dies ergab ähnliche Dateigrößen (mit einem geringfügigen Unterschied aufgrund der HTTP-Header in meiner Entwicklungsumgebung), aber ich stellte bald fest, dass es sich nicht nur um eine Teilmenge von Schriftarten handelte.Google Fonts verteilt Schriftarten intelligent
Google Fonts rendern nicht immer dasselbe CSS und dies hängt vom verwendeten Benutzeragenten ab . Für Internet Explorer 11 wird beispielsweise Folgendes gesendet:@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wWA.woff) format('woff');
}
Hier können Sie sehen, dass nur das WOFF-Format bereitgestellt wird , da IE 11 WOFF2 nicht unterstützt und aus demselben Grund kein Unicode-Bereich angegeben ist. Es gibt font-display: swap (wie ich in der URL für CSS ausgeführt habe), obwohl der Browser es nicht unterstützt, aber es schadet nicht.Es ist nicht nur der Hersteller und die Version des Browsers. Schriftart HinweisEnthält zusätzliche Anweisungen in der Schriftartdatei, die dann verwendet werden, um die Schrift optimal anzuzeigen - insbesondere auf Bildschirmen mit niedriger Auflösung oder für sehr kleine Größen. Schrifthinweise werden unter Windows verwendet, jedoch nicht unter MacOS. Je nachdem, mit welchem Betriebssystem Sie beim Empfang von Google Fonts mit einem Browser arbeiten (auch wenn Sie Chrome auf jeder Plattform verwenden), erhalten Sie möglicherweise Schriftdateien mit Hinweisen oder ohne ihn. Wenn Sie die Windows-Version herunterladen und selbst verwenden, leiden MacOS-Benutzer unter der Notwendigkeit, große Schriftdateien mit nicht verwendeten Hinweisen zu verarbeiten. Wenn Sie das Gegenteil tun, leiden Windows-Benutzer möglicherweise unter einer schlechteren Schriftanzeige. ohne Schriftangabe.Wenn ich Google Fonts verwendet und Schriftarten für die lokale Verwendung heruntergeladen habe, habe ich dies auf meinem Mac getan, sodass ich kleinere Dateien erhalten habe. Als ich das Tool benutzte, bekam ich volle Schriftarten mit Hinweisen. Das war also ein weiterer Grund für den großen Größenunterschied!Ist der Hinweis auf Schriftarten immer noch relevant?, weil hochauflösende Bildschirme immer häufiger verwendet werden - dies ist eine gute Frage, und viele Schriftarten werden zunächst ohne Angabe von Gründen geliefert, da die Erstellung viel Zeit in Anspruch nimmt. Wenn es vorhanden ist, kann es die Schriftgröße erheblich erhöhen. Bei Lato wird die Größe verdoppelt. Lohnt sich die zusätzliche Arbeitsbelastung, die durch das Verlassen von Google Fonts und das lokale Auffinden von Schriftarten entsteht? Dies ist eine weitere Entscheidung, die Sie selbst treffen müssen.Daher wird Google Fonts CDN von einem intelligenten Skript unterstützt, das die am besten geeigneten Schriftarten herausgibt und diese optimiert, um die maximale Leistung aufrechtzuerhalten. Wenn Sie zum lokalen Speicher für Schriftarten wechseln, müssen Sie dies alles selbst konfigurieren. Wenn Sie dies nicht tun, besteht die Möglichkeit, dass in einigen Browsern die korrekte Anzeige Ihrer Schriftarten verloren geht.Für Web Almanac haben wir uns Statistiken zu den Browsern der Besucher angesehen und beschlossen, nur WOFF2 zu unterstützen und auch Versionen von MacOS ohne Hinweise zu verwenden, da diese halb so schwer sind. Dies vereinfacht CSS (zumal der Unicode-Bereich von allen Browsern unterstützt wird, die WOFF2 unterstützen) und Benutzer von IE 11 und anderen alten Browsern sehen standardmäßig serifenlos, was nicht sehr gut aussieht, aber unserer Meinung nach stellen Schriftarten eine fortschreitende Verbesserung dar, und selbst ohne sie ist die Website immer noch mehr als nutzbar. Darüber hinaus können ältere Browser sogar von der Verwendung von Systemstandardschriftarten profitieren, da diese wahrscheinlich auf älteren Computern mit geringem Stromverbrauch verwendet werden.Sie können auch andere Anpassungen an Ihren Schriftarten vornehmen, wenn Sie möchten (überprüfen Sie zuerst die Lizenzen!). Das Kopieren der in Chrome unter MacOS verwendeten Standard-Google-Schriftarten reicht jedoch für die meisten von uns wahrscheinlich aus, wenn Sie nur WOFF2-Browser ohne Hinweis unterstützen möchten .Wenn wir uns jedoch für Google Fonts entschieden hätten, hätten wir WOFF (und sogar ältere Formate) und Hinweise, falls erforderlich, ohne dass eine gründliche Konfiguration der Ersetzung der richtigen Schriftart abhängig vom Browser erforderlich wäre. Daher hat die Verwendung von Google Fonts für Schriftarten immer noch bestimmte Vorteile. Wenn Sie sich für einen lokalen Speicher entscheiden, lehnen Sie diese ab. Dies gilt auch für zukünftige Verbesserungen von Google Fonts .Zukünftige Verbesserungen der Schriftarten
Da ich mich mit dem Thema Schriftarten befasst habe und gewarnt habe, dass Sie künftige Vorteile von Google Fonts verlieren könnten, wenn Sie in den lokalen Speicher wechseln, möchte ich mich ein wenig vom Hauptthema entfernen und über andere interessante Dinge sprechen, die ich entdeckt habe. Was sind die bevorstehenden großen Veränderungen in der Schriftwelt? Nun, es gibt zwei Änderungen, die derzeit aktiv diskutiert werden und sich möglicherweise auf Schriftarten in der Zukunft auswirken (und daher möglicherweise von Google Fonts unterstützt werden, möglicherweise standardmäßig, wenn Sie diesen Dienst verwenden): variable Schriftarten und progressive Schriftartenanreicherung .Variable Schriftarten
Mit variablen Schriftarten können Sie verschiedene Schriftstile verwenden, ohne einzelne Dateien herunterladen zu müssen. Ich habe bereits erwähnt, dass Web Almanac bis zu 9 verschiedene Schriftdateien verwendet, in Wirklichkeit jedoch nur zwei Schriftarten. Der Grund ist einfach: Die Website verwendet auch fett, kursiv, fett und noch dünnere Versionen von einer oder beiden. So viele Variationen derselben Schriftart scheinen unangemessen zu sein, und Sie könnten denken, dass der Browser selbst die Aufgabe bewältigen wird, die Dicke des Textes zu ändern oder kursiv zu schreiben. Ja, es ist möglich. Aber jeder Browser macht das ein bisschen anders und die Ergebnisse können radikal anders sein , so viele nennen sie "künstliche Schriftarten".Die einzige Möglichkeit, die gleiche Anzeige sicherzustellen, besteht darin, eine „echte Schriftart“ speziell für jeden von Ihnen benötigten Stil zu verwenden.Variable Schriftarten standardisieren die Anzeige verschiedener Schriftartenvarianten und die Notwendigkeit zusätzlicher Dateien entfällt. Theoretisch könnten wir diese 9 Schriftarten durch 2 ersetzen, wenn ihre variablen Schriftversionen verfügbar werden.Dies eröffnet eine Vielzahl von Möglichkeiten für die Verwendung von Schriftarten im Internet. Obwohl es mir scheinen mag, dass die 9 Optionen für die beiden Schriftarten zu viel sind, ist es in Wirklichkeit nicht zu viel, während variable Schriftarten endlose Variationen zulassen würden. Auf Mobilgeräten können Sie für "Fett" eine etwas andere Dicke einstellen als auf Desktops und Tablets. Variable Schriftarten mit ein paar einfachen CSS-AnweisungenErmöglichen Sie dies ohne die Kosten für Ressourcen zum Herunterladen einer zusätzlichen Schriftart. Vor kurzem sprach Jason Pamental auf der DotCSS über variable Schriftarten und zeigte, wie Sie eine wunderschön gestaltete Seite mit scheinbar vielen verschiedenen Schriftarten erstellen können - alle mit einer einzigen Datei! Die Verwendung variabler Schriftarten bedeutet auch, dass alle Schriftartenvarianten gleichzeitig geladen werden , um die durch die zuvor genannten Probleme verursachte Verwirrung zu vermeiden. Dies führt auch zu weniger Neuzeichnungen des Layouts: Ohne variable Schriftarten wird die Seite vom Browser beim Laden jeder einzelnen Schriftartvariante immer wieder neu gezeichnet . Variable Schriftarten werden gut unterstütztin modernen Browsern, aber ihr Nachteil ist die große Größe, da das Speichern verschiedener Schriftartenvarianten mehr Speicherplatz erfordert, wie dies bei Schriftartenhinweisen der Fall ist. Dies hängt von der Schriftart ab, ist jedoch nach der Komprimierung normalerweise doppelt so groß. Um ihre Verwendung zu rechtfertigen, müssen mindestens zwei Stile erforderlich sein. Trotzdem ist es möglicherweise besser, eine kleinere Datei zu bevorzugen, die hochgeladen wird, um kritischen Text anzuzeigen, als eine größere Datei, um den gesamten Text anzuzeigen. Und wieder, kann die Verwendung von Font-Display: Swap eine weniger problematische Lösung sein? Dies muss jeder Websitebesitzer entscheiden!Progressive Schriftanreicherung
Progressive Font Enrichment setzt die Teilmenge im Wesentlichen auf eine neue Ebene und ermöglicht es Ihnen, bei Bedarf zusätzliche Zeichendefinitionen in Form eines Stroms zusätzlicher Informationen herunterzuladen, die die aktuell geladene Schriftart ergänzen, anstatt eine zusätzliche hinzuzufügen. Dies mag für uns Westler als kleiner Vorteil erscheinen, aber für andere Sprachen - insbesondere in Fernost - können Schriftdateien aufgrund der großen Anzahl von Zeichen in diesen Sprachen sehr umfangreich sein (z. B. 2 MB ). Aus diesem Grund werden Web-Schriftarten in solchen Ländern weniger häufig verwendet, und eine fortschreitende Anreicherung von Schriftarten kann sich positiv auf die Situation auswirken.Progressive Font Enrichment befindet sich meines Wissens viel früher als variable Schriftarten, aber es gibt sieOnline-Demo . In jedem Fall ist dies eine weitere potenziell interessante Änderung in Bezug auf Schriftarten.Wird sich Google Fonts weiter verbessern?
Angesichts der Funktionsweise von Google Fonts ist es leicht vorstellbar, dass Google Fonts mit neuen Verbesserungen, wie den in diesem Artikel beschriebenen (oder vielen anderen!), Weiter wachsen kann, indem Sie einfach das von Ihnen angegebene CSS ändern. Und er kann es mit Bedacht tun. Stellen Sie beispielsweise fest, ob Ihr Browser neue Technologien unterstützt (wie dies jetzt beim Schriftformat WOFF oder WOFF2 der Fall ist) oder auf andere Weise. Wenn Sie beispielsweise mehr als zwei Schriftarten anfordern und variable Schriftarten weniger ressourcenintensiv angeben, können Sie dieselbe Schriftartdatei in mehreren Anzeigen mit Schriftarten automatisieren und mit dieser verknüpfen. Wenn Sie nur eine Option anfordern, beziehen Sie sich auf eine leichtere. traditionelle Schriftart. Klingt weit hergeholt? Sie haben es bereits mit einer Schriftart gemacht.(Oswald)! Ehrlich gesagt weiß ich nicht, ob dies mit der progressiven Schriftanreicherung möglich ist, da ich das Prinzip ihrer Arbeit nicht vollständig verstehe, aber es wird interessant sein, es zu sehen.Erwähnenswert ist auch, dass bei Verwendung von Google Fonts beim Aktualisieren von Schriftarten, beispielsweise zum Hinzufügen neuer Zeichensätze oder zum Korrigieren von Fehlern in Glyphen, automatisch neue Schriftarten angezeigt werden. Bei lokalem Speicher funktioniert dies nicht - zumindest nicht ohne Eingreifen mit einer Hand. Vielleicht könnten Sie in Richtung Proxy-Anfragen über Ihre Domain schauen und somit das Beste aus beiden Optionen herausholen, aber dies wird höchstwahrscheinlich langsamer sein und zusätzliche Konfiguration und Verwaltung erfordern.Auf der anderen Seite bietet lokaler Speicher Stabilität, da einige Aktualisierungen Ihr Design beeinträchtigen können, z. B. wenn sich ein Titel in einer Zeile aufgrund einer Schriftartenänderung auf zwei erstreckt. Es gibt eine Kategorie von Menschen, die aus diesem Grund sehr verärgert sindVorteile der lokalen Speicherung von Schriftarten
Wir haben also eine Menge Theorie diskutiert, und obwohl es offensichtliche potenzielle Vorteile des lokalen Speichers gibt, gibt es auch Schwierigkeiten zu berücksichtigen, und daher hat die Verwendung von Google Fonts auch einige offensichtliche Vorteile. Lohnt es sich also, selbst gehostet zu werden? Es hängt von den tatsächlichen Annehmlichkeiten in einer bestimmten Situation ab. Wenn der Leistungsunterschied unbedeutend ist, kann es sich lohnen, weiterhin Google Fonts zu verwenden, wenn diese groß sind.Für Web Almanac haben wir kürzlich den lokalen Speicher von Google Fonts ausgewählt. Tests haben dramatische Änderungen ergeben:
Das untere Bild enthält lokale Schriftarten auf unserem Testserver, und Sie können sehen, dass sich die Downloadzeit halbiert hat - von 6 auf 3 Sekunden! Nach einer eingehenderen Analyse habe ich festgestellt, dass die Produktivität noch weiter gestiegen ist (3 ⅓ Sekunden Einsparungen)!Was nicht so offensichtlich ist (aber was wir später sehen werden) - zu diesem Zeitpunkt werden Schriftarten auf keinem der Bilder vollständig geladen - bei lokaler Speicherung dauert es 7,5 Sekunden und 10,5 Sekunden, wenn Google Fonts verwendet wird. Die verwendeten Schriftarten sind jedoch den Standardschriftarten ziemlich ähnlich, und es gibt keine merklichen Sprünge im Layout. Dies ist in der folgenden Abbildung dargestellt:
Das Diagramm zeigt, dass die Seite mit lokalem Speicher (in Rot) in 2,4 Sekunden fast vollständig geladen ist und dann beim Laden der Bilder mehrmals aktualisiert wird. Danach werden auch die Schriftarten angezeigt. Ja, ich möchte alles noch reibungsloser gestalten, aber es ist immer noch unmöglich, einige Kosten für das Herunterladen von Schriftarten zu optimieren.Der Grund dafür, dass die Verbesserungen wirklich greifbar sind, liegt in einer weiteren Sache, die ich zunächst nicht berücksichtigt habe: dem Rendern von CSS-Blöcken. Wenn also ein Link zu Google Fonts CSS vorhanden ist, verzögert der Browser nicht nur die Anzeige von Text, sondern auch die Anzeige des gesamten Inhalts der Seite! Die Schriftart ist eine fortschreitende Verbesserung, sodass wir den Rest der Seite und sogar den Text selbst (mit Standard- / Fallback-Schriftarten) sicher rendern können, der Browser jedoch nicht - er erkennt nur, dass CSS vorhanden ist, und versucht, es zu laden, wodurch der Download verschoben wird der Rest der Seite. Es gibt kein asynchrones Laden für CSS- aber vielleicht sollte es für solche Fälle sein? Wir riskieren jedoch, dass bei Problemen mit der Verbindung zu Google Fonts nicht auf Ihre gesamte Website zugegriffen werden kann, bis der Browser nicht mehr versucht, den Link zu verarbeiten!
In der obigen Vergleichstabelle tritt die vertikale grüne Linie des Start-Renderings bereits nach 6 Sekunden auf - da gewartet werden muss, bis Google Fonts CSS in Zeile 12 geladen wird, wobei die Hälfte der Zeit für die Verbindung mit der Domain und die andere Hälfte für das tatsächliche Laden aufgewendet wird.Vergleichen Sie dies mit der lokalen Version:
Hier können wir mit dem Rendern beginnen, sobald das CSS der Site in 2,5 Sekunden geladen und verarbeitet wurde. Dies liegt daran, dass die Verbindung zur Google Fonts-Domain nicht verzögert wird.In beiden Fällen sehen wir, dass der Beginn des Renderns vor dem Laden der Schriftarten erfolgt, und dank der Magie der Schriftanzeige: Swap ist der Text immer noch sichtbar. Zumindest bei Verwendung von font-display: swap ist es daher besser, wenn Google Fonts nicht mit CSS-blockierendem Rendering geladen werden, sondern beispielsweise über asynchrones JavaScript, das CSS-Schriftarten erst danach in die Seite einfügt wie sie heruntergeladen werden. Wenn der Prozess so implementiert würde, würden keine Verzögerungen beim Rendern auftreten. Es gibt jedoch immer noch Verzögerungen beim Herstellen der Verbindung und eine lange Wartezeit, bis der Text korrekt angezeigt wird.UPD: Ich habe ein Problem mit GitHub Google Fonts erstellt, mit dem Vorschlag, eine Möglichkeit zum Herunterladen von Google Fonts hinzuzufügen, ohne das Rendern zu blockieren. Stimmen Sie ab, wenn Sie es auch möchten!Zach Leatherman befürwortet diesen Ansatz, um die Anzahl der Neuzeichnungen zu verringern , und zeigt, dass dies auch mit JavaScript allein möglich ist, ohne dass eine CSS-Datei erforderlich ist. Dann zeigt es andere Vorteile der Verwaltung Ihrer Schriftarten mit JavaScript. Sie können beispielsweise das Herunterladen von Schriftarten überhaupt ablehnen, wenn die Site in einem langsamen Netzwerk geöffnet ist (mithilfe der Netzwerkinformations-API ) oder wenn für den Benutzer die Einstellungen zum Speichern von Daten oder zum Vorzug von reduzierten Bewegungen aktiviert sind . Interessante Features!Schriftarten vorladen
Sobald Sie sich von den gehashten URLs von Google entfernt haben, können Sie die Schriftart vorab laden, um die Leistung weiter zu verbessern. Diese Option weist jedoch einige potenzielle Mängel auf, wie Andy Davies im Artikel Vorladen von Schriftarten und das Puzzle der Prioritäten erläutert hat . Wenn Sie Schriftarten vorladen und in der Prioritätsreihenfolge nach oben verschieben, verringern Sie implizit die Priorität anderer kritischer Downloads (z. B. CSS). Aufgrund eines Fehlers in Chrome können Schriftarten sogar über einige von ihnen springen .Darüber hinaus führt das Vorladen, wenn die Schriftart nicht verwendet wird, zu unnötigem übermäßigem Laden - beispielsweise wenn die lokale Version vorhanden ist und mit Priorität verwendet werden kann oder wenn der Browser dieses Schriftformat nicht unterstützt (obwohl alle Browser, die das Vorladen unterstützen, auch WOFF2 unterstützen ) Zusammen mit der Empfehlung, das Vorladen zu verwenden, warnt Google Sie eindeutig davor , und es ist schön zu sehen, dass sie darauf achten.Bei Verwendung der Funktion font-display: swap ist das Vorladen möglicherweise nicht so stark erforderlich. In diesem Fall können Sie dennoch Zeit gewinnen, indem Sie die minimal erforderliche Anzahl von Schriftarten herunterladen und so FOUT und Neuzeichnen vermeiden. Im Moment verwenden wir keine Vorladung in Web Almanac und bevor wir beginnen, brauchen wir noch ein paar Tests, aber im Moment bin ich zufrieden mit dem, was ist.Fazit
Beantwortung einer Frage im Titel des Artikels: Ja, es lohnt sich, da der Leistungsgewinn erheblich ist. Natürlich können Ihre Ergebnisse variieren, da alles von der jeweiligen Site abhängt. Testen, testen und erneut testen. Ich denke jedoch, dass dies für die meisten Websites immer noch die beste Option in Bezug auf die Leistung ist.Google Fonts ist jedoch nicht nur ein Repository mit Hunderten von kostenlosen Schriftarten, sondern auch ein intelligenter Übermittlungsmechanismus, der viele der neuesten Optimierungstechniken verwendet, um die am besten geeigneten Schriftarten mit minimalem Aufwand seitens des Websitebesitzers zu rendern. Wenn Sie zu selbst gehostet wechseln, müssen Sie im Idealfall viele nützliche Verbesserungen erneut implementieren, z. B. die Anzeige von Schriftarten: Tauschen, Entfernen von Schriftartenhinweisen (zumindest für einige Browser) oder auf andere Weise können Sie nur die Leistung schwerer Browser beeinträchtigen Schriftdateien.Dies ist keine leichte Aufgabe (und Google Fonts erledigt dies für Sie, ja). Da jedoch nur die Verwendung des WOFF2-Formats die einzig realistische Option ist und Browser die meisten Optimierungstechniken gut unterstützen, ist alles viel einfacher geworden als zuvor. Es lohnt sich jedoch, vor dem Einrichten einige Kenntnisse über Web-Schriftarten zu haben (ich hoffe, dieser Beitrag hat dabei geholfen!) Und gleichzeitig neue Änderungen in der Schriftwelt im Auge zu behalten, da es zweifellos weitere Verbesserungen geben wird.Nun, vielleicht waren wir zu sehr an der Optimierung interessiert und können es uns mit lokalem Speicher leisten, die vollständige Schriftart ohne Teilmenge und mit Hinweisen zu verwenden? Auf der Google Fonts-Website können Sie jede Schriftart herunterladen. Dies ist relativ einfach, obwohl es seltsam ist, dass das Archiv die Formate WOFF und WOFF2 nicht enthältbei Verwendung dieser Lademethode, die für mich völlig unverständlich ist! Wenn Sie jedoch wirklich daran interessiert sind, die Leistung zu verbessern (und Sie sollten interessiert sein!), Sollten Sie versuchen, das Richtige zu tun. Dieser Artikel zeigt nur, dass es etwas komplizierter ist, als nur Schriftarten herunterzuladen und auf Ihrer Website zu platzieren, wie ich es immer erwartet hatte.Wow, etwas Text war länger als ich erwartet hatte! Ich hoffe jedoch, dass Sie genauso an dem Verständnis des Themas interessiert waren wie Sie und jetzt einige neue Ideen haben, um das Herunterladen von Schriftarten auf Ihrer Website zu beschleunigen. Ich empfehle Ihnen dringend, Jason und Zach auf Twitter zu folgen , um mehr über Schriftarten zu erfahren , und Andy , um mehr über die allgemeine Geschwindigkeit von Webanwendungen zu erfahren.