Asynchrones Laden von Typekit ::Lohnt es sich, oder ist es besser, es überhaupt nicht zu verwenden?

Question

Ich versuche, die Ladezeit der Seite zu verkürzen.

Ich bin dem dritten skizzierten Beispiel gefolgt Hier um das TypeKit-Javascript asynchron zu laden.

Damit es funktioniert, müssen Sie a hinzufügen .wf-loading #some-element {visibility: hidden;} zu jedem Element, das die Schriftart verwendet, und entweder 1) wird sie geladen oder 2) nach einer festgelegten Zeit (1 Sekunde) wird die Schriftart sichtbar.

Die Sache ist, dass dem CSS, mit dem ich arbeite, die Schriftart etwa 200 Elementen zugewiesen ist, das sind also 200 Elemente .wf-loading{ } (Notiz:Ich habe dieses CSS nicht geschrieben).

Ich habe das Gefühl, dass dies die Ladezeit stärker verlangsamen würde, als es einfach regelmäßig laden zu lassen, da DOM so viele Dinge durchläuft.Wenn dies der Fall ist, werde ich Typekit einfach komplett abschaffen und eine normale Schriftart verwenden.

Gibt es Tools, mit denen ich Leistungstests für solche Dinge durchführen kann?Oder hat jemand diese Dinger getestet?

Answer 1

Mit diesem Ansatz ändern Sie nicht mehr als ein einzelnes DOM-Element (das Stammelement).Das bedeutet, dass unsere modernen Browser auf sie angewiesen sind super schnelle CSS-Engines, sodass die Anzahl der beteiligten Elemente keinen spürbaren Einfluss auf das Laden der Seite hat.

Was das Laden und Flackern von Seiten betrifft, ist die Netzwerklatenz normalerweise um eine Größenordnung schlimmer als die DOM-Manipulation.Beim allerersten (nicht vorbereiteten) Laden der Seite wird es immer etwas Flackern geben, während der Browser auf den Download der Schriftart wartet.Stellen Sie einfach sicher, dass Ihre Schriftart zur Wiederverwendung zwischengespeichert wird, und versuchen Sie, die Dateigröße so klein wie möglich zu halten.

Ich bin diesen Weg vor ein paar Jahren mit Cufon gegangen.Am Ende habe ich den einfachsten Weg mit akzeptabler Leistung gewählt und dort aufgehört.Es ist leicht, sich mit der Optimierung von Seitenladevorgängen zu beschäftigen, aber es gibt wahrscheinlich noch vielversprechendere Bereiche für Verbesserungen – Funktionen, Fehler, Refactoring usw.

Answer 2

Das Problem ist, wie sie in der Blog, die seltenen Fälle (aber es kommt auf jeden Fall vor – bei mir sicherlich mehr als einmal), in denen das Typekit-CDN komplett ausfällt und Benutzer nur eine leere Seite sehen.In diesem Fall wünschen Sie sich, Sie hätten asynchrones Laden verwendet.