Fontawesome verlangsamt die Ladezeit der Seite

Lesezeit: 4 Minuten

Benutzer-Avatar
DSB

Ich habe eine WordPress-Site mit dem Theme „baskerville 2“ installiert. Ich habe Google Page Speed ​​Insights verwendet, um die Ladegeschwindigkeit meiner Site zu bewerten. Es sagt mir, dass die Font-Awesome-Webfont-Preload-Anforderung sie verlangsamt. Ich habe hinzugefügt:

<link rel=”preload” href=”https://dsbaudio.com/wp-content/themes/baskerville-2/fontawesome/fontawesome-webfont.woff2?v=4.3.0” as=”font” crossorigin=”anonymous”>

zum header.php und das hat die Dinge ein wenig verbessert.

Wenn ich die Dinge richtig verstehe, würde die Website viel schneller geladen, wenn das Design überhaupt keine Webfonts vorab geladen hätte?

Gibt es eine Möglichkeit, das Design zu ändern (mithilfe eines offline bearbeiteten untergeordneten Designs), um es auf Standardschriftarten wie Arial, Times oder Georgia zurückzusetzen?

Obwohl es sich um eine ausgezeichnete Ressource handelt, ist es wahrscheinlich, dass Sie nicht das gesamte Dokument benötigen SchriftartAwesome Font-Datei.

Ich verwende oft vielleicht 10 der in dieser Datei verfügbaren Glyphen. Wenn Sie die gesamte Schriftart laden – ungefähr 7.000 Glyphen – dann ziehen Sie unnötige Systemressourcen, um 6.990 Glyphen zu definieren, die Sie nie verwenden werden.

Die Antwort:

Subset deine Schriftart, guter Programmierer!

Dazu verwende ich einen Font-Subsetting-Service. Sie sind in der Regel kostenlos und es gibt leicht verständliche Anweisungen auf ihren Websites. Es gibt mehrere, aber Sie könnten Fontello ausprobieren: http://fontello.com

Ich habe mir gerade einen ziemlich großen Satz von Symbolen angesehen, die ich auf einer meiner Websites verwende, und es waren 44 KB. Sehr klein. Schnell.

Lassen Sie mich wissen, wenn Sie Fragen haben.

  • Das klingt, als würde es den Trick machen. Ich bin – zumindest im Moment – mit der Bearbeitung der woff2-Schriftartdatei beschäftigt, also wäre mein Plan, sie in .tiff zu konvertieren, alle Schriftarten, die ich nicht benötige, mit fontforge zu bearbeiten, dann zurück in woff2 zu konvertieren und zu ersetzen die Originaldatei.

    – DSB

    30. Dezember 2019 um 1:47 Uhr

  • @DSB Mein Meinung ist, dass dies nicht so gut funktionieren würde. Dies ist sicherlich nicht der direkteste/sicherste Weg, da die meisten Font-Untersetzer (einschließlich Fontello) tatsächlich einen Untersatz enthalten woff2. Ich bevorzuge die oben beschriebene Untereinstellungsmethode, weil sie 1. schneller und einfacher ist (beachten Sie, dass ich mich auch mit TIFF-Dateien auskenne), 2. die Qualität der Arbeit respektiert, die von den FontAwesome-Entwicklern geleistet wurde, und 3. Es ist modular und kann leicht aktualisiert werden, falls Sie neue Glyphen hinzufügen oder wenn das FontAwesome-Team die von Ihnen verwendeten Glyphen aktualisiert. Selbst wenn Sie ein Fontforge-Meister sind, kann es sein, dass der nächste Entwickler keiner ist.

    – Parapluie

    31. Dezember 2019 um 19:20 Uhr

  • Ja, Sie haben Recht – dieser Ansatz hat sowieso nicht so gut funktioniert! Ich habe mir Fontello angesehen – ich habe die SVG-Datei hochgeladen, aber ich bin ein bisschen ratlos, was ich als nächstes tun soll … wirklich ein bisschen überfordert. Um ehrlich zu sein, bin ich mit den Schriftarten in Fontawesome im Allgemeinen nicht wirklich zufrieden, und ich brauche sicherlich nicht alle diese Glyphen! Ich hätte lieber die üblichen Webfonts wie Arial usw. Es kommt nur vor, dass Fontawesome mit dem von mir verwendeten Thema geliefert wurde. Ich denke, ich sollte versuchen, die Schriftart in meinem CSS anzupassen – für mich erfordert das eine steile Lernkurve!

    – DSB

    2. Januar 2020 um 2:15 Uhr

  • Jedes Out-of-the-Box-Framework oder -Thema wird mehr Overhead als erforderlich haben: Es liegt in der Natur des Biests. Wenn Sie verhindern können, dass das Design die Schriftart lädt, und verwenden Sie dann Ihre benutzerdefinierte css um die untergeordnete Schriftartdatei zu laden, dann könnte dies der Weg sein, die Belastung des Systems zu verringern. Lassen Sie mich wissen, was Ihnen einfällt. Ich werde die nächsten Tage auf Flughäfen sein, kann danach aber alle Fragen beantworten.

    – Parapluie

    2. Januar 2020 um 3:45 Uhr

Haben Sie darüber nachgedacht, den Code stattdessen in Ihrer Fußzeile zu platzieren? Einige Websites behaupten, dass dies die Ladezeiten verlängert.

Alternativ, in Bezug auf die Auswahl von Standardschriftarten, ja – entweder durch Ändern Ihres CSS oder durch Ändern der Schriftart in Ihren Themenoptionen. Sie sollten es dort ändern können … Ich bin mit Ihrem Thema nicht vertraut, es tut mir leid, dass ich nicht genauer sein konnte.

  • danke – habe versucht, Code zur Fußzeile hinzuzufügen, hat jedoch keinen großen Unterschied gemacht.

    – DSB

    30. Dezember 2019 um 1:48 Uhr

  • Ich wusste, dass es nicht die “beste” Option sein würde, aber es ist bei weitem die gebräuchlichste und einfachste. Viel Glück. @parapluie bietet auch eine gute Option.

    – Aliqua

    30. Dezember 2019 um 3:18 Uhr

Sie müssen zwei Schritte ausführen, um dieses Problem zu lösen.

Schritt eins: Gehen Sie zu Aussehen -> Themeneditor -> Framework/dist/css/site/stacks/(yourstacks).css suchen Sie nach @font-face und ersetzen Sie es durch font-display:swap;

Schritt zwei: Gehen Sie zu Aussehen -> Themeneditor -> Framework -> Schriftarten -> Font_awesome

Fügen Sie diese Codezeile in das Font-Tag ein font-display=”swap”;

1246810cookie-checkFontawesome verlangsamt die Ladezeit der Seite

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy