Ist es bei der Verwendung von Schriftarten in Bootstrap schneller, die Google Fonts-API zu verwenden oder einfach die Schriftartdatei auf dem Server zu installieren?

Normalerweise UX-Designer, bin ich derzeit auch Produktmanager für eine Reihe von Web-Tools, aber meine Entwicklerfähigkeiten sind überhaupt nicht sehr stark, also verzeihen Sie mir, wenn dies eine dumme Frage ist. Wir erstellen eine Reihe von Bootstrap-Seiten für eine Reihe von Unternehmenstools und verwenden derzeit die Google Fonts-API für unsere Schriftarten. Ich mache mir ein bisschen Sorgen um die Ladezeit, und wir glauben, dass Google Fonts möglicherweise Daten sammelt. Bevor wir unsere aktuellen Designs aussortieren und die Schriftdateien auf dem Server installieren, habe ich mich gefragt, ob sonst noch jemand Ladezeiten bei der Verwendung von Google Fonts bemerkt hat und ob das Hochladen der Schriftarten selbst eine Lösung war – oder ob das nur noch schlimmer wird?

Hallo caztec, willkommen bei GDSE und danke für deine Antwort. Wenn Sie Fragen haben, besuchen Sie bitte das Hilfezentrum oder pingen Sie einen von uns im Chat an , sobald Ihr Ruf ausreichend ist (20). Tragen Sie weiter bei und genießen Sie die Seite!
Dies ist eher eine Frage für Stack Overflow als für GD.SE, denke ich.
Ja, das ist eine SO-Frage. Keine GD-Frage.
Stellen Sie außerdem sicher, dass Sie nur die Schriftstärken verwenden, die Sie benötigen (im Gegensatz zur gesamten Schriftfamilie).
Sie sind in einem Intranet? Ich nehme an, Sie ziehen dann besser nichts von irgendwo her .

Antworten (4)

Kurze Antwort : Google ist viel schneller als Sie es selbst hosten.

Lange Antwort : Es scheint eine gute Idee zu sein, es auf Ihren eigenen Server zu stellen, um die Ladezeiten zu verbessern. Schließlich befinden sich die Dateien näher an Ihrer Webseite. Aber nein. Wenn ein Benutzer Ihre Website besucht, erhält er schließlich zunächst nur etwas HTML. Hier haben wir Verweise auf andere Dateien: Bilder, JS, CSS und in Ihrem Fall Schriftarten.

Für jede dieser externen Ressourcen führt der Client einen neuen Aufruf an den Webserver durch, wo der Dateispeicherort bereitgestellt wird. Unabhängig davon, ob Sie Dateien selbst hosten oder auf Google verweisen, erfolgt der Aufruf dieser Ressource gleichzeitig.

Wenn Sie jedoch kein außergewöhnliches Unternehmen sind, reagiert der Google-Server viel schneller. Es wird auch die Bandbreite von Google und nicht Ihre verwendet, wodurch Sie (vielleicht ein bisschen) Geld sparen.

Wir müssen das Unternehmensnetzwerk verlassen, um Dateien abzurufen, ich glaube, das war meine Sorge - es gibt ein paar Hindernisse, die wir überwinden müssen, um Google und wieder zurück zu erreichen. Wahrscheinlich liegen Sie genau richtig - danke!
@caztec ist das ein Intranet? Wenn ja, dann ist dies ein ziemlich strittiges Thema, da das interne Netzwerk hoffentlich bereits ausreichend schnell ist.
Und wenn es sich um ein Intranet handelt, was bedeutet, dass Sie wahrscheinlich eine ziemlich kontrollierbare, relativ kleine Anzahl von Computern haben, die die Seiten besuchen, ist es natürlich am schnellsten, wenn die Schriftart auf den Computern installiert ist, sodass Sie sie nicht von irgendwoher abrufen müssen von allen.
@ DA01 es ist ja, es ist super schnell. Wir bekommen nur diese seltsame Verzögerung auf allen Seiten, die wir mit Google Fonts verwenden, wirklich seltsam
@caztec das klingt nach einer Art Firewall-Problem. Die Antworten hier sind ziemlich weit gefasst und können keine spezifischen Probleme mit Ihrem internen Netzwerk ansprechen. Denken Sie also daran. In Ihrem speziellen Fall ist es wahrscheinlich sinnvoll, die Dateien selbst zu hosten, um alles in Ihrem eigenen Netzwerk zu halten.

Das Laden von Dateien von Servern Dritter (Google) kann die Ladezeit verlangsamen, da der Browser eine Anfrage an einen anderen Computer stellen muss. Grundsätzlich sollte das Laden von allem von einer Domain schneller sein als das Laden von Dateien von verschiedenen Webservern.

Es besteht jedoch die Möglichkeit, dass sich die Google-Schriftart bereits in der Cache-Datei des Besuchers befindet . Dies würde wiederum die Dinge beschleunigen, da der Browser es nicht erneut laden müsste.

Das Gleiche gilt für andere Assets wie jquery-Bibliotheken etc. wie zB hier beschrieben: "Warum Sie keine externen Javascript-Dateien verwenden sollten" (http://www.elxis.org/de/blog/external-js-files.html )

Das ist nicht wirklich wahr. Ob eine Anfrage an einen oder viele Server geht, ist meist irrelevant. Ein größeres Problem sind gleichzeitige Verbindungen ... die meisten Server begrenzen die Anzahl gleichzeitiger Anfragen, was bedeutet, dass es normalerweise eine schnellere Lösung ist, Server von Drittanbietern zu treffen .
@DA01 Richtig. Zumal CDNs (Content Delivery Networks, wie etwa Googles Hosted Libraries) auf schnellstmögliche Antwort optimiert sind. Aber ja - an welchen Server Ihre Anfrage geht, ist irrelevant.
Was den verlinkten Artikel betrifft: 1) Target domain not available: Kein Problem mit CDNs, die über riesige Mengen an Backup-Servern verfügen. Natürlich sollten Sie Ihre js nicht von grannysknittingwear.com laden. 2) Speed reducenur nicht wahr bis jetzt. Der Zeitpunkt, zu dem die Anfrage beginnt, ist immer gleich – und ein CDN-Server antwortet schneller als Ihrer. 3) und 4) sind wiederum kein Problem mit tatsächlichen CDNs. Sie werden die Versionen, die Sie verwenden, lange Zeit nicht löschen, und Sie können darauf wetten, dass Ihre eigenen gehosteten Dateien viel früher kompromittiert und geändert werden als ihre.
Kann bitte jemand seine Vorschläge zumindest mit Links oder Zitaten oder ähnlichem unterstützen? Ich meine – keine Google-Links? Hier sind zwei Links zu Leuten, die erklären, warum das Webfont-Hosting von Drittanbietern technisch langsamer ist ( sein kann ): feedthebot.com/pagespeed/web-font-options.html und bdadam.com/blog/loading-webfonts-with-high-performance. html Aber wie ich oben sagte: Wenn Sie es mit (beliebten) Google-Fonts zu tun haben, ist die Wahrscheinlichkeit groß, dass sich die Schriftart bereits im Browser-Cache des Benutzers befindet – und das kann dazu führen, dass sie sogar noch schneller geladen wird . Prost.
@DA01 Irgendwann verstehe ich Ihren Punkt – die Begrenzung der „gleichzeitigen Anfragen“ kann zu einem Problem werden. Aber auf "gleichzeitige Anfragen" im Kontext von Webfonts (oder andere "einfache Anfragen") zu verweisen, passt einfach nicht zum Problem. Lesen Sie hier weiter: stackoverflow.com/questions/5017392/… oder hier: serverfault.com/questions/75054/…
@tillinberlin Ich kann in keinem Ihrer verlinkten Artikel eine Erklärung finden, warum Self-Hosting schneller ist als CDN-Hosting. Der erste Artikel erwähnt, dass Sie sich nicht darauf verlassen müssen, dass der Server eines Drittanbieters aktiv ist, aber das ist der springende Punkt bei einem CDN ... sie sind immer aktiv.
Was gleichzeitige Anfragen betrifft, so hängt es ganz davon ab, was Sie anfordern, in welcher Reihenfolge und von welchem ​​Server. Es kann definitiv kein Problem sein. Es ist jedoch definitiv kein Problem, wenn Sie die Schriftart von einem anderen Server anfordern.
@tillinberlin Wir verwenden Roboto, das die meisten Android-Benutzer auf ihren Geräten installiert haben, aber die meisten Desktop-Benutzer werden es nicht installiert haben

Wenn Sie eine Webseite anfordern, fordern Sie mehr als nur die Webseite an. Sie fordern die HTML-Datei, alle Bilder, alle CSS-Dateien, alle JS-Dateien, alle Font-Dateien usw. an.

Ihr Server lässt Sie selten alle diese Elemente auf einmal anfordern. Stattdessen wird die Anzahl der gleichzeitigen Anfragen begrenzt und Sie werden aufgefordert, den Rest in die Warteschlange zu stellen. Das ist keine große Sache, aber je mehr Anfragen, desto wahrscheinlicher wird etwas in die Warteschlange gestellt. Darüber hinaus blockieren viele Server alle Anfragen, während eine JS-Datei heruntergeladen wird.

Aus diesem Grund ist es besser, eine 100-k-CSS-Datei anzufordern als 10 10-k-CSS-Dateien. Die Daten sind alle gleich, aber Sie verlieren an Effizienz, wenn Sie all diese separaten Anfragen stellen müssen.

Zumindest für CSS lautet eine Empfehlung also, einfach alle Ihre CSS in einer CSS-Datei zusammenzufassen.

Mit Schriftarten ist das jedoch nicht möglich.

Die Empfehlung dort lautet, sie von Servern von Drittanbietern zu laden. Dafür gibt es einige Gründe:

  • Wenn der Server eines Drittanbieters beliebt ist und die angeforderte Datei beliebt ist, ist sie wahrscheinlich bereits im Browser des Endbenutzers zwischengespeichert
  • Wenn es sich um einen großen Drittanbieter (alias Google) handelt, verfügen sie wahrscheinlich über eine riesige Infrastruktur mit viel Bandbreite
  • Wenn es sich um ein CDN (Content Delivery Network ... was ich glaube, Google Fonts) handelt, haben Sie den zusätzlichen Vorteil, dass die Daten auf mehreren Servern weltweit gehostet werden und die Anfrage an den Standort weitergeleitet wird, der der Person, die sie anfordert, am nächsten ist.

Laden Sie also im Allgemeinen immer gemeinsame Assets von großen Drittanbietern, wann immer dies möglich ist.

Du solltest sie auf deinen Server stellen :-)

Grund:

1) Es wird schneller sein, selbst wenn sie es von einer früheren Website, die Google verwendet, zwischengespeichert haben, wird es den Cache trotzdem beim ersten Mal erstellen, sodass es nur die erste Erfahrung beeinflussen würde.

2) Angenommen, der Google-Server fällt aus und Sie haben sie nicht auf Ihrem Server abgelegt. Dann verschwinden diese Schriftarten und werden durch die Standardeinstellung ihres Browsers ersetzt.

Auf jeden Fall sollte auf den Server hochgeladen werden, das Aufrufen der Google-API ist schneller einzurichten und was nicht, aber es besteht immer die Möglichkeit, dass es ausfällt, ohne dass Sie es überhaupt wissen.

"Es wird schneller sein" ist nicht unbedingt wahr. Und während Serverausfallzeiten immer ein Problem darstellen, wage ich zu vermuten, dass Google in Bezug auf die Betriebszeit im oberen Teil eines Perzentils liegt.
Ist es bei der Verwendung von Schriftarten in Bootstrap schneller, die Google Fonts-API zu verwenden oder einfach die Schriftartdatei auf dem Server zu installieren?
AntwortenHierDatenschutz-Bestimmungen1y, 0v