Speed Up Font Awesome

Speed Up Font Awesome – Geheimtipp zum Beschleunigen

Heute möchte ich mit dir über einen wahren Geheimtipp sprechen, der deine Website in puncto Geschwindigkeit auf ein neues Level katapultieren kann. Es geht um das Beschleunigen von Font Awesome, einer der beliebtesten Icon-Schriftarten im Web. Du weißt ja, wie wichtig es ist, dass deine Website blitzschnell lädt – sowohl für die Benutzererfahrung als auch für das Ranking in den Suchmaschinen. Also schnall dich an, denn ich werde dir zeigen, wie du mit diesem Trick deine Website noch schneller machen kannst: Speed Up Font Awesome!

DarkWolfCave.de

Kurzes Vorwort

In meinem Artikel – FONT AWESOME LOKAL BEI WORDPRESS EINBINDEN – zeige ich dir schon, wie du die Icons lokal auf deinem Webserver hosten und sie in deinen Artikeln benutzen kannst. Dies haben wir unter anderem erreicht, indem wir CSS- und WebFonts-Dateien auf unseren Hoster geladen haben. Leider sind in diesen Dateien immer ALLE Icons des jeweiligen Fonts-Typs enthalten. Solltest du zum Beispiel alle 8 WebFont-Dateien aus der kostenlosen Version hochgeladen und eingebunden haben, wären das fast 1000kb!

Jetzt ist es aber meistens so, dass wir niemals alle Icons auf unserer Website benutzen werden. Sobald die Dateien aber in WordPress eingebunden wurden, müssen sie auch geladen werden. Und dies verlangsamt deinen Score bei PageSpeed und Co.

Daher möchte ich dir heute zeigen, wie du nur die Symbolschriftarten auswählst, die du auch wirklich benötigst, und hierbei sogar Icons aus unterschiedlichen WebFonts, miteinander kombinieren kannst. So wird die neue Datei anstelle von über 100kb vielleicht lediglich ein paar Kilobyte groß.

Speed Up Font Awesome!

Kurz und knapp werden wir uns jetzt überlegen, welche Icons wir auf unserer Website benutzen wollen, diese zusammenbauen und in einem neuen File speichern. Letztlich muss dann nur noch diese deutlich kleinere Datei von WordPress geladen werden.
Kommen wir direkt zu dem leichten Weg – der kostet Geld! – ca. 9$ für 30 Tage, zumindest wenn du die WOFF2 Dateien möchtest. Bei den nicht ganz so gut komprimierten WOFF Files, musst du gar nichts bezahlen. Außerdem sind die 9$ im Prinzip einmalige Kosten (kündigen nicht vergessen), denn wenn die Datei einmal erstellt ist, brauchen wir den Zugang dort auch nicht mehr… außer wir möchten später weitere Icons hinzufügen.
Du siehst: gute Planung spart dir Geld!

Der andere – deutlich aufwändigere Weg – wäre es, über einen entsprechenden Editor, die gewünschten Icons selbst zusammenzustellen und in eine neue Datei zu stecken. Ein kostenloses Tool findest du bei FontForge. Da mir aktuell die Zeit zum Einarbeiten fehlt, kann ich dir bei diesem Weg leider nicht helfen. Sollte ich es schaffen, mir dort selbst eine neue Datei – die funktioniert – zusammenzustellen, werde ich diesen Artikel gerne überarbeiten.

Geheimtipp für GenerateBlocks mit Font Awesome

Solltest du GenerateBlocks in der Pro-Version bei dir verwenden, kannst du dir vielleicht sogar das Erstellen von neuen WebFonts-Dateien sparen. Denn hier hast du die Möglichkeit, deine genutzten Icons direkt als SVG zu speichern und in allen GenerateBlocks-Elementen per Klick einbinden zu können.

Auf der FontAwesome Website suchst du dir dein(e) Icons aus, und kopierst dir den SVG-Code heraus. Diesen fügst du entweder direkt in deinem Elemente-Block bei GenerateBlocks mit ein (Segmet “Icon”), oder du legst diesen in der Asset-Library ab. Vorteil dabei: hier kannst du verschiedene SVG hinterlegen und in Gruppen sortieren. Auf diese hast du jederzeit über den Block-Editor Zugriff und kannst sie entsprechend in deine Block-Elemente einfügen.

Wie kann ich alle von mir genutzten FA Icons finden?

Wenn du jetzt komplett auf Font Awesome Dateien verzichten willst, funktionieren natürlich deine ganzen fa- eingebundenen Icons nicht mehr.
Wie du diese schnell und einfach bei dir findest, erkläre ich dir in diesem Artikel.

Speed Up Font Awesome – SVG Icons im Menü

Solltest du bereits Font Awesome Icons in die Menüleiste hinzugefügt haben, wie ich es in meinem Artikel ICONS IN WORDPRESS MENU NAVIGATION EINBINDEN beschreibe, dann musst du diese natürlich auch noch durch SVG ersetzen. Aber danach würdest du die Font Awesome Dateien gar nicht mehr benötigen. Wie erwähnt, funktioniert dieser Weg mit GenerateBlocks.

Dazu gehst du einfach in den Designer, zu deinen Menüs und schaust nach, wo du bereits deine Icons eingebaut hast.
Und ersetzt den alten Wert bei »Angezeigter Name« mit deinem kopierten SVG-Code:

Nehmen wir das Beispiel mit dem Discord-Symbol: Ich habe mir den SVG-Code von Font Awesome kopiert und noch ein paar kleine Änderungen vorgenommen. Denn sonst hätte ich kein Symbol in meiner Menüleiste gesehen. Das Icon sieht so aus:

Und der Code dahinter findest du hier:
Geändert habe ich die gesamte Zeile(n) vor <!–!Font Awesome…..:
Das height und width wurde an meine anderen Icon-Größen angepasst (24px) und preserveAspectRatio="xMidYMid meet" wurde hinzugefügt, um sicherzustellen, dass das Symbol proportional in der Mitte der viewBox platziert wird und seine relative Größe beibehält, während es sich innerhalb des sichtbaren Bereichs (der viewBox) einpasst. Oder anders, ohne diesen Eintrag hätte ich gar kein Icon gesehen, außer wenn die Viewbox auf 2000+ gesetzt worden wäre.
Der path d= … Eintrag fügt einen transparenten Hintergrund hinzu:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" height="24px" width="24px" preserveAspectRatio="xMidYMid meet"><path d="M0 0h24v24H0z" fill="none"></path> <!-- Transparenter Hintergrund -->

Ganz am Ende habe ich dann noch die Füllfarbe mit fill=”white” entsprechend eingefärbt:

59.3z" fill="white"></path> <!-- Symbol mit weißer Füllfarbe -->   </g>
</svg>

Und hier jetzt noch einmal der vollständige Code mit den Änderungen:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" height="24px" width="24px" preserveAspectRatio="xMidYMid meet"><path d="M0 0h24v24H0z" fill="none"></path> <!-- Transparenter Hintergrund --><text x="0" y="0" fill="transparent"></text> <!-- Leeres Textelement -->
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
  <path d="M524.5 69.8a1.5 1.5 0 0 0-.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0-1.9.9 337.5 337.5 0 0 0-14.9 30.6 447.8 447.8 0 0 0-134.4 0 309.5 309.5 0 0 0-15.1-30.6 1.9 1.9 0 0 0-1.9-.9 483.7 483.7 0 0 0-119.8 37.1 1.7 1.7 0 0 0-.8.7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7 348.2 348.2 0 0 0 30-48.8 1.9 1.9 0 0 0-1-2.6 321.2 321.2 0 0 1-45.9-21.9 1.9 1.9 0 0 1-.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9.2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1-.2 3.1 301.4 301.4 0 0 1-45.9 21.8 1.9 1.9 0 0 0-1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1.7 486 486 0 0 0 147.2-74.1 1.9 1.9 0 0 0 .8-1.4c12.2-126.7-20.6-236.8-87-334.5zm-302 267.8c-29 0-52.8-26.6-52.8-59.2s23.4-59.3 52.8-59.3c29.7 0 53.3 26.8 52.8 59.2 0 32.7-23.4 59.3-52.8 59.3zm195.4 0c-29 0-52.8-26.6-52.8-59.2s23.3-59.3 52.8-59.3c29.7 0 53.3 26.8 52.8 59.2 0 32.7-23.2 59.3-52.8 59.3z" fill="white"></path> <!-- Symbol mit weißer Füllfarbe -->   </g>
</svg>

Font Awesome SVG Icon optisch ans Menü anpassen

Dir ist vielleicht aufgefallen, dass das hinzugefügte SVG-Icon nicht mehr optisch so schön zu den anderen Menü-Elementen passt.
Zum Glück lässt sich dies aber zügig mit ein wenig CSS im Customizer beheben.

/* SVG in Menu lined up with the Text*/
.main-navigation .main-nav ul li.menu-item > a {
display: flex;
flex-direction: row;
align-items: center;
}

Hilfe! Mein Hover-Effekt ist weg!

Stimmt..da das eingebundene SVG-Icon so nicht mehr automatisch einem Hover-Effekt zugewiesen wird, müssen wir dies noch anpassen.
Hier gibt es auch wiederum mehrere Möglichkeiten. Ich beschränke mich auf zwei von ihnen.

Fangen wir mit der schnellsten und einfachsten Methode an, indem wir unserem Menü-Element eine weitere Klasse zuweisen, und dieser dann die entsprechende Farbe per CSS geben.
Dafür gehst du wieder über Design zu deinen Menüs. Sollte bei den Eigenschaften keine CSS-Klasse eingegeben werden können, überprüfe über »Ansicht anpassen« bitte, ob der entsprechende Punkt aktiviert ist:

Spätestens danach solltest du bei deinem Menü-Element die folgende Option sehen können. Ich nenne die neue Klasse einfach »svg_hover« :

Fehlt nur noch der entsprechende CSS-Schnipsel. Also wieder fix in unseren Customizer -> Zusätzliches CSS und folgendes eintragen.
Zur Erklärung:

• .svg_hover: Dies ist eine Klasse, die auf dem übergeordneten Element vorhanden ist. Sie identifiziert einen bestimmten Bereich oder Container in deinem HTML, der das SVG-Element enthält.
• >: Dies ist ein CSS-Selektor, der das direkte Kind-Element auswählt. In diesem Fall wählt >.a:hover das <a>-Element aus, das ein direktes Kind des Elements mit der Klasse .svg_hover ist.
• a:hover: Dieser Teil des Selektors wählt das <a>-Element aus, wenn es gehovert wird.
• svg: Dieser Teil des Selektors wählt das <svg>-Element innerhalb des <a>-Elements aus.
• path: Schließlich wählt dieser Teil des Selektors das <path>-Element innerhalb des <svg>-Elements aus.

Zusammengefasst besagt dieser Selektor, dass die nachfolgenden CSS-Regeln auf das <path>-Element innerhalb des <svg>-Elements angewendet werden sollen, wenn das <a>-Element gehovert wird und dieses <a>-Element ein direktes Kind des Elements mit der Klasse .svg_hover ist. Die Farbe musst du natürlich an deine bisherige anpassen.

.svg_hover > a:hover svg path {
  fill: #dfdf12;
}

Das war es dann auch schon. Diese Klasse gibst du dann einfach allen Menü-Elementen mit einem SVG-Icon.

Bei Hover die Farbe mit einem SVG-Filter ändern

Du kannst allerdings auch einen Filter direkt in deinem SVG-Code setzen, und diesen bei einem Hover aufrufen.
In diesem Fall vergibst du eine ID für deinen Filter und setzt die ColorMatrix auf deine gewünschte Hintergrundfarbe.
Dafür hat jemand ein sehr nützliches Tool erstellt, auf dieser Seite fügst du einfach deinen Farbcode (z.B.: dfdf12) ein und erhältst den notwendigen Code für dein SVG.

Den ausgegebenen Schnipsel setzt du einfach vor deinem SVG-Code. Hier kannst du die ID belassen, oder einen anderen Namen wählen. In meinem Beispiel habe ich filter id auf hoverFilter gesetzt:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" height="24px" width="24px" preserveAspectRatio="xMidYMid meet">
  <defs>
    <filter id="hoverFilter">
      <feColorMatrix 
        color-interpolation-filters="sRGB"
        type="matrix"
        values="0.87 0   0   0   0
                0   0.87  0   0   0
                0   0   0.07  0   0
                0   0   0   1   0 "/>
    </filter>
  </defs>

Bezogen auf unser Discord-Beispiel, würde der gesamte SVG-Code dann so aussehen:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" height="24px" width="24px" preserveAspectRatio="xMidYMid meet">
<path d="M0 0h24v24H0z" fill="none"></path> <!-- Transparenter Hintergrund --><text x="0" y="0" fill="transparent"></text> <!-- Leeres Textelement -->
  <defs>
    <filter id="hoverFilter">
      <feColorMatrix 
        color-interpolation-filters="sRGB"
        type="matrix"
        values="0.87 0   0   0   0
                0   0.87  0   0   0
                0   0   0.07  0   0
                0   0   0   1   0 "/>
    </filter>
  </defs>
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
  <path d="M524.5 69.8a1.5 1.5 0 0 0-.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0-1.9.9 337.5 337.5 0 0 0-14.9 30.6 447.8 447.8 0 0 0-134.4 0 309.5 309.5 0 0 0-15.1-30.6 1.9 1.9 0 0 0-1.9-.9 483.7 483.7 0 0 0-119.8 37.1 1.7 1.7 0 0 0-.8.7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7 348.2 348.2 0 0 0 30-48.8 1.9 1.9 0 0 0-1-2.6 321.2 321.2 0 0 1-45.9-21.9 1.9 1.9 0 0 1-.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9.2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1-.2 3.1 301.4 301.4 0 0 1-45.9 21.8 1.9 1.9 0 0 0-1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1.7 486 486 0 0 0 147.2-74.1 1.9 1.9 0 0 0 .8-1.4c12.2-126.7-20.6-236.8-87-334.5zm-302 267.8c-29 0-52.8-26.6-52.8-59.2s23.4-59.3 52.8-59.3c29.7 0 53.3 26.8 52.8 59.2 0 32.7-23.4 59.3-52.8 59.3zm195.4 0c-29 0-52.8-26.6-52.8-59.2s23.3-59.3 52.8-59.3c29.7 0 53.3 26.8 52.8 59.2 0 32.7-23.2 59.3-52.8 59.3z" fill="white"></path> <!-- Symbol mit weißer Füllfarbe -->   </g>
</svg>

Unsere CSS-Klasse, wie oben beschrieben, benötigen wir dennoch. Hier greifen wir bei einem Hover dann auf den angelegten Filter zu:

.svg_hover > a:hover svg path {
  filter: url(#hoverFilter);
}

Jetzt kennst du zwei Möglichkeiten, wie du auch bei einem SVG-Icon einen Hover-Effekt anwenden lassen kannst.

Font Awesome mit WOFF / WOFF2 oder TTF?

Kommen wir zurück zu den von Font Awesome bereitgestellten Dateien und unserer Idee, nur unsere notwendigen Icons in eine neue WebFont-Datei zu extrahieren.
Alle neueren Browser können WOFF2 nutzen, somit würde ich die TFF und WOFF gar nicht mehr einbinden wollen.
Ganz einfach ausgedrückt, ist die Kompression anderes und die Dateien kleiner. Und da unser Motto heute “Speed Up Font Awesome” lautet, entscheiden wir uns für WOFF2. Das weiß auch der Anbieter Icomoon.io – da er für das Bereitstellen von WOFF2-Formaten 9$ haben möchte… Es liegt letzendlich an dir, ob du hier Geld ausgeben möchtest. Bei recht wenigen Icons sollte der Unterschied zwischen WOFF und WOFF2 nicht wirklich groß sein.

Du kannst ja erst die WOFF Dateien testen und später immer noch auf WOFF2 upgraden.

Wir mischen unsere eigenen Font Awesome Icons zusammen

Nachdem du dir, hoffentlich, Gedanken dazu gemacht hast, welche Icons du bei dir verwenden möchtest, begeben wir uns in den Generator und wählen Font Awesome aus (das Laden kann manchmal etwas dauern). Natürlich kannst du auch andere Bibliotheken hinzufügen. Manche sind kostenfrei (die Bibliothek, nicht das spätere Bereitstellen als WOFF2), und andere kosten abermals extra.
Bedenke bitte: je mehr Icons du hinzufügst, desto größer wird am Ende die Datei. Da wir mit »Speed Up Font Awesome« unterwegs sind, würde ich wirklich so wenig wie möglich dazu nehmen.

Ein weiterer Hinweis: es sind wohl nicht wirklich alle Font Awesome Icons vorhanden. Aber du kannst alle, die du hier nicht findest, bei Font Awesome als svg herunterladen und dann bei IcoMoon über den Button “Import Icons” hinzufügen:

Nachdem du alle Icons, die du benutzen möchtest, ausgewählt hast, klickst du unten im Menü auf »Generate Font«.
In meinem Beispiel habe ich 15 Icons in der Liste:

Jetzt kannst du diverse Einstellungen vornehmen sowie dem Set einen Namen geben. Ich belasse alles bei den default-Werten und klicke auf »Font Download«
Hast du einen bezahlten Tarif (und bist eingeloggt) erhältst du zu den normalen TFF und WOFF auch die WOFF2 Datei.
Bevor wir diese jetzt zu unserem Hoster hochladen, müssen wir noch ein paar Anpassungen vornehmen.

Da du ja bereits Font Awesome Icons bei dir benutzt, und diese sicher mit ihrem fa- eingebunden hast, wäre es doch schön, wenn die neuen direkt damit verbunden werden würden. Das erspart dir manuelles Ändern auf deiner Seite!

Dazu öffnest du die style.css am besten im Notepad++ oder einem php-editor.
Über STRG+F kannst du suchen, und über den Reiter “Ersetzen” dann auch Wörter austauschen.
Wir wollen hier alle vorhandenen “icon” mit den bereits bei uns verwendeten “fa” austauschen.
Daher geben wir bei Suchen nach: icon und bei Ersetzen durch: fa ein, klicken dann auf “Alle ersetzen”:
(Speichern nicht vergessen)

In dem Bereich @font-face ganz am Anfang der Datei, solltest du noch den source der ttf (truetype) Datei löschen, sofern du diese nicht auch hochlädst. Da wir aber eigentlich nur WOFF und/oder WOFF2 verwenden, laden wir auch nur diese zum Hoster. In meinem Fall wäre es die Zeile »url(‘fonts/icomoon.ttf?phnsru’) format(‘truetype’),«. Diese lösche ich einfach. Du kannst sie zwar auch so lassen, erhältst dann aber später in der Developer-Console des Browsers entsprechende Fehlermeldungen. Speichern nicht vergessen.

Die Dateien müssen jetzt noch auf unseren Hoster. Wie du in der style.css vielleicht gesehen hast, gibt es am Anfang einen url-Wert. Default steht dieser auf fonts/. Dies bedeutet, dass der fonts Ordner relativ zu unser CSS-Datei vorhanden sein muss.

Daher legen wir einen Unterordner mit dem Namen fonts dort an, wo wir die style.css ablegen werden.
Beispiel: Bei deinem Hoster erstellst du im Verzeichnis wp-content einen neuen Ordner mit dem Namen custom_icons.
In diesem kommt dann die neue style.css sowie der Ordner fonts hinein. Und in den fonts-Ordner fügst du die WOFF/WOFF2 Datei(en) hinein.

Custom CSS unserer neuen Font Awesome Icons einbinden

Wie du eine CSS – Datei in den Header laden kannst, habe ich in meinem Artikel FONT AWESOME LOKAL BEI WORDPRESS EINBINDEN ausführlich beschrieben. Außerdem siehst du dort auch noch einmal, wie du die alten Font Awesome eingebunden hast, denn diese sollten ja wieder entfernt werden.

Nachdem die Dateien eingebunden wurden, kannst du deine Icons jetzt verwenden. Im Idealfall sollten deine bereits genutzten auch weiterhin angezeigt werden. In der style.css findest du die entsprechenden Namen.
Beispiel: fa fa-discord würde das entsprechende Discord-Icon ausgeben.

<i class="fa fa-discord"></i>

Und warum haben wir das gemacht? Na, für den “Speed Up Font Awesome” – Effekt! Schau dir mal deine neuen Dateigrößen an, und vergleiche sie in der Summe mit allen Webfonts, die du vorher mit Font Awesome eingebunden hast!
In meinem Fall waren es fast 1000kb vorher und jetzt sind es nur noch 5kb! Glaub mir, das lohnt sich 😉
Aber natürlich hängt die Größe von deinen verwendeten Icons ab, nur wird die Datei ganz sicher deutlich kleiner sein gegenüber der originalen von Font Awesome, wo alle Icons enthalten sind.